Merge pull request #91 from ckeditor/t/ckeditor5/1404

Other: The widget toolbar should have a proper `aria-label` attribute (see ckeditor/ckeditor5#1404).

lang/contexts.json

@@ -0,0 +1,3 @@
+{
+	"Widget toolbar": "The label used by assistive technologies describing a toolbar attached to a widget."
+}

src/widgettoolbarrepository.js

@@ -111,13 +111,17 @@ export default class WidgetToolbarRepository extends Plugin {
 	 *
 	 * @param {String} toolbarId An id for the toolbar. Used to
 	 * @param {Object} options
+	 * @param {String} [options.ariaLabel] Label used by assistive technologies to describe this toolbar element.
 	 * @param {Array.<String>} options.items Array of toolbar items.
 	 * @param {Function} options.getRelatedElement Callback which returns an element the toolbar should be attached to.
 	 * @param {String} [options.balloonClassName='ck-toolbar-container'] CSS class for the widget balloon.
 	 */
-	register( toolbarId, { items, getRelatedElement, balloonClassName = 'ck-toolbar-container' } ) {
+	register( toolbarId, { ariaLabel, items, getRelatedElement, balloonClassName = 'ck-toolbar-container' } ) {
 		const editor = this.editor;
-		const toolbarView = new ToolbarView();
+		const t = editor.t;
+		const toolbarView = new ToolbarView( editor.locale );
+
+		toolbarView.ariaLabel = ariaLabel || t( 'Widget toolbar' );
 
 		if ( this._toolbarDefinitions.has( toolbarId ) ) {
 			/**

tests/widgettoolbarrepository.js

@@ -90,6 +90,37 @@ describe( 'WidgetToolbarRepository', () => {
 				} );
 			}, /^widget-toolbar-duplicated/, editor );
 		} );
+
+		it( 'should use a pre–defined aria-label for the toolbar', () => {
+			widgetToolbarRepository.register( 'fake', {
+				items: editor.config.get( 'fake.toolbar' ),
+				getRelatedElement: () => null
+			} );
+
+			const toolbarView = widgetToolbarRepository._toolbarDefinitions.get( 'fake' ).view;
+
+			toolbarView.render();
+
+			expect( toolbarView.element.getAttribute( 'aria-label' ) ).to.equal( 'Widget toolbar' );
+
+			toolbarView.destroy();
+		} );
+
+		it( 'should use a custom aria-label when provided', () => {
+			widgetToolbarRepository.register( 'fake', {
+				items: editor.config.get( 'fake.toolbar' ),
+				getRelatedElement: () => null,
+				ariaLabel: 'Custom label'
+			} );
+
+			const toolbarView = widgetToolbarRepository._toolbarDefinitions.get( 'fake' ).view;
+
+			toolbarView.render();
+
+			expect( toolbarView.element.getAttribute( 'aria-label' ) ).to.equal( 'Custom label' );
+
+			toolbarView.destroy();
+		} );
 	} );
 
 	describe( 'integration tests', () => {