diff --git a/lang/contexts.json b/lang/contexts.json index f7e7fb00..b14a6c17 100644 --- a/lang/contexts.json +++ b/lang/contexts.json @@ -16,5 +16,6 @@ "Merge cell left": "Label for the merge table cell left button.", "Split cell vertically": "Label for the split table cell vertically button.", "Split cell horizontally": "Label for the split table cell horizontally button.", - "Merge cells": "Label for the merge table cells button." + "Merge cells": "Label for the merge table cells button.", + "Table toolbar": "The label used by assistive technologies describing a table toolbar attached to a table widget." } diff --git a/src/tabletoolbar.js b/src/tabletoolbar.js index 1e5f25eb..b6fee36a 100644 --- a/src/tabletoolbar.js +++ b/src/tabletoolbar.js @@ -42,6 +42,7 @@ export default class TableToolbar extends Plugin { */ afterInit() { const editor = this.editor; + const t = editor.t; const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository ); const tableContentToolbarItems = editor.config.get( 'table.contentToolbar' ); @@ -50,6 +51,7 @@ export default class TableToolbar extends Plugin { if ( tableContentToolbarItems ) { widgetToolbarRepository.register( 'tableContent', { + ariaLabel: t( 'Table toolbar' ), items: tableContentToolbarItems, getRelatedElement: getTableWidgetAncestor } ); @@ -57,6 +59,7 @@ export default class TableToolbar extends Plugin { if ( tableToolbarItems ) { widgetToolbarRepository.register( 'table', { + ariaLabel: t( 'Table toolbar' ), items: tableToolbarItems, getRelatedElement: getSelectedTableWidget } ); diff --git a/tests/tabletoolbar.js b/tests/tabletoolbar.js index 21f90a96..d0a35d14 100644 --- a/tests/tabletoolbar.js +++ b/tests/tabletoolbar.js @@ -94,6 +94,14 @@ describe( 'TableToolbar', () => { balloonClassName: 'ck-toolbar-container' } ); } ); + + it( 'should set aria-label attribute', () => { + toolbar.render(); + + expect( toolbar.element.getAttribute( 'aria-label' ) ).to.equal( 'Table toolbar' ); + + toolbar.destroy(); + } ); } ); describe( 'integration with the editor focus', () => {