Merge branch 'master' into ck/16053

docs/installation/getting-started/predefined-builds.md

@@ -885,6 +885,7 @@ The table below presents the list of all plugins included in various builds. <!-
 				<li><a href="https://ckeditor.com/docs/ckeditor5/latest/api/select-all.html">SelectAll</a></li>
 				<li><a href="https://ckeditor.com/docs/ckeditor5/latest/api/typing.html">Typing</a></li>
 				<li><a href="https://ckeditor.com/docs/ckeditor5/latest/api/undo.html">Undo</a></li>
+				<li><a href="https://ckeditor.com/docs/ckeditor5/latest/features/keyboard-support.html#displaying-keyboard-shortcuts-in-the-editor">Accessibility help dialog</a></li>
 				</ul>
 				</td>
 				<td style="text-align:center; width:70px">✅</td>

docs/installation/integrations/angular.md

@@ -25,6 +25,8 @@ Currently, the CKEditor 5 component for Angular supports integrating CKEdit
 
 <info-box hint>
 	Starting from version 6.0.0 of this package, you can use native type definitions provided by CKEditor&nbsp;5. Check the details about {@link installation/working-with-typescript TypeScript support}.
+
+	For best results, we suggest using TypeScript version 5.0 or newer.
 </info-box>
 
 ## Supported Angular versions

docs/installation/integrations/react.md

@@ -21,6 +21,8 @@ The easiest way to use CKEditor 5 in your React application is by choosing
 
 <info-box hint>
 	Starting from version 6.0.0 of this package, you can use native type definitions provided by CKEditor&nbsp;5. Check the details about {@link installation/working-with-typescript TypeScript support}.
+
+	For best results, we suggest using TypeScript version 5.0 or newer.
 </info-box>
 
 ## Quick start

docs/installation/working-with-typescript.md

@@ -16,6 +16,8 @@ CKEditor 5 is built using TypeScript and has native type definitions. All t
 
 <info-box hint>
 	Using TypeScript is just an option. If you do not need its features, you can continue using CKEditor&nbsp;5 in JavaScript.
+
+	For best results, we suggest using TypeScript version 5.0 or newer.
 </info-box>
 
 <info-box warning>

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;

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

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( {

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;