Add aria-checked attribute to align toolbars in table properties.

ckeditor · Jan 9, 2025 · 8e3b5f1 · 8e3b5f1
1 parent 8c9137c
commit 8e3b5f1
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 2 deletions.
diff --git a/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.ts b/packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.ts
@@ -715,13 +715,16 @@ export default class TableCellPropertiesView extends View {
 
 		horizontalAlignmentToolbar.set( {
 			isCompact: true,
+			role: 'radiogroup',
 			ariaLabel: t( 'Horizontal text alignment toolbar' )
 		} );
 
 		fillToolbar( {
 			view: this,
 			icons: ALIGNMENT_ICONS,
 			toolbar: horizontalAlignmentToolbar,
+			role: 'radio',
+			isToggleable: true,
 			labels: this._horizontalAlignmentLabels,
 			propertyName: 'horizontalAlignment',
 			nameToValue: name => {
@@ -745,13 +748,16 @@ export default class TableCellPropertiesView extends View {
 
 		verticalAlignmentToolbar.set( {
 			isCompact: true,
+			role: 'radiogroup',
 			ariaLabel: t( 'Vertical text alignment toolbar' )
 		} );
 
 		fillToolbar( {
 			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
@@ -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
@@ -161,6 +161,8 @@ export function getBorderStyleDefinitions(
  */
 export function fillToolbar<TView extends View, TPropertyName extends keyof TView>(
 	options: {
+		isToggleable?: boolean;
+		role?: string;
 		view: TView;
 		icons: Record<string, string>;
 		toolbar: ToolbarView;
@@ -170,11 +172,13 @@ export function fillToolbar<TView extends View, TPropertyName extends keyof TVie
 		defaultValue?: string;
 	}
 ): void {
-	const { view, icons, toolbar, labels, propertyName, nameToValue, defaultValue } = options;
+	const { role, isToggleable, view, icons, toolbar, labels, propertyName, nameToValue, defaultValue } = options;
 	for ( const name in labels ) {
 		const button = new ButtonView( view.locale );
 
 		button.set( {
+			isToggleable,
+			role,
 			label: labels[ name ],
 			icon: icons[ name ],
 			tooltip: labels[ name ]

diff --git a/packages/ckeditor5-table/tests/tablecellproperties/ui/tablecellpropertiesview.js b/packages/ckeditor5-table/tests/tablecellproperties/ui/tablecellpropertiesview.js
@@ -560,6 +560,16 @@ 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.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
@@ -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
@@ -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
@@ -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', () => {