From 8e3b5f12f54fbd58c2b3fa1d048093cb705f7b90 Mon Sep 17 00:00:00 2001 From: Mateusz Baginski Date: Thu, 9 Jan 2025 11:36:18 +0100 Subject: [PATCH 1/2] Add `aria-checked` attribute to align toolbars in table properties. --- .../ui/tablecellpropertiesview.ts | 6 ++++++ .../tableproperties/ui/tablepropertiesview.ts | 3 +++ .../src/utils/ui/table-properties.ts | 6 +++++- .../ui/tablecellpropertiesview.js | 21 +++++++++++++++++++ .../tableproperties/ui/tablepropertiesview.js | 10 +++++++++ .../ckeditor5-ui/src/toolbar/toolbarview.ts | 11 +++++++++- .../ckeditor5-ui/tests/toolbar/toolbarview.js | 15 +++++++++++++ 7 files changed, 70 insertions(+), 2 deletions(-) diff --git a/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.ts b/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.ts index 1d313b97c65..bc47bc7dd0a 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' ) } ); @@ -722,6 +723,8 @@ export default class TableCellPropertiesView extends View { view: this, icons: ALIGNMENT_ICONS, toolbar: horizontalAlignmentToolbar, + role: 'radio', + isToggleable: true, labels: this._horizontalAlignmentLabels, propertyName: 'horizontalAlignment', nameToValue: name => { @@ -745,6 +748,7 @@ export default class TableCellPropertiesView extends View { verticalAlignmentToolbar.set( { isCompact: true, + role: 'radiogroup', ariaLabel: t( 'Vertical text alignment toolbar' ) } ); @@ -752,6 +756,8 @@ export default class TableCellPropertiesView extends View { view: this, icons: ALIGNMENT_ICONS, toolbar: verticalAlignmentToolbar, + role: 'radio', + isToggleable: true, labels: this._verticalAlignmentLabels, propertyName: 'verticalAlignment', defaultValue: this.options.defaultTableCellProperties.verticalAlignment diff --git a/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts b/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts index 45fa9d613b5..40b3ab1d992 100644 --- a/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts +++ b/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts @@ -639,12 +639,15 @@ export default class TablePropertiesView extends View { const alignmentToolbar = new ToolbarView( locale! ); alignmentToolbar.set( { + role: 'radiogroup', isCompact: true, ariaLabel: t( 'Table alignment toolbar' ) } ); fillToolbar( { view: this, + role: 'radio', + isToggleable: true, icons: { left: icons.objectLeft, center: icons.objectCenter, diff --git a/packages/ckeditor5-table/src/utils/ui/table-properties.ts b/packages/ckeditor5-table/src/utils/ui/table-properties.ts index c3015b97ddd..8a27cd9c740 100644 --- a/packages/ckeditor5-table/src/utils/ui/table-properties.ts +++ b/packages/ckeditor5-table/src/utils/ui/table-properties.ts @@ -161,6 +161,8 @@ export function getBorderStyleDefinitions( */ export function fillToolbar( options: { + isToggleable?: boolean; + role?: string; view: TView; icons: Record; toolbar: ToolbarView; @@ -170,11 +172,13 @@ 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 cbd2eaaadcd..01f1857135e 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 5b125f97421..a9824d7893d 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 ee11620ff25..d5578a85aec 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', () => { From 51ee7d595ff089f826264e9b5db8bae2beb5f836 Mon Sep 17 00:00:00 2001 From: Mateusz Baginski Date: Thu, 9 Jan 2025 12:16:21 +0100 Subject: [PATCH 2/2] Drop toggleable parameters from `fillToolbar`. --- .../src/tablecellproperties/ui/tablecellpropertiesview.ts | 4 ---- .../src/tableproperties/ui/tablepropertiesview.ts | 2 -- packages/ckeditor5-table/src/utils/ui/table-properties.ts | 8 +++----- 3 files changed, 3 insertions(+), 11 deletions(-) diff --git a/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.ts b/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.ts index bc47bc7dd0a..5184168d924 100644 --- a/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.ts +++ b/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.ts @@ -723,8 +723,6 @@ export default class TableCellPropertiesView extends View { view: this, icons: ALIGNMENT_ICONS, toolbar: horizontalAlignmentToolbar, - role: 'radio', - isToggleable: true, labels: this._horizontalAlignmentLabels, propertyName: 'horizontalAlignment', nameToValue: name => { @@ -756,8 +754,6 @@ export default class TableCellPropertiesView extends View { view: this, icons: ALIGNMENT_ICONS, toolbar: verticalAlignmentToolbar, - role: 'radio', - isToggleable: true, labels: this._verticalAlignmentLabels, propertyName: 'verticalAlignment', defaultValue: this.options.defaultTableCellProperties.verticalAlignment diff --git a/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts b/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts index 40b3ab1d992..e3b254f75f8 100644 --- a/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts +++ b/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts @@ -646,8 +646,6 @@ export default class TablePropertiesView extends View { fillToolbar( { view: this, - role: 'radio', - isToggleable: true, icons: { left: icons.objectLeft, center: icons.objectCenter, diff --git a/packages/ckeditor5-table/src/utils/ui/table-properties.ts b/packages/ckeditor5-table/src/utils/ui/table-properties.ts index 8a27cd9c740..4575078c0d2 100644 --- a/packages/ckeditor5-table/src/utils/ui/table-properties.ts +++ b/packages/ckeditor5-table/src/utils/ui/table-properties.ts @@ -161,8 +161,6 @@ export function getBorderStyleDefinitions( */ export function fillToolbar( options: { - isToggleable?: boolean; - role?: string; view: TView; icons: Record; toolbar: ToolbarView; @@ -172,13 +170,13 @@ export function fillToolbar