diff --git a/lang/contexts.json b/lang/contexts.json new file mode 100644 index 00000000..0f93c58c --- /dev/null +++ b/lang/contexts.json @@ -0,0 +1,3 @@ +{ + "Widget toolbar": "The label used by assistive technologies describing a toolbar attached to a widget." +} diff --git a/src/widgettoolbarrepository.js b/src/widgettoolbarrepository.js index 1c7559dc..481ce9c2 100644 --- a/src/widgettoolbarrepository.js +++ b/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.} 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 ) ) { /** diff --git a/tests/widgettoolbarrepository.js b/tests/widgettoolbarrepository.js index 98c333c6..a8e845b6 100644 --- a/tests/widgettoolbarrepository.js +++ b/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', () => {