Accessibility for Font size/family and Heading dropdowns in toolbar

packages/ckeditor5-font/src/fontfamily/fontfamilyui.ts

@@ -40,15 +40,19 @@ export default class FontFamilyUI extends Plugin {
 		const options = this._getLocalizedOptions();
 
 		const command: FontFamilyCommand = editor.commands.get( FONT_FAMILY )!;
+		const accessibleLabel = t( 'Font Family' );
 
 		// Register UI component.
 		editor.ui.componentFactory.add( FONT_FAMILY, locale => {
 			const dropdownView = createDropdown( locale );
 
-			addListToDropdown( dropdownView, () => _prepareListOptions( options, command ) );
+			addListToDropdown( dropdownView, () => _prepareListOptions( options, command ), {
+				role: 'menu',
+				ariaLabel: accessibleLabel
+			} );
 
 			dropdownView.buttonView.set( {
-				label: t( 'Font Family' ),
+				label: accessibleLabel,
 				icon: fontFamilyIcon,
 				tooltip: true
 			} );
@@ -110,6 +114,7 @@ function _prepareListOptions( options: Array<FontFamilyOption>, command: FontFam
 				commandName: FONT_FAMILY,
 				commandParam: option.model,
 				label: option.title,
+				role: 'menuitemradio',
 				withText: true
 			} )
 		};

packages/ckeditor5-font/src/fontsize/fontsizeui.ts

@@ -46,16 +46,20 @@ export default class FontSizeUI extends Plugin {
 		const options = this._getLocalizedOptions();
 
 		const command: FontSizeCommand = editor.commands.get( FONT_SIZE )!;
+		const accessibleLabel = t( 'Font Size' );
 
 		// Register UI component.
 		editor.ui.componentFactory.add( FONT_SIZE, locale => {
 			const dropdownView = createDropdown( locale );
 
-			addListToDropdown( dropdownView, () => _prepareListOptions( options, command ) );
+			addListToDropdown( dropdownView, () => _prepareListOptions( options, command ), {
+				role: 'menu',
+				ariaLabel: accessibleLabel
+			} );
 
 			// Create dropdown model.
 			dropdownView.buttonView.set( {
-				label: t( 'Font Size' ),
+				label: accessibleLabel,
 				icon: fontSizeIcon,
 				tooltip: true
 			} );
@@ -129,6 +133,7 @@ function _prepareListOptions( options: Array<FontSizeOption>, command: FontSizeC
 				commandParam: option.model,
 				label: option.title,
 				class: 'ck-fontsize-option',
+				role: 'menuitemradio',
 				withText: true
 			} )
 		};

packages/ckeditor5-font/tests/fontfamily/fontfamilyui.js

@@ -254,5 +254,17 @@ describe( 'FontFamilyUI', () => {
 					} );
 			}
 		} );
+
+		describe( 'listview', () => {
+			it( 'should have properties set', () => {
+				// Trigger list view creation (lazy init).
+				dropdown.isOpen = true;
+
+				const listView = dropdown.listView;
+
+				expect( listView.element.role ).to.equal( 'menu' );
+				expect( listView.element.ariaLabel ).to.equal( 'Font Family' );
+			} );
+		} );
 	} );
 } );

packages/ckeditor5-font/tests/fontsize/fontsizeui.js

@@ -293,5 +293,17 @@ describe( 'FontSizeUI', () => {
 					} );
 			}
 		} );
+
+		describe( 'listview', () => {
+			it( 'should have properties set', () => {
+				// Trigger list view creation (lazy init).
+				dropdown.isOpen = true;
+
+				const listView = dropdown.listView;
+
+				expect( listView.element.role ).to.equal( 'menu' );
+				expect( listView.element.ariaLabel ).to.equal( 'Font Size' );
+			} );
+		} );
 	} );
 } );

packages/ckeditor5-heading/src/headingui.ts

@@ -42,7 +42,7 @@ export default class HeadingUI extends Plugin {
 		const t = editor.t;
 		const options = getLocalizedOptions( editor );
 		const defaultTitle = t( 'Choose heading' );
-		const dropdownTooltip = t( 'Heading' );
+		const accessibleLabel = t( 'Heading' );
 
 		// Register UI component.
 		editor.ui.componentFactory.add( 'heading', locale => {
@@ -60,6 +60,7 @@ export default class HeadingUI extends Plugin {
 					model: new Model( {
 						label: option.title,
 						class: option.class,
+						role: 'menuitemradio',
 						withText: true
 					} )
 				};
@@ -83,12 +84,17 @@ export default class HeadingUI extends Plugin {
 			}
 
 			const dropdownView = createDropdown( locale );
-			addListToDropdown( dropdownView, itemDefinitions );
+			addListToDropdown( dropdownView, itemDefinitions, {
+				ariaLabel: accessibleLabel,
+				role: 'menu'
+			} );
 
 			dropdownView.buttonView.set( {
+				ariaLabel: accessibleLabel,
+				ariaLabelledBy: undefined,
 				isOn: false,
 				withText: true,
-				tooltip: dropdownTooltip
+				tooltip: accessibleLabel
 			} );
 
 			dropdownView.extendTemplate( {

packages/ckeditor5-heading/tests/headingui.js

@@ -294,5 +294,17 @@ describe( 'HeadingUI', () => {
 				] );
 			} );
 		} );
+
+		describe( 'listview', () => {
+			it( 'should have properties set', () => {
+				// Trigger lazy init.
+				dropdown.isOpen = true;
+
+				const listView = dropdown.listView;
+
+				expect( listView.element.role ).to.equal( 'menu' );
+				expect( listView.element.ariaLabel ).to.equal( 'Heading' );
+			} );
+		} );
 	} );
 } );

packages/ckeditor5-ui/src/button/button.ts

@@ -152,6 +152,20 @@ export default interface Button {
 	 */
 	class: string | undefined;
 
+	/**
+	 * (Optional) The ARIA property reflected by the `aria-label` DOM attribute used by assistive technologies.
+	 *
+	 * @observable
+	 */
+	ariaLabel?: string | undefined;
+
+	/**
+	 * (Optional) The ARIA property reflected by the `aria-ariaLabelledBy` DOM attribute used by assistive technologies.
+	 *
+	 * @observable
+	 */
+	ariaLabelledBy?: string | undefined;
+
 	/**
 	 * (Optional) The value of the `style` attribute of the label.
 	 *

packages/ckeditor5-ui/src/button/buttonview.ts

@@ -140,6 +140,26 @@ export default class ButtonView extends View<HTMLButtonElement> implements Butto
 	 */
 	declare public withKeystroke: boolean;
 
+	/**
+	 * @inheritDoc
+	 */
+	declare public role: string | undefined;
+
+	/**
+	 * @inheritDoc
+	 */
+	declare public ariaChecked: boolean | undefined;
+
+	/**
+	 * @inheritDoc
+	 */
+	declare public ariaLabel?: string | undefined;
+
+	/**
+	 * @inheritDoc
+	 */
+	declare public ariaLabelledBy: string | undefined;
+
 	/**
 	 * Tooltip of the button bound to the template.
 	 *
@@ -160,6 +180,9 @@ export default class ButtonView extends View<HTMLButtonElement> implements Butto
 		const ariaLabelUid = uid();
 
 		// Implement the Button interface.
+		this.set( 'ariaChecked', undefined );
+		this.set( 'ariaLabel', undefined );
+		this.set( 'ariaLabelledBy', `ck-editor__aria-label_${ ariaLabelUid }` );
 		this.set( 'class', undefined );
 		this.set( 'labelStyle', undefined );
 		this.set( 'icon', undefined );
@@ -169,6 +192,7 @@ export default class ButtonView extends View<HTMLButtonElement> implements Butto
 		this.set( 'isToggleable', false );
 		this.set( 'keystroke', undefined );
 		this.set( 'label', undefined );
+		this.set( 'role', undefined );
 		this.set( 'tabindex', -1 );
 		this.set( 'tooltip', false );
 		this.set( 'tooltipPosition', 's' );
@@ -177,7 +201,7 @@ export default class ButtonView extends View<HTMLButtonElement> implements Butto
 		this.set( 'withKeystroke', false );
 
 		this.children = this.createCollection();
-		this.labelView = this._createLabelView( ariaLabelUid );
+		this.labelView = this._createLabelView();
 
 		this.iconView = new IconView();
 		this.iconView.extendTemplate( {
@@ -209,10 +233,13 @@ export default class ButtonView extends View<HTMLButtonElement> implements Butto
 					bind.if( 'withText', 'ck-button_with-text' ),
 					bind.if( 'withKeystroke', 'ck-button_with-keystroke' )
 				],
+				role: bind.to( 'role' ),
 				type: bind.to( 'type', value => value ? value : 'button' ),
 				tabindex: bind.to( 'tabindex' ),
-				'aria-labelledby': `ck-editor__aria-label_${ ariaLabelUid }`,
+				'aria-label': bind.to( 'ariaLabel' ),
+				'aria-labelledby': bind.to( 'ariaLabelledBy' ),
 				'aria-disabled': bind.if( 'isEnabled', true, value => !value ),
+				'aria-checked': bind.to( 'isOn' ),
 				'aria-pressed': bind.to( 'isOn', value => this.isToggleable ? String( !!value ) : false ),
 				'data-cke-tooltip-text': bind.to( '_tooltipString' ),
 				'data-cke-tooltip-position': bind.to( 'tooltipPosition' )
@@ -274,10 +301,8 @@ export default class ButtonView extends View<HTMLButtonElement> implements Butto
 
 	/**
 	 * Creates a label view instance and binds it with button attributes.
-	 *
-	 * @param ariaLabelUid The aria label UID.
 	 */
-	private _createLabelView( ariaLabelUid: string ) {
+	private _createLabelView() {
 		const labelView = new View();
 		const bind = this.bindTemplate;
 
@@ -290,7 +315,7 @@ export default class ButtonView extends View<HTMLButtonElement> implements Butto
 					'ck-button__label'
 				],
 				style: bind.to( 'labelStyle' ),
-				id: `ck-editor__aria-label_${ ariaLabelUid }`
+				id: this.ariaLabelledBy
 			},
 
 			children: [

packages/ckeditor5-ui/src/dropdown/button/splitbuttonview.ts

@@ -147,6 +147,16 @@ export default class SplitButtonView extends View<HTMLDivElement> implements Dro
 	 */
 	declare public labelStyle: string | undefined;
 
+	/**
+	 * @inheritDoc
+	 */
+	declare public ariaLabel?: string | undefined;
+
+	/**
+	 * @inheritDoc
+	 */
+	declare public ariaLabelledBy: string | undefined;
+
 	/**
 	 * @inheritDoc
 	 */

packages/ckeditor5-ui/src/dropdown/utils.ts

@@ -310,6 +310,7 @@ export function addListToDropdown(
 	itemsOrCallback: Collection<ListDropdownItemDefinition> | ( () => Collection<ListDropdownItemDefinition> ),
 	options: {
 		ariaLabel?: string;
+		role?: string;
 	} = {}
 ): void {
 	if ( dropdownView.isOpen ) {
@@ -340,6 +341,7 @@ function addListToOpenDropdown(
 	itemsOrCallback: Collection<ListDropdownItemDefinition> | ( () => Collection<ListDropdownItemDefinition> ),
 	options: {
 		ariaLabel?: string;
+		role?: string;
 	}
 ): void {
 	const locale = dropdownView.locale;
@@ -348,6 +350,7 @@ function addListToOpenDropdown(
 	const items = typeof itemsOrCallback == 'function' ? itemsOrCallback() : itemsOrCallback;
 
 	listView.ariaLabel = options.ariaLabel;
+	listView.role = options.role;
 
 	listView.items.bindTo( items ).using( def => {
 		if ( def.type === 'separator' ) {

packages/ckeditor5-ui/src/list/listitemview.ts

@@ -52,7 +52,8 @@ export default class ListItemView extends View {
 					'ck',
 					'ck-list__item',
 					bind.if( 'isVisible', 'ck-hidden', value => !value )
-				]
+				],
+				role: 'presentation'
 			},
 
 			children: this.children

packages/ckeditor5-ui/src/list/listview.ts

@@ -50,6 +50,13 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 	 */
 	declare public ariaLabel: string | undefined;
 
+	/**
+	 * The property reflected by the `role` DOM attribute to be used by assistive technologies.
+	 *
+	 * @observable
+	 */
+	declare public role: string | undefined;
+
 	/**
 	 * Helps cycling over focusable {@link #items} in the list.
 	 */
@@ -81,6 +88,7 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 		} );
 
 		this.set( 'ariaLabel', undefined );
+		this.set( 'role', undefined );
 
 		this.setTemplate( {
 			tag: 'ul',
@@ -91,6 +99,7 @@ export default class ListView extends View<HTMLUListElement> implements Dropdown
 					'ck-reset',
 					'ck-list'
 				],
+				role: bind.to( 'role' ),
 				'aria-label': bind.to( 'ariaLabel' )
 			},
 

packages/ckeditor5-ui/tests/button/buttonview.js

@@ -218,6 +218,18 @@ describe( 'ButtonView', () => {
 			} );
 		} );
 
+		describe( 'role', () => {
+			it( 'is not initially set ', () => {
+				expect( view.element.attributes.role ).to.equal( undefined );
+			} );
+
+			it( 'reacts on view#role', () => {
+				view.role = 'foo';
+
+				expect( view.element.attributes.role.value ).to.equal( 'foo' );
+			} );
+		} );
+
 		describe( 'text', () => {
 			it( 'is not initially set ', () => {
 				expect( view.element.textContent ).to.equal( '' );
@@ -279,6 +291,22 @@ describe( 'ButtonView', () => {
 				view.isOn = false;
 				expect( view.element.hasAttribute( 'aria-pressed' ) ).to.be.false;
 			} );
+
+			it( '-checked reacts on #isOn', () => {
+				view.isOn = true;
+				expect( view.element.attributes[ 'aria-checked' ].value ).to.equal( 'true' );
+
+				view.isOn = false;
+				expect( view.element.hasAttribute( 'aria-checked' ) ).to.be.false;
+			} );
+
+			it( '-label reacts on #ariaLabel', () => {
+				view.ariaLabel = undefined;
+				expect( view.element.hasAttribute( 'aria-label' ) ).to.be.false;
+
+				view.ariaLabel = 'Foo';
+				expect( view.element.attributes[ 'aria-label' ].value ).to.equal( 'Foo' );
+			} );
 		} );
 
 		describe( 'mousedown event', () => {