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

…17728)

Feature (table): Improve aria attributes in table and cell align toolbars. Closes #17722

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' )
 		} );
 

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' )
 		} );

packages/ckeditor5-table/src/utils/ui/table-properties.ts

@@ -175,6 +175,8 @@ export function fillToolbar<TView extends View, TPropertyName extends keyof TVie
 		const button = new ButtonView( view.locale );
 
 		button.set( {
+			role: 'radio',
+			isToggleable: true,
 			label: labels[ name ],
 			icon: icons[ name ],
 			tooltip: labels[ name ]

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 );
+						} );
 					} );
 				} );
 

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 );
+						} );
 					} );
 				} );
 

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' )

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', () => {