diff --git a/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.ts b/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.ts index 3f0b59419e5..0dd3b057b0f 100644 --- a/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.ts +++ b/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.ts @@ -715,6 +715,7 @@ export default class TableCellPropertiesView extends View { horizontalAlignmentToolbar.set( { isCompact: true, + role: 'radiogroup', ariaLabel: t( 'Horizontal text alignment toolbar' ) } ); @@ -745,6 +746,7 @@ export default class TableCellPropertiesView extends View { verticalAlignmentToolbar.set( { isCompact: true, + role: 'radiogroup', ariaLabel: t( 'Vertical text alignment toolbar' ) } ); diff --git a/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts b/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts index 4f24c81958e..821e4de9f37 100644 --- a/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts +++ b/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts @@ -639,6 +639,7 @@ export default class TablePropertiesView extends View { const alignmentToolbar = new ToolbarView( locale! ); alignmentToolbar.set( { + role: 'radiogroup', isCompact: true, ariaLabel: t( 'Table alignment toolbar' ) } ); diff --git a/packages/ckeditor5-table/src/utils/ui/table-properties.ts b/packages/ckeditor5-table/src/utils/ui/table-properties.ts index 5be4bc109dc..6a52c6079ea 100644 --- a/packages/ckeditor5-table/src/utils/ui/table-properties.ts +++ b/packages/ckeditor5-table/src/utils/ui/table-properties.ts @@ -175,6 +175,8 @@ export function fillToolbar { expect( toolbar.items.last.isOn ).to.be.false; expect( toolbar.items.first.isOn ).to.be.true; } ); + + it( 'should have proper ARIA properties', () => { + expect( toolbar.role ).to.equal( 'radiogroup' ); + expect( toolbar.ariaLabel ).to.equal( 'Horizontal text alignment toolbar' ); + } ); + + it( 'should have role=radio set on buttons', () => { + expect( [ ...toolbar.items ].some( ( { role, isToggleable } ) => role && isToggleable ) ).to.be.true; + expect( toolbar.items.length ).to.equal( 4 ); + } ); } ); describe( 'vertical text alignment toolbar', () => { @@ -599,6 +609,17 @@ describe( 'table cell properties', () => { expect( toolbar.items.last.isOn ).to.be.false; expect( toolbar.items.first.isOn ).to.be.true; } ); + + it( 'should have proper ARIA properties', () => { + expect( toolbar.role ).to.equal( 'radiogroup' ); + expect( toolbar.isCompact ).to.be.true; + expect( toolbar.ariaLabel ).to.equal( 'Vertical text alignment toolbar' ); + } ); + + it( 'should have role=radio set on buttons', () => { + expect( [ ...toolbar.items ].some( ( { role, isToggleable } ) => role && isToggleable ) ).to.be.true; + expect( toolbar.items.length ).to.equal( 3 ); + } ); } ); } ); diff --git a/packages/ckeditor5-table/tests/tableproperties/ui/tablepropertiesview.js b/packages/ckeditor5-table/tests/tableproperties/ui/tablepropertiesview.js index e635a1c252a..12019c16f59 100644 --- a/packages/ckeditor5-table/tests/tableproperties/ui/tablepropertiesview.js +++ b/packages/ckeditor5-table/tests/tableproperties/ui/tablepropertiesview.js @@ -521,6 +521,16 @@ describe( 'table properties', () => { expect( toolbar.items.last.isOn ).to.be.false; expect( toolbar.items.first.isOn ).to.be.true; } ); + + it( 'should set proper ARIA properties', () => { + expect( toolbar.role ).to.equal( 'radiogroup' ); + expect( toolbar.ariaLabel ).to.equal( 'Table alignment toolbar' ); + } ); + + it( 'should have role=radio set on buttons', () => { + expect( [ ...toolbar.items ].some( ( { role, isToggleable } ) => role && isToggleable ) ).to.be.true; + expect( toolbar.items.length ).to.equal( 3 ); + } ); } ); } ); diff --git a/packages/ckeditor5-ui/src/toolbar/toolbarview.ts b/packages/ckeditor5-ui/src/toolbar/toolbarview.ts index bd566dc706f..827ad644dd6 100644 --- a/packages/ckeditor5-ui/src/toolbar/toolbarview.ts +++ b/packages/ckeditor5-ui/src/toolbar/toolbarview.ts @@ -113,6 +113,14 @@ export default class ToolbarView extends View implements DropdownPanelFocusable declare public locale: Locale; + /** + * The property reflected by the `role` DOM attribute to be used by assistive technologies. + * + * @observable + * @default 'toolbar' + */ + declare public role: string | undefined; + /** * Label used by assistive technologies to describe this toolbar element. * @@ -188,6 +196,7 @@ export default class ToolbarView extends View implements DropdownPanelFocusable this.set( 'ariaLabel', t( 'Editor toolbar' ) ); this.set( 'maxWidth', 'auto' ); + this.set( 'role', 'toolbar' ); this.items = this.createCollection(); this.focusTracker = new FocusTracker(); @@ -231,7 +240,7 @@ export default class ToolbarView extends View implements DropdownPanelFocusable tag: 'div', attributes: { class: classes, - role: 'toolbar', + role: bind.to( 'role' ), 'aria-label': bind.to( 'ariaLabel' ), style: { maxWidth: bind.to( 'maxWidth' ) diff --git a/packages/ckeditor5-ui/tests/toolbar/toolbarview.js b/packages/ckeditor5-ui/tests/toolbar/toolbarview.js index f6733d13cec..e8945025603 100644 --- a/packages/ckeditor5-ui/tests/toolbar/toolbarview.js +++ b/packages/ckeditor5-ui/tests/toolbar/toolbarview.js @@ -193,6 +193,21 @@ describe( 'ToolbarView', () => { view.destroy(); } ); + + it( 'should have proper ARIA properties', () => { + expect( view.element.getAttribute( 'role' ) ).to.equal( 'toolbar' ); + } ); + + it( 'should allow customizing toolbar role', () => { + const view = new ToolbarView( locale ); + view.role = 'radiogroup'; + + view.render(); + + expect( view.element.getAttribute( 'role' ) ).to.equal( 'radiogroup' ); + + view.destroy(); + } ); } ); describe( 'event listeners', () => {