Selaa lähdekoodia

Add label and aria role for toolbar.

Mateusz Samsel 6 vuotta sitten
vanhempi
commit
3c41904f36

+ 57 - 1
packages/ckeditor5-ui/src/toolbar/toolbarview.js

@@ -14,6 +14,7 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import ToolbarSeparatorView from './toolbarseparatorview';
 import preventDefault from '../bindings/preventdefault.js';
 import log from '@ckeditor/ckeditor5-utils/src/log';
+import uid from '@ckeditor/ckeditor5-utils/src/uid';
 
 import '../../theme/components/toolbar/toolbar.css';
 
@@ -31,6 +32,7 @@ export default class ToolbarView extends View {
 		super( locale );
 
 		const bind = this.bindTemplate;
+		const ariaLabelUid = uid();
 
 		/**
 		 * Collection of the toolbar items (like buttons).
@@ -73,6 +75,22 @@ export default class ToolbarView extends View {
 		this.set( 'class' );
 
 		/**
+		 * The label of the toolbar.
+		 *
+		 * @observable
+		 * @member {String} #label
+		 */
+		this.set( 'label' );
+
+		/**
+		 * Label of the toolbar view. It is configurable using the {@link #label label attribute}.
+		 *
+		 * @readonly
+		 * @member {module:ui/view~View} #labelView
+		 */
+		this.labelView = this._createLabelView( ariaLabelUid );
+
+		/**
 		 * Helps cycling over focusable {@link #items} in the toolbar.
 		 *
 		 * @readonly
@@ -100,7 +118,9 @@ export default class ToolbarView extends View {
 					'ck-toolbar',
 					bind.if( 'isVertical', 'ck-toolbar_vertical' ),
 					bind.to( 'class' )
-				]
+				],
+				role: 'toolbar',
+				'aria-labelledby': `ck-editor__aria-label_${ ariaLabelUid }`
 			},
 
 			children: this.items,
@@ -110,6 +130,9 @@ export default class ToolbarView extends View {
 				mousedown: preventDefault( this )
 			}
 		} );
+
+		// Add label in a way to not be present in this.items.
+		this.registerChild( this.labelView );
 	}
 
 	/**
@@ -131,6 +154,8 @@ export default class ToolbarView extends View {
 			this.focusTracker.remove( item.element );
 		} );
 
+		this.element.appendChild( this.labelView.element );
+
 		// Start listening for the keystrokes coming from #element.
 		this.keystrokes.listenTo( this.element );
 	}
@@ -187,5 +212,36 @@ export default class ToolbarView extends View {
 			}
 		} );
 	}
+
+	/**
+	 * Creates a label view instance and binds it with toolbar attributes.
+	 *
+	 * @private
+	 * @param {String} ariaLabelUid The aria label UID.
+	 * @returns {module:ui/view~View}
+	 */
+	_createLabelView( ariaLabelUid ) {
+		const labelView = new View();
+
+		labelView.setTemplate( {
+			tag: 'span',
+
+			attributes: {
+				class: [
+					'ck',
+					'ck-toolbar__label'
+				],
+				id: `ck-editor__aria-label_${ ariaLabelUid }`,
+			},
+
+			children: [
+				{
+					text: this.bindTemplate.to( 'label' )
+				}
+			]
+		} );
+
+		return labelView;
+	}
 }
 

+ 4 - 0
packages/ckeditor5-ui/theme/components/toolbar/toolbar.css

@@ -19,6 +19,10 @@
 	&.ck-toolbar_floating {
 		flex-wrap: nowrap;
 	}
+
+	& .ck.ck-toolbar__label {
+		display: none;
+	}
 }
 
 .ck.ck-toolbar__separator {