diff --git a/packages/ckeditor5-heading/src/headingui.ts b/packages/ckeditor5-heading/src/headingui.ts index a2aef2d3d6e..e34e77a883e 100644 --- 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( 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 index 9f5a22a41f2..5df52f3900c 100644 --- 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 index 8e8073daa06..5f2314576c5 100644 --- 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 index 024971051c3..d7e0e6daba0 100644 --- 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;