Skip to content

Commit

Permalink
attempt to solve both ARIA toolbar access and tab stop to document tools
Browse files Browse the repository at this point in the history
  • Loading branch information
draganescu committed Apr 4, 2023
1 parent 0988ac3 commit 15a38d0
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 49 deletions.
11 changes: 7 additions & 4 deletions packages/edit-post/src/components/header/header-toolbar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand All @@ -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,
Expand Down Expand Up @@ -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 && (
Expand Down Expand Up @@ -104,4 +107,4 @@ function HeaderToolbar( { BlockToolbarToggle, hasSelectedBlocks } ) {
);
}

export default HeaderToolbar;
export default forwardRef( HeaderToolbar );
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
85 changes: 51 additions & 34 deletions packages/edit-post/src/components/header/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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' );
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -229,6 +234,18 @@ function Header( { setEntitiesSavedStatesCallback } ) {
<MoreMenu showIconLabels={ showIconLabels } />
) }
</motion.div>
{ hasSelectedBlocks && headerToolbar === 'block' && (
<NavigableToolbar
className="edit-post-header-block-toolbar"
aria-label={ blockToolbarAriaLabel }
>
<InserterButton ref={ blockToolsInserterButton } />
<ShowDocumentToolbarButton
onClick={ () => setHeaderToolbar( 'document' ) }
/>
<BlockToolbar hideDragHandle={ hasFixedToolbar } />
</NavigableToolbar>
) }
</div>
);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 ) => {
Expand Down Expand Up @@ -83,3 +79,5 @@ export default function InserterButton() {
/>
);
}

export default forwardRef( InserterButton );
6 changes: 3 additions & 3 deletions packages/edit-post/src/components/header/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
// }

0 comments on commit 15a38d0

Please sign in to comment.