Merge pull request #16024 from ckeditor/ck/6029

Fix (heading,language): An accessible button label should describe the state and the name of the feature for optimal UX.
ckeditor · Mar 20, 2024 · 571bcf5 · 571bcf5
2 parents 27bcbda + ecb43e4
commit 571bcf5
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 3 deletions.
diff --git a/packages/ckeditor5-heading/src/headingui.ts b/packages/ckeditor5-heading/src/headingui.ts
@@ -109,8 +109,8 @@ export default class HeadingUI extends Plugin {
 				return areEnabled.some( isEnabled => isEnabled );
 			} );
 
-			dropdownView.buttonView.bind( 'label' ).to( headingCommand, 'value', paragraphCommand, 'value', ( value, para ) => {
-				const whichModel = value || para && 'paragraph';
+			dropdownView.buttonView.bind( 'label' ).to( headingCommand, 'value', paragraphCommand, 'value', ( heading, paragraph ) => {
+				const whichModel = paragraph ? 'paragraph' : heading;
 
 				if ( typeof whichModel === 'boolean' ) {
 					return defaultTitle;
@@ -124,6 +124,21 @@ export default class HeadingUI extends Plugin {
 				return titles[ whichModel ];
 			} );
 
+			dropdownView.buttonView.bind( 'ariaLabel' ).to( headingCommand, 'value', paragraphCommand, 'value', ( heading, paragraph ) => {
+				const whichModel = paragraph ? 'paragraph' : heading;
+
+				if ( typeof whichModel === 'boolean' ) {
+					return accessibleLabel;
+				}
+
+				// If none of the commands is active, display default title.
+				if ( !titles[ whichModel ] ) {
+					return accessibleLabel;
+				}
+
+				return `${ titles[ whichModel ] }, ${ accessibleLabel }`;
+			} );
+
 			// Execute command when an item from the dropdown is selected.
 			this.listenTo<ButtonExecuteEvent>( dropdownView, 'execute', evt => {
 				const { commandName, commandValue } = evt.source as any;

diff --git a/packages/ckeditor5-heading/tests/headingui.js b/packages/ckeditor5-heading/tests/headingui.js
@@ -74,7 +74,7 @@ describe( 'HeadingUI', () => {
 			expect( dropdown.buttonView.isOn ).to.be.false;
 			expect( dropdown.buttonView.label ).to.equal( 'Paragraph' );
 			expect( dropdown.buttonView.tooltip ).to.equal( 'Heading' );
-			expect( dropdown.buttonView.ariaLabel ).to.equal( 'Heading' );
+			expect( dropdown.buttonView.ariaLabel ).to.equal( 'Paragraph, Heading' );
 			expect( dropdown.buttonView.ariaLabelledBy ).to.be.undefined;
 		} );
 
@@ -156,6 +156,34 @@ describe( 'HeadingUI', () => {
 				paragraphCommand.value = true;
 				expect( dropdown.buttonView.label ).to.equal( 'Paragraph' );
 			} );
+
+			it( 'label when heading and paragraph commands active', () => {
+				command.value = 'heading2';
+				paragraphCommand.value = true;
+
+				expect( dropdown.buttonView.label ).to.equal( 'Paragraph' );
+			} );
+
+			it( 'ariaLabel', () => {
+				command.value = false;
+				paragraphCommand.value = false;
+
+				expect( dropdown.buttonView.ariaLabel ).to.equal( 'Heading' );
+
+				command.value = 'heading2';
+				expect( dropdown.buttonView.ariaLabel ).to.equal( 'Heading 2, Heading' );
+				command.value = false;
+
+				paragraphCommand.value = true;
+				expect( dropdown.buttonView.ariaLabel ).to.equal( 'Paragraph, Heading' );
+			} );
+
+			it( 'ariaLabel when heading and paragraph commands active', () => {
+				command.value = 'heading2';
+				paragraphCommand.value = true;
+
+				expect( dropdown.buttonView.ariaLabel ).to.equal( 'Paragraph, Heading' );
+			} );
 		} );
 
 		describe( 'localization', () => {

diff --git a/packages/ckeditor5-language/src/textpartlanguageui.ts b/packages/ckeditor5-language/src/textpartlanguageui.ts
@@ -106,6 +106,16 @@ export default class TextPartLanguageUI extends Plugin {
 				return ( value && titles[ value ] ) || defaultTitle;
 			} );
 
+			dropdownView.buttonView.bind( 'ariaLabel' ).to( languageCommand, 'value', value => {
+				const selectedLanguageTitle = value && titles[ value ];
+
+				if ( !selectedLanguageTitle ) {
+					return accessibleLabel;
+				}
+
+				return `${ selectedLanguageTitle }, ${ accessibleLabel }`;
+			} );
+
 			// Execute command when an item from the dropdown is selected.
 			this.listenTo( dropdownView, 'execute', evt => {
 				languageCommand.execute( {

diff --git a/packages/ckeditor5-language/tests/textpartlanguageui.js b/packages/ckeditor5-language/tests/textpartlanguageui.js
@@ -151,6 +151,18 @@ describe( 'TextPartLanguageUI', () => {
 				expect( dropdown.buttonView.label ).to.equal( 'Arabic' );
 			} );
 
+			it( 'ariaLabel', () => {
+				command.value = false;
+
+				expect( dropdown.buttonView.ariaLabel ).to.equal( 'Language' );
+
+				command.value = 'fr:ltr';
+				expect( dropdown.buttonView.ariaLabel ).to.equal( 'French, Language' );
+
+				command.value = 'ar:rtl';
+				expect( dropdown.buttonView.ariaLabel ).to.equal( 'Arabic, Language' );
+			} );
+
 			it( 'reflects the #value of the command', () => {
 				// Trigger lazy init.
 				dropdown.isOpen = true;