diff --git a/lang/contexts.json b/lang/contexts.json index 2f9d4959..2106bdd0 100644 --- a/lang/contexts.json +++ b/lang/contexts.json @@ -9,5 +9,6 @@ "Text alternative": "Label for the image text alternative input.", "Enter image caption": "Placeholder text for image caption displayed when caption is empty.", "Insert image": "Label for the insert image toolbar button.", - "Upload failed": "Title of the notification displayed when upload fails." + "Upload failed": "Title of the notification displayed when upload fails.", + "Image toolbar": "The label used by assistive technologies describing an image toolbar attached to an image widget." } diff --git a/src/imagetoolbar.js b/src/imagetoolbar.js index fe0ce8ee..65e37081 100644 --- a/src/imagetoolbar.js +++ b/src/imagetoolbar.js @@ -44,9 +44,11 @@ export default class ImageToolbar extends Plugin { */ afterInit() { const editor = this.editor; + const t = editor.t; const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository ); widgetToolbarRepository.register( 'image', { + ariaLabel: t( 'Image toolbar' ), items: editor.config.get( 'image.toolbar' ) || [], getRelatedElement: getSelectedImageWidget, } ); diff --git a/tests/imagetoolbar.js b/tests/imagetoolbar.js index 7f54dd54..661395e9 100644 --- a/tests/imagetoolbar.js +++ b/tests/imagetoolbar.js @@ -89,6 +89,14 @@ describe( 'ImageToolbar', () => { balloonClassName: 'ck-toolbar-container' } ); } ); + + it( 'should set aria-label attribute', () => { + toolbar.render(); + + expect( toolbar.element.getAttribute( 'aria-label' ) ).to.equal( 'Image toolbar' ); + + toolbar.destroy(); + } ); } ); describe( 'integration with the editor focus', () => {