Merge pull request #16052 from ckeditor/ck/app-menu-bar-a11y-help

Internal (ui): Introduced the a11y help dialog integration with the menu bar.

packages/ckeditor5-block-quote/src/blockquoteui.ts

@@ -66,7 +66,6 @@ export default class BlockQuoteUI extends Plugin {
 		view.set( {
 			label: t( 'Block quote' ),
 			icon: icons.quote,
-			tooltip: true,
 			isToggleable: true
 		} );
 

packages/ckeditor5-ui/lang/contexts.json

@@ -34,6 +34,7 @@
 	"Help Contents. To close this dialog press ESC.": "Accessibility help dialog assistive technologies label telling users how to exit the dialog.",
 	"Below, you can find a list of keyboard shortcuts that can be used in the editor.": "Accessibility help dialog text explaining what can be found in that dialog.",
 	"(may require <kbd>Fn</kbd>)": "Accessibility help dialog text displayed next to keystrokes that may require the Fn key on Mac.",
+	"Accessibility": "The label for the button that opens the Accessibility help dialog from the application menu bar.",
 	"Accessibility help": "Accessibility help dialog title.",
 	"Press %0 for help.": "Assistive technologies label added to each editor editing area informing users about the possibility of opening the accessibility help dialog.",
 	"Move focus in and out of an active dialog window": "Keystroke description for assistive technologies: keystroke for moving focus out of an active dialog window."

packages/ckeditor5-ui/src/editorui/accessibilityhelp/accessibilityhelp.ts

@@ -8,7 +8,7 @@
  */
 
 import { Plugin } from '@ckeditor/ckeditor5-core';
-import { ButtonView, Dialog, type EditorUIReadyEvent } from '../../index.js';
+import { ButtonView, MenuBarMenuListItemButtonView, Dialog, type EditorUIReadyEvent } from '../../index.js';
 import AccessibilityHelpContentView from './accessibilityhelpcontentview.js';
 import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils';
 import type { AddRootEvent } from '@ckeditor/ckeditor5-editor-multi-root';
@@ -53,20 +53,24 @@ export default class AccessibilityHelp extends Plugin {
 		const editor = this.editor;
 		const t = editor.locale.t;
 
-		editor.ui.componentFactory.add( 'accessibilityHelp', locale => {
-			const buttonView = new ButtonView( locale );
+		editor.ui.componentFactory.add( 'accessibilityHelp', () => {
+			const button = this._createButton( ButtonView );
 
-			buttonView.set( {
-				label: t( 'Accessibility help' ),
+			button.set( {
 				tooltip: true,
 				withText: false,
-				keystroke: 'Alt+0',
-				icon: accessibilityIcon
+				label: t( 'Accessibility help' )
 			} );
 
-			buttonView.on( 'execute', () => this._showDialog() );
+			return button;
+		} );
+
+		editor.ui.componentFactory.add( 'menuBar:accessibilityHelp', () => {
+			const button = this._createButton( MenuBarMenuListItemButtonView );
+
+			button.label = t( 'Accessibility' );
 
-			return buttonView;
+			return button;
 		} );
 
 		editor.keystrokes.set( 'Alt+0', ( evt, cancel ) => {
@@ -77,11 +81,29 @@ export default class AccessibilityHelp extends Plugin {
 		this._setupRootLabels();
 	}
 
+	/**
+	 * Creates a button to show accessibility help dialog, for use either in toolbar or in menu bar.
+	 */
+	private _createButton<T extends typeof ButtonView | typeof MenuBarMenuListItemButtonView>( ButtonClass: T ): InstanceType<T> {
+		const editor = this.editor;
+		const locale = editor.locale;
+		const view = new ButtonClass( locale ) as InstanceType<T>;
+
+		view.set( {
+			keystroke: 'Alt+0',
+			icon: accessibilityIcon
+		} );
+
+		view.on( 'execute', () => this._showDialog() );
+
+		return view;
+	}
+
 	/**
 	 * Injects a help text into each editing root's `aria-label` attribute allowing assistive technology users
 	 * to discover the availability of the Accessibility help dialog.
 	 */
-	private _setupRootLabels() {
+	private _setupRootLabels(): void {
 		const editor = this.editor;
 		const editingView = editor.editing.view;
 		const t = editor.t;
@@ -111,7 +133,7 @@ export default class AccessibilityHelp extends Plugin {
 	/**
 	 * Shows the accessibility help dialog. Also, creates {@link #contentView} on demand.
 	 */
-	private _showDialog() {
+	private _showDialog(): void {
 		const editor = this.editor;
 		const dialog = editor.plugins.get( 'Dialog' );
 		const t = editor.locale.t;

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

@@ -550,6 +550,18 @@ export const DefaultMenuBarItems: DeepReadonly<MenuBarConfigObject[ 'items' ]> =
 				]
 			}
 		]
+	},
+	{
+		menuId: 'help',
+		label: 'Help',
+		groups: [
+			{
+				groupId: 'help',
+				items: [
+					'menuBar:accessibilityHelp'
+				]
+			}
+		]
 	}
 ];
 
@@ -1014,6 +1026,7 @@ function localizeTopLevelCategories( config: RequiredMenuBarConfigObject, locale
 		'Format': t( 'Format' ),
 		'View': t( 'View' ),
 		'Insert': t( 'Insert' ),
+		'Help': t( 'Help' ),
 		'Tools': t( 'Tools' )
 	};