@ckeditor/ckeditor5-ui - npm Package Compare versions

Comparing version 0.0.0-nightly-20240731.0 to 0.0.0-nightly-20240801.0

dist/editableui/editableuiview.d.ts

@@ -41,3 +41,3 @@ /**
      */
-    private _editableElement;
+    protected _editableElement: HTMLElement | null | undefined;
     /**
@@ -44,0 +44,0 @@ * Whether an external {@link #_editableElement} was passed into the constructor, which also means

dist/editableui/inline/inlineeditableuiview.d.ts

@@ -20,6 +20,5 @@ /**
     /**
-     * A function that gets called with the instance of this view as an argument and should return a string that
-     * represents the label of the editable for assistive technologies.
+     * The cached options object passed to the constructor.
      */
-    private readonly _generateLabel;
+    private readonly _options;
     /**
@@ -34,9 +33,6 @@ * Creates an instance of the InlineEditableUIView class.
      * @param options Additional configuration of the view.
-     * @param options.label A function that gets called with the instance of this view as an argument
-     * and should return a string that represents the label of the editable for assistive technologies. If not provided,
-     * a default label generator is used.
+     * @param options.label The label of the editable for assistive technologies. If not provided, a default label is used or,
+     * the existing `aria-label` attribute value from the specified `editableElement` is preserved.
      */
-    constructor(locale: Locale, editingView: EditingView, editableElement?: HTMLElement, options?: {
-        label?: (view: InlineEditableUIView) => string;
-    });
+    constructor(locale: Locale, editingView: EditingView, editableElement?: HTMLElement, options?: InlineEditableUIViewOptions);
     /**
@@ -46,2 +42,10 @@ * @inheritDoc
     render(): void;
+    /**
+     * Returns a normalized label for the editable view based on the environment.
+     */
+    getEditableAriaLabel(): string;
 }
+type InlineEditableUIViewOptions = {
+    label?: ((view: InlineEditableUIView) => string) | string | Record<string, string>;
+};
+export {};

lang/contexts.json

 {
 	"Rich Text Editor": "Title of the CKEditor5 editor.",
-	"Editor editing area: %0": "Accessible label of the specific editing area belonging to a container with an ARIA application role.",
 	"Edit block": "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)",
@@ -5,0 +4,0 @@ "Click to edit block": "First part of the label of the block toolbar icon when functionality of drag and drop is available (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)",

package.json

 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "0.0.0-nightly-20240731.0",
+  "version": "0.0.0-nightly-20240801.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
@@ -15,4 +15,4 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20240731.0",
-    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20240731.0",
+    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20240801.0",
+    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20240801.0",
     "color-convert": "2.0.1",
@@ -19,0 +19,0 @@ "color-parse": "1.4.2",

src/editableui/editableuiview.d.ts

@@ -37,3 +37,3 @@ /**
      */
-    private _editableElement;
+    protected _editableElement: HTMLElement | null | undefined;
     /**
@@ -40,0 +40,0 @@ * Whether an external {@link #_editableElement} was passed into the constructor, which also means

src/editableui/inline/inlineeditableuiview.d.ts

@@ -16,6 +16,5 @@ /**
     /**
-     * A function that gets called with the instance of this view as an argument and should return a string that
-     * represents the label of the editable for assistive technologies.
+     * The cached options object passed to the constructor.
      */
-    private readonly _generateLabel;
+    private readonly _options;
     /**
@@ -30,9 +29,6 @@ * Creates an instance of the InlineEditableUIView class.
      * @param options Additional configuration of the view.
-     * @param options.label A function that gets called with the instance of this view as an argument
-     * and should return a string that represents the label of the editable for assistive technologies. If not provided,
-     * a default label generator is used.
+     * @param options.label The label of the editable for assistive technologies. If not provided, a default label is used or,
+     * the existing `aria-label` attribute value from the specified `editableElement` is preserved.
      */
-    constructor(locale: Locale, editingView: EditingView, editableElement?: HTMLElement, options?: {
-        label?: (view: InlineEditableUIView) => string;
-    });
+    constructor(locale: Locale, editingView: EditingView, editableElement?: HTMLElement, options?: InlineEditableUIViewOptions);
     /**
@@ -42,2 +38,10 @@ * @inheritDoc
     render(): void;
+    /**
+     * Returns a normalized label for the editable view based on the environment.
+     */
+    getEditableAriaLabel(): string;
 }
+type InlineEditableUIViewOptions = {
+    label?: ((view: InlineEditableUIView) => string) | string | Record<string, string>;
+};
+export {};

src/editableui/inline/inlineeditableuiview.js

@@ -22,9 +22,8 @@ /**
      * @param options Additional configuration of the view.
-     * @param options.label A function that gets called with the instance of this view as an argument
-     * and should return a string that represents the label of the editable for assistive technologies. If not provided,
-     * a default label generator is used.
+     * @param options.label The label of the editable for assistive technologies. If not provided, a default label is used or,
+     * the existing `aria-label` attribute value from the specified `editableElement` is preserved.
      */
     constructor(locale, editingView, editableElement, options = {}) {
         super(locale, editingView, editableElement);
-        const t = locale.t;
+        this._options = options;
         this.extendTemplate({
@@ -36,3 +35,2 @@ attributes: {
         });
-        this._generateLabel = options.label || (() => t('Editor editing area: %0', this.name));
     }
@@ -47,5 +45,30 @@ /**
             const viewRoot = editingView.document.getRoot(this.name);
-            writer.setAttribute('aria-label', this._generateLabel(this), viewRoot);
+            writer.setAttribute('aria-label', this.getEditableAriaLabel(), viewRoot);
         });
     }
+    /**
+     * Returns a normalized label for the editable view based on the environment.
+     */
+    getEditableAriaLabel() {
+        const t = this.locale.t;
+        const label = this._options.label;
+        const editableElement = this._editableElement;
+        const editableName = this.name;
+        if (typeof label == 'string') {
+            return label;
+        }
+        else if (typeof label === 'object') {
+            return label[editableName];
+        }
+        else if (typeof label === 'function') {
+            return label(this);
+        }
+        else if (editableElement) {
+            const existingLabel = editableElement.getAttribute('aria-label');
+            if (existingLabel) {
+                return existingLabel;
+            }
+        }
+        return t('Rich Text Editor. Editing area: %0', editableName);
+    }
 }

src/editorui/accessibilityhelp/accessibilityhelp.js

@@ -109,3 +109,5 @@ /**
             const currentAriaLabel = viewRoot.getAttribute('aria-label');
-            const newAriaLabel = `${currentAriaLabel}. ${t('Press %0 for help.', [getEnvKeystrokeText('Alt+0')])}`;
+            const newAriaLabel = [currentAriaLabel, t('Press %0 for help.', [getEnvKeystrokeText('Alt+0')])]
+                .filter(segment => segment)
+                .join('. ');
             writer.setAttribute('aria-label', newAriaLabel, viewRoot);
@@ -112,0 +114,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6341734

increased by0.08%

Lines of code

61562

increased by0.09%

Dependency changes

• + Added@ckeditor/ckeditor5-core@0.0.0-nightly-20240801.0(transitive)

• + Added@ckeditor/ckeditor5-engine@0.0.0-nightly-20240801.0(transitive)

• + Added@ckeditor/ckeditor5-utils@0.0.0-nightly-20240801.0(transitive)

• + Added@ckeditor/ckeditor5-watchdog@0.0.0-nightly-20240801.0(transitive)

• - Removed@ckeditor/ckeditor5-core@0.0.0-nightly-20240731.0(transitive)

• - Removed@ckeditor/ckeditor5-engine@0.0.0-nightly-20240731.0(transitive)

• - Removed@ckeditor/ckeditor5-utils@0.0.0-nightly-20240731.0(transitive)

• - Removed@ckeditor/ckeditor5-watchdog@0.0.0-nightly-20240731.0(transitive)

• Updated@ckeditor/ckeditor5-core@0.0.0-nightly-20240801.0

• Updated@ckeditor/ckeditor5-utils@0.0.0-nightly-20240801.0