attempt to solve both ARIA toolbar access and tab stop to document tools

WordPress · Apr 4, 2023 · 161eb93 · 161eb93
1 parent 0988ac3
commit 161eb93
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 49 deletions.
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -8,7 +8,7 @@ import { NavigableToolbar, ToolSelector } from '@wordpress/block-editor';
 import { EditorHistoryRedo, EditorHistoryUndo } from '@wordpress/editor';
 import { Button, ToolbarItem } from '@wordpress/components';
 import { listView } from '@wordpress/icons';
-import { useCallback } from '@wordpress/element';
+import { useCallback, forwardRef } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 
 /**
@@ -17,7 +17,10 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { store as editPostStore } from '../../../store';
 import InserterButton from '../inserter-button';
 
-function HeaderToolbar( { BlockToolbarToggle, hasSelectedBlocks } ) {
+function HeaderToolbar(
+	{ BlockToolbarToggle, hasSelectedBlocks },
+	inserterButtonRef
+) {
 	const { setIsListViewOpened } = useDispatch( editPostStore );
 	const {
 		isTextModeEnabled,
@@ -72,7 +75,7 @@ function HeaderToolbar( { BlockToolbarToggle, hasSelectedBlocks } ) {
 			aria-label={ toolbarAriaLabel }
 		>
 			<div className="edit-post-header-document-toolbar__left">
-				<InserterButton />
+				<InserterButton ref={ inserterButtonRef } />
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<>
 						{ isLargeViewport && (
@@ -104,4 +107,4 @@ function HeaderToolbar( { BlockToolbarToggle, hasSelectedBlocks } ) {
 	);
 }
 
-export default HeaderToolbar;
+export default forwardRef( HeaderToolbar );
diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss
@@ -81,13 +81,15 @@
 }
 
 .edit-post-header-block-toolbar {
+	position: absolute;
+	left: $grid-unit-70 + $grid-unit-05;
 	display: inline-flex;
 	flex-grow: 1;
 	align-items: center;
 	border: none;
 	padding-left: 24px; //compensates for the edit-post-header-document-toolbar__left left padding
-	height: 32px;
-	overflow: hidden; //limits the height of the separators
+	// height: 32px;
+	// overflow: hidden; //limits the height of the separators
 
 	> .edit-post-header-toolbar__inserter-toggle {
 		display: inline-flex;

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
@@ -34,9 +34,13 @@ import { store as editPostStore } from '../../store';
 import TemplateTitle from './template-title';
 import InserterButton from './inserter-button';
 
-function MaybeHide( { children, isHidden } ) {
+function MaybeHide( { children, isHidden, onFocus } ) {
 	if ( isHidden ) {
-		return <div className="maybeHide">{ children }</div>;
+		return (
+			<div onFocus={ onFocus } className="maybeHide">
+				{ children }
+			</div>
+		);
 	}
 	return children;
 }
@@ -108,10 +112,26 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 
 	const [ headerToolbar, setHeaderToolbar ] = useState( 'document' );
 
+	const documentToolsInserterButton = useRef();
+	const blockToolsInserterButton = useRef();
+
 	const blockInformation = useBlockDisplayInformation(
 		selectedBlockClientId
 	);
 
+	useEffect( () => {
+		if (
+			headerToolbar === 'document' &&
+			documentToolsInserterButton.current
+		) {
+			documentToolsInserterButton.current.focus();
+		}
+
+		if ( headerToolbar === 'block' && blockToolsInserterButton.current ) {
+			blockToolsInserterButton.current.focus();
+		}
+	}, [ headerToolbar ] );
+
 	useEffect( () => {
 		if ( isNavigationMode ) {
 			setHeaderToolbar( 'document' );
@@ -155,38 +175,23 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 				{ hasFixedToolbar &&
 					! isNavigationMode &&
 					isDesktopViewport && (
-						<>
-							<MaybeHide isHidden={ headerToolbar === 'block' }>
-								<HeaderToolbar
-									hasSelectedBlocks={ hasSelectedBlocks }
-									BlockToolbarToggle={ () => (
-										<ShowBlockToolbarButton
-											onClick={ () =>
-												setHeaderToolbar( 'block' )
-											}
-											icon={ blockInformation.icon }
-										/>
-									) }
-								/>
-							</MaybeHide>
-							{ hasSelectedBlocks &&
-								headerToolbar === 'block' && (
-									<NavigableToolbar
-										className="edit-post-header-block-toolbar"
-										aria-label={ blockToolbarAriaLabel }
-									>
-										<InserterButton />
-										<ShowDocumentToolbarButton
-											onClick={ () =>
-												setHeaderToolbar( 'document' )
-											}
-										/>
-										<BlockToolbar
-											hideDragHandle={ hasFixedToolbar }
-										/>
-									</NavigableToolbar>
+						<MaybeHide
+							isHidden={ headerToolbar === 'block' }
+							onFocus={ () => setHeaderToolbar( 'document' ) }
+						>
+							<HeaderToolbar
+								ref={ documentToolsInserterButton }
+								hasSelectedBlocks={ hasSelectedBlocks }
+								BlockToolbarToggle={ () => (
+									<ShowBlockToolbarButton
+										onClick={ () =>
+											setHeaderToolbar( 'block' )
+										}
+										icon={ blockInformation.icon }
+									/>
 								) }
-						</>
+							/>
+						</MaybeHide>
 					) }
 				<TemplateTitle />
 			</motion.div>
@@ -229,6 +234,21 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 					<MoreMenu showIconLabels={ showIconLabels } />
 				) }
 			</motion.div>
+			<MaybeHide
+				isHidden={ headerToolbar === 'document' }
+				onFocus={ () => setHeaderToolbar( 'block' ) }
+			>
+				<NavigableToolbar
+					className="edit-post-header-block-toolbar"
+					aria-label={ blockToolbarAriaLabel }
+				>
+					<InserterButton ref={ blockToolsInserterButton } />
+					<ShowDocumentToolbarButton
+						onClick={ () => setHeaderToolbar( 'document' ) }
+					/>
+					<BlockToolbar hideDragHandle={ hasFixedToolbar } />
+				</NavigableToolbar>
+			</MaybeHide>
 		</div>
 	);
 }

diff --git a/packages/edit-post/src/components/header/inserter-button/index.js b/packages/edit-post/src/components/header/inserter-button/index.js
@@ -1,11 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useRef, useCallback } from '@wordpress/element';
+import { useCallback, forwardRef } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-/**
- * WordPress dependencies
- */
 import { Button, ToolbarItem } from '@wordpress/components';
 import { plus } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -20,8 +17,7 @@ const preventDefault = ( event ) => {
 	event.preventDefault();
 };
 
-export default function InserterButton() {
-	const inserterButton = useRef();
+function InserterButton( {}, inserterButton ) {
 	const { setIsInserterOpened } = useDispatch( editPostStore );
 	const { isInserterEnabled, isInserterOpened, showIconLabels } = useSelect(
 		( select ) => {
@@ -83,3 +79,5 @@ export default function InserterButton() {
 		/>
 	);
 }
+
+export default forwardRef( InserterButton );
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -255,6 +255,6 @@
 	display: none;
 }
 
-.maybeHide:focus-within + .edit-post-header-block-toolbar {
-	padding-left: 0;
-}
+// .maybeHide:focus-within + .edit-post-header-block-toolbar {
+// 	padding-left: 0;
+// }