@ckeditor/ckeditor5-editor-multi-root 43.0.0 → 43.1.0-alpha.1

package/dist/multirooteditor.d.ts

@@ -219,9 +219,10 @@ export default class MultiRootEditor extends Editor {
      * @param root Root for which the editable element should be created.
      * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
      * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
+     * @param label The accessible label text describing the editable to the assistive technologies.
      * @returns The created DOM element. Append it in a desired place in your application.
      */
-    createEditable(root: RootElement, placeholder?: string): HTMLElement;
+    createEditable(root: RootElement, placeholder?: string, label?: string): HTMLElement;
     /**
      * Detaches the DOM editable element that was attached to the given root.
      *

package/dist/multirooteditoruiview.d.ts

@@ -53,10 +53,13 @@ export default class MultiRootEditorUIView extends EditorUIView {
      * @param options.shouldToolbarGroupWhenFull When set to `true` enables automatic items grouping
      * in the main {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#toolbar toolbar}.
      * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
+     * @param options.label When set, this value will be used as an accessible `aria-label` of the
+     * {@link module:ui/editableui/editableuiview~EditableUIView editable view} elements.
      */
     constructor(locale: Locale, editingView: EditingView, editableNames: Array<string>, options?: {
         editableElements?: Record<string, HTMLElement>;
         shouldToolbarGroupWhenFull?: boolean;
+        label?: string | Record<string, string>;
     });
     /**
      * Creates an editable instance with given name and registers it in the editor UI view.
@@ -66,9 +69,10 @@ export default class MultiRootEditorUIView extends EditorUIView {
      *
      * @param editableName The name for the editable.
      * @param editableElement DOM element for which the editable should be created.
+     * @param label The accessible editable label used by assistive technologies.
      * @returns The created editable instance.
      */
-    createEditable(editableName: string, editableElement?: HTMLElement): InlineEditableUIView;
+    createEditable(editableName: string, editableElement?: HTMLElement, label?: string): InlineEditableUIView;
     /**
      * Destroys and removes the editable from the editor UI view.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-editor-multi-root",
-  "version": "43.0.0",
+  "version": "43.1.0-alpha.1",
   "description": "Multi-root editor implementation for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,11 +12,11 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "43.0.0",
-    "@ckeditor/ckeditor5-engine": "43.0.0",
-    "@ckeditor/ckeditor5-ui": "43.0.0",
-    "@ckeditor/ckeditor5-utils": "43.0.0",
-    "ckeditor5": "43.0.0",
+    "@ckeditor/ckeditor5-core": "43.1.0-alpha.1",
+    "@ckeditor/ckeditor5-engine": "43.1.0-alpha.1",
+    "@ckeditor/ckeditor5-ui": "43.1.0-alpha.1",
+    "@ckeditor/ckeditor5-utils": "43.1.0-alpha.1",
+    "ckeditor5": "43.1.0-alpha.1",
     "lodash-es": "4.17.21"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/multirooteditor.d.ts

@@ -215,9 +215,10 @@ export default class MultiRootEditor extends Editor {
      * @param root Root for which the editable element should be created.
      * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
      * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
+     * @param label The accessible label text describing the editable to the assistive technologies.
      * @returns The created DOM element. Append it in a desired place in your application.
      */
-    createEditable(root: RootElement, placeholder?: string): HTMLElement;
+    createEditable(root: RootElement, placeholder?: string, label?: string): HTMLElement;
     /**
      * Detaches the DOM editable element that was attached to the given root.
      *

package/src/multirooteditor.js

@@ -135,7 +135,8 @@ export default class MultiRootEditor extends Editor {
         }
         const options = {
             shouldToolbarGroupWhenFull: !this.config.get('toolbar.shouldNotGroupWhenFull'),
-            editableElements: sourceIsData ? undefined : sourceElementsOrData
+            editableElements: sourceIsData ? undefined : sourceElementsOrData,
+            label: this.config.get('label')
         };
         const view = new MultiRootEditorUIView(this.locale, this.editing.view, rootNames, options);
         this.ui = new MultiRootEditorUI(this, view);
@@ -403,10 +404,11 @@ export default class MultiRootEditor extends Editor {
      * @param root Root for which the editable element should be created.
      * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
      * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
+     * @param label The accessible label text describing the editable to the assistive technologies.
      * @returns The created DOM element. Append it in a desired place in your application.
      */
-    createEditable(root, placeholder) {
-        const editable = this.ui.view.createEditable(root.rootName);
+    createEditable(root, placeholder, label) {
+        const editable = this.ui.view.createEditable(root.rootName, undefined, label);
         this.ui.addEditable(editable, placeholder);
         this.editing.view.forceRender();
         return editable.element;

package/src/multirooteditoruiview.d.ts

@@ -49,10 +49,13 @@ export default class MultiRootEditorUIView extends EditorUIView {
      * @param options.shouldToolbarGroupWhenFull When set to `true` enables automatic items grouping
      * in the main {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#toolbar toolbar}.
      * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
+     * @param options.label When set, this value will be used as an accessible `aria-label` of the
+     * {@link module:ui/editableui/editableuiview~EditableUIView editable view} elements.
      */
     constructor(locale: Locale, editingView: EditingView, editableNames: Array<string>, options?: {
         editableElements?: Record<string, HTMLElement>;
         shouldToolbarGroupWhenFull?: boolean;
+        label?: string | Record<string, string>;
     });
     /**
      * Creates an editable instance with given name and registers it in the editor UI view.
@@ -62,9 +65,10 @@ export default class MultiRootEditorUIView extends EditorUIView {
      *
      * @param editableName The name for the editable.
      * @param editableElement DOM element for which the editable should be created.
+     * @param label The accessible editable label used by assistive technologies.
      * @returns The created editable instance.
      */
-    createEditable(editableName: string, editableElement?: HTMLElement): InlineEditableUIView;
+    createEditable(editableName: string, editableElement?: HTMLElement, label?: string): InlineEditableUIView;
     /**
      * Destroys and removes the editable from the editor UI view.
      *

package/src/multirooteditoruiview.js

@@ -30,6 +30,8 @@ export default class MultiRootEditorUIView extends EditorUIView {
      * @param options.shouldToolbarGroupWhenFull When set to `true` enables automatic items grouping
      * in the main {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#toolbar toolbar}.
      * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
+     * @param options.label When set, this value will be used as an accessible `aria-label` of the
+     * {@link module:ui/editableui/editableuiview~EditableUIView editable view} elements.
      */
     constructor(locale, editingView, editableNames, options = {}) {
         super(locale);
@@ -42,7 +44,11 @@ export default class MultiRootEditorUIView extends EditorUIView {
         // Create `InlineEditableUIView` instance for each editable.
         for (const editableName of editableNames) {
             const editableElement = options.editableElements ? options.editableElements[editableName] : undefined;
-            this.createEditable(editableName, editableElement);
+            let { label } = options;
+            if (typeof label === 'object') {
+                label = label[editableName];
+            }
+            this.createEditable(editableName, editableElement, label);
         }
         this.editable = Object.values(this.editables)[0];
         // This toolbar may be placed anywhere in the page so things like font size need to be reset in it.
@@ -76,14 +82,12 @@ export default class MultiRootEditorUIView extends EditorUIView {
      *
      * @param editableName The name for the editable.
      * @param editableElement DOM element for which the editable should be created.
+     * @param label The accessible editable label used by assistive technologies.
      * @returns The created editable instance.
      */
-    createEditable(editableName, editableElement) {
-        const t = this.locale.t;
+    createEditable(editableName, editableElement, label) {
         const editable = new InlineEditableUIView(this.locale, this._editingView, editableElement, {
-            label: editable => {
-                return t('Rich Text Editor. Editing area: %0', editable.name);
-            }
+            label
         });
         this.editables[editableName] = editable;
         editable.name = editableName;