Add useKeyboardShortcut prop to NavigableToolbar and useToolbarFocus

The 'core/block-editor/focus-toolbar' shortcut (alt + F10) selects the active navigable toolbar's fi
rst tabbable item, but when there are multiple navigable toolbars, it places focus on all of the act
ive navigable toolbar components. This results in an odd state of two tooltips being open. This comm
it scaffolds the ability to disable the keyboard shortcut from applying.

packages/block-editor/src/components/block-tools/selected-block-popover.js

@@ -85,6 +85,7 @@ function SelectedBlockPopover( {
 		},
 		[ clientId ]
 	);
+
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isToolbarForced = useRef( false );
 	const { stopTyping } = useDispatch( blockEditorStore );

packages/block-editor/src/components/navigable-toolbar/index.js

@@ -93,7 +93,8 @@ function useToolbarFocus(
 	focusOnMount,
 	isAccessibleToolbar,
 	defaultIndex,
-	onIndexChange
+	onIndexChange,
+	useKeyboardFocusShortcut
 ) {
 	// Make sure we don't use modified versions of this prop.
 	const [ initialFocusOnMount ] = useState( focusOnMount );
@@ -103,8 +104,14 @@ function useToolbarFocus(
 		focusFirstTabbableIn( ref.current );
 	}, [] );
 
+	const focusToolbarViaShortcut = () => {
+		if ( useKeyboardFocusShortcut ) {
+			focusToolbar();
+		}
+	};
+
 	// Focus on toolbar when pressing alt+F10 when the toolbar is visible.
-	useShortcut( 'core/block-editor/focus-toolbar', focusToolbar );
+	useShortcut( 'core/block-editor/focus-toolbar', focusToolbarViaShortcut );
 
 	useEffect( () => {
 		if ( initialFocusOnMount ) {
@@ -147,6 +154,7 @@ function useToolbarFocus(
 function NavigableToolbar( {
 	children,
 	focusOnMount,
+	useKeyboardFocusShortcut = true,
 	__experimentalInitialIndex: initialIndex,
 	__experimentalOnIndexChange: onIndexChange,
 	...props
@@ -159,7 +167,8 @@ function NavigableToolbar( {
 		focusOnMount,
 		isAccessibleToolbar,
 		initialIndex,
-		onIndexChange
+		onIndexChange,
+		useKeyboardFocusShortcut
 	);
 
 	if ( isAccessibleToolbar ) {

packages/edit-post/src/components/header/header-toolbar/index.js

@@ -46,7 +46,6 @@ function HeaderToolbar() {
 		const { getEditorMode, isFeatureActive, isListViewOpened } =
 			select( editPostStore );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
-
 		return {
 			// This setting (richEditingEnabled) should not live in the block editor's setting.
 			isInserterEnabled:
@@ -64,6 +63,9 @@ function HeaderToolbar() {
 			),
 		};
 	}, [] );
+
+	// TODO: Determine if there is a block toolbar active, as we need to change the shortcut behavior if it is
+	const isBlockToolbarActive = true;
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideViewport = useViewportMatch( 'wide' );
 
@@ -114,6 +116,7 @@ function HeaderToolbar() {
 		<NavigableToolbar
 			className="edit-post-header-toolbar"
 			aria-label={ toolbarAriaLabel }
+			useKeyboardFocusShortcut={ ! isBlockToolbarActive }
 		>
 			<div className="edit-post-header-toolbar__left">
 				<ToolbarItem