Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Add aria-label for image toolbar #302

Merged
merged 4 commits into from
Aug 13, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion lang/contexts.json
Original file line number Diff line number Diff line change
Expand Up @@ -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."
}
2 changes: 2 additions & 0 deletions src/imagetoolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
} );
Expand Down
8 changes: 8 additions & 0 deletions tests/imagetoolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down