Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navigation: Removes the header from the navigation list view in the experiment #46070

Merged
merged 2 commits into from
Dec 5, 2022
Merged

Navigation: Removes the header from the navigation list view in the experiment #46070

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
68f4250
Navigation: Removes the header from the navigation list view
scruffian Nov 25, 2022
ae2e961
Add a visually hidden menu header for accessiblity
scruffian Dec 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 28 additions & 57 deletions packages/block-library/src/navigation/edit/menu-inspector-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,7 @@ import {
__experimentalOffCanvasEditor as OffCanvasEditor,
InspectorControls,
} from '@wordpress/block-editor';
import {
PanelBody,
__experimentalHStack as HStack,
__experimentalHeading as Heading,
} from '@wordpress/components';
import { PanelBody, VisuallyHidden } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
Expand All @@ -22,7 +18,6 @@ const MenuInspectorControls = ( {
createNavigationMenuIsSuccess,
createNavigationMenuIsError,
currentMenuId = null,
isNavigationMenuMissing,
innerBlocks,
isManageMenusButtonDisabled,
onCreateNew,
Expand All @@ -44,61 +39,37 @@ const MenuInspectorControls = ( {
isOffCanvasNavigationEditorEnabled ? null : __( 'Menu' )
}
>
{ isOffCanvasNavigationEditorEnabled ? (
<>
<HStack className="wp-block-navigation-off-canvas-editor__header">
<Heading
className="wp-block-navigation-off-canvas-editor__title"
level={ 2 }
>
{ __( 'Menu' ) }
</Heading>
Comment on lines -50 to -55
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure we should remove this from the DOM. Is it accessible?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try using Voiceover and see what is announced as you tab into the panel. If it's nothing then we need to retain a heading. If we want to lose that visually we can utilise <VisuallyHidden>.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added a VisuallyHidden header that says Menu, but when I tested with VoiceOver I didn't hear it. Not sure what's going on...

<NavigationMenuSelector
currentMenuId={ currentMenuId }
onSelectClassicMenu={ onSelectClassicMenu }
onSelectNavigationMenu={
onSelectNavigationMenu
}
onCreateNew={ onCreateNew }
createNavigationMenuIsSuccess={
createNavigationMenuIsSuccess
}
createNavigationMenuIsError={
createNavigationMenuIsError
}
actionLabel={ actionLabel }
/>
</HStack>
{ currentMenuId && isNavigationMenuMissing ? (
<p>{ __( 'Select or create a menu' ) }</p>
) : (
<OffCanvasEditor
blocks={ innerBlocks }
isExpanded={ true }
selectBlockInCanvas={ false }
/>
) }
</>
) : (
<>
<NavigationMenuSelector
currentMenuId={ currentMenuId }
onSelectClassicMenu={ onSelectClassicMenu }
onSelectNavigationMenu={ onSelectNavigationMenu }
onCreateNew={ onCreateNew }
createNavigationMenuIsSuccess={
createNavigationMenuIsSuccess
}
createNavigationMenuIsError={
createNavigationMenuIsError
}
actionLabel={ actionLabel }
<>
{ isOffCanvasNavigationEditorEnabled && (
<VisuallyHidden as="h2">
{ __( 'Menu' ) }
</VisuallyHidden>
) }
<NavigationMenuSelector
currentMenuId={ currentMenuId }
onSelectClassicMenu={ onSelectClassicMenu }
onSelectNavigationMenu={ onSelectNavigationMenu }
onCreateNew={ onCreateNew }
createNavigationMenuIsSuccess={
createNavigationMenuIsSuccess
}
createNavigationMenuIsError={
createNavigationMenuIsError
}
actionLabel={ actionLabel }
/>
{ isOffCanvasNavigationEditorEnabled ? (
<OffCanvasEditor
blocks={ innerBlocks }
isExpanded={ true }
selectBlockInCanvas={ false }
/>
) : (
<ManageMenusButton
disabled={ isManageMenusButtonDisabled }
/>
</>
) }
) }
</>
</PanelBody>
</InspectorControls>
);
Expand Down
27 changes: 6 additions & 21 deletions packages/block-library/src/navigation/edit/navigation-menu-selector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
VisuallyHidden,
} from '@wordpress/components';
import { useEntityProp } from '@wordpress/core-data';
import { Icon, chevronUp, chevronDown, moreVertical } from '@wordpress/icons';
import { Icon, chevronUp, chevronDown } from '@wordpress/icons';
import { __, sprintf } from '@wordpress/i18n';
import { decodeEntities } from '@wordpress/html-entities';
import { useEffect, useMemo, useState } from '@wordpress/element';
Expand All @@ -31,9 +31,6 @@ function NavigationMenuSelector( {
createNavigationMenuIsError,
toggleProps = {},
} ) {
const isOffCanvasNavigationEditorEnabled =
window?.__experimentalEnableOffCanvasNavigationEditor === true;

/* translators: %s: The name of a menu. */
const createActionLabel = __( "Create from '%s'" );

Expand Down Expand Up @@ -143,11 +140,7 @@ function NavigationMenuSelector( {
},
};

if (
! hasNavigationMenus &&
! hasClassicMenus &&
! isOffCanvasNavigationEditorEnabled
) {
if ( ! hasNavigationMenus && ! hasClassicMenus ) {
return (
<Button
className="wp-block-navigation__navigation-selector-button--createnew"
Expand All @@ -168,23 +161,15 @@ function NavigationMenuSelector( {

return (
<DropdownMenu
className={
isOffCanvasNavigationEditorEnabled
? ''
: 'wp-block-navigation__navigation-selector'
}
className="wp-block-navigation__navigation-selector"
label={ selectorLabel }
text={
<span className="wp-block-navigation__navigation-selector-button__label">
{ isOffCanvasNavigationEditorEnabled ? '' : selectorLabel }
{ selectorLabel }
</span>
}
icon={ isOffCanvasNavigationEditorEnabled ? moreVertical : null }
toggleProps={
isOffCanvasNavigationEditorEnabled
? { isSmall: true }
: toggleProps
}
icon={ null }
toggleProps={ toggleProps }
>
{ ( { onClose } ) => (
<>
Expand Down