Skip to content

Fix the navigate regions focus style #45369

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

Merged
aristath merged 7 commits into from
Nov 15, 2022
Merged

Fix the navigate regions focus style #45369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4d5da8f
Fix navigateRegions focus style first pass.
afercia Oct 19, 2022
3f7c4c5
Fix navigateRegions focus style in the Site editor first pass.
afercia Oct 19, 2022
7efcc54
Use grid items to establish new stacking context.
afercia Oct 24, 2022
64eb393
Abstract navigable region and make CSS more robust.
afercia Oct 26, 2022
2ac420e
Simplify JS and add readme.
afercia Oct 26, 2022
a090f95
Clean up CSS and fix edge cases.
afercia Oct 26, 2022
9f525f2
Use new theming accent color.
afercia Nov 10, 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
2 changes: 2 additions & 0 deletions packages/base-styles/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,8 @@ $z-layers: (

// Appear under the topbar.
".customize-widgets__block-toolbar": 7,

".is-focusing-regions [role='region']:focus .interface-navigable-region__stacker": -1,
);

@function z-index( $key ) {
Expand Down
92 changes: 72 additions & 20 deletions packages/components/src/higher-order/navigate-regions/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,82 @@
position: relative;
}

.is-focusing-regions [role="region"] {
// For browsers that don't support outline-offset (IE11).
&:focus::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
outline: 4px solid transparent; // Shown in Windows High Contrast mode.
box-shadow: inset 0 0 0 4px $components-color-accent;
.is-focusing-regions {
[role="region"]:focus {
outline: 4px solid $components-color-accent;
outline-offset: -4px;

.interface-navigable-region__stacker {
position: relative;
z-index: z-index(".is-focusing-regions [role='region']:focus .interface-navigable-region__stacker");
}
}

// Fixes for edge cases.
// Some of the regions are currently used for layout purposes as 'interface skeleton'
// items. When they're absolutely positioned or when they contain absolutely
// positioned elements, they may have no size therefore the focus style is not
// visible. For the future, it's important to take into consideration that
// the navigable regions should always have a computed size. For now, we can
// fix some edge cases but these CSS rules should be later removed in favor of
// a more abstracted approach to make the navigabel regions focus style work
// regardles of the CSS used on other components.

// Header top bar when Distraction free mode is on.
&.is-distraction-free .interface-interface-skeleton__header {
.interface-navigable-region__stacker,
.edit-post-header {
outline: inherit;
outline-offset: inherit;
}
}

@supports ( outline-offset: 1px ) {
&:focus::after {
content: none;
// Sidebar toggle button shown when navigating regions.
.interface-interface-skeleton__sidebar {
.interface-navigable-region__stacker,
.edit-post-layout__toggle-sidebar-panel {
outline: inherit;
outline-offset: inherit;
}
}

&:focus {
outline-style: solid;
outline-color: $components-color-accent;
outline-width: 4px;
outline-offset: -4px;
// Publish sidebar toggle button shown when navigating regions.
.interface-interface-skeleton__actions {
.interface-navigable-region__stacker,
.edit-post-layout__toggle-publish-panel {
outline: inherit;
outline-offset: inherit;
}
}

// Publish sidebar.
[role="region"].interface-interface-skeleton__actions:focus .editor-post-publish-panel {
outline: 4px solid $components-color-accent;
outline-offset: -4px;
}

// Edit site Navigation Drawer.
.interface-interface-skeleton__drawer {
z-index: z-index(".edit-site-navigation-toggle");

.interface-navigable-region__stacker,
.edit-site-navigation-toggle {
outline: inherit;
outline-offset: inherit;
}

.edit-site-navigation-toggle.is-open {
outline: none;
}

.edit-site-navigation-toggle__button {
z-index: -1;
}
}
}

// Fixes for edge cases.
// Edit site Drawer.
.interface-interface-skeleton__drawer .interface-navigable-region__stacker {
height: 100%;
}
13 changes: 12 additions & 1 deletion packages/edit-post/src/components/layout/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@
justify-content: center;
}


.edit-post-layout__toggle-publish-panel,
.edit-post-layout__toggle-sidebar-panel,
.edit-post-layout__toggle-entities-saved-states-panel {
Expand All @@ -70,14 +69,26 @@
bottom: auto;
left: auto;
right: 0;
box-sizing: border-box;
width: $sidebar-width;
background-color: $white;
border: 1px dotted $gray-300;
height: auto !important; // Need to override the default sidebar positionnings
padding: $grid-unit-30;
display: flex;
justify-content: center;
}

.edit-post-layout__toggle-sidebar-panel {
.interface-interface-skeleton__sidebar:focus &,
.interface-interface-skeleton__sidebar:focus-within & {
top: auto;
bottom: 0;
}
}

.edit-post-layout__toggle-entities-saved-states-panel,
.edit-post-layout__toggle-publish-panel {
.interface-interface-skeleton__actions:focus &,
.interface-interface-skeleton__actions:focus-within & {
top: auto;
Expand Down
8 changes: 1 addition & 7 deletions packages/edit-site/src/components/editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,10 @@ html.wp-toolbar {
}

.edit-site-editor__toggle-save-panel {
z-index: z-index(".edit-site-editor__toggle-save-panel");
position: fixed !important; // Need to override the default relative positioning
top: -9999em;
bottom: auto;
left: auto;
right: 0;
box-sizing: border-box;
width: $sidebar-width;
background-color: $white;
border: 1px dotted $gray-300;
height: auto !important; // Need to override the default sidebar positioning
padding: $grid-unit-30;
display: flex;
justify-content: center;
Expand Down
7 changes: 0 additions & 7 deletions packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,6 @@
color: $white;
transition: width 100ms linear;
@include reduce-motion("transition");

// Footer is visible from medium so we subtract footer's height
.interface-interface-skeleton.has-footer & {
@include break-medium() {
height: calc(100% - #{$button-size-small + $border-width});
}
}
}

.edit-site-navigation-panel__inner {
Expand Down
12 changes: 12 additions & 0 deletions packages/interface/complementary-area-context/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
/**
* WordPress dependencies
*/
import { withPluginContext } from '@wordpress/plugins';

export default withPluginContext( ( context, ownProps ) => {
Copy link
Contributor

@talldan talldan Jan 10, 2023

Choose a reason for hiding this comment

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

@afercia @aristath Just wondering if this file should be in the src folder of the package?

I'm not familiar with the PR, but just spotted this file when browsing the codebase, so I may be wrong.

return {
icon: ownProps.icon || context.icon,
identifier:
ownProps.identifier || `${ context.name }/${ ownProps.name }`,
};
} );
1 change: 1 addition & 0 deletions packages/interface/src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,4 @@ export { default as PreferencesModal } from './preferences-modal';
export { default as PreferencesModalTabs } from './preferences-modal-tabs';
export { default as PreferencesModalSection } from './preferences-modal-section';
export { default as ___unstablePreferencesModalBaseOption } from './preferences-modal-base-option';
export { default as NavigableRegion } from './navigable-region';
82 changes: 35 additions & 47 deletions packages/interface/src/components/interface-skeleton/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { forwardRef, useEffect } from '@wordpress/element';
import {
__unstableUseNavigateRegions as useNavigateRegions,
__unstableMotion as motion,
} from '@wordpress/components';
import { __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useMergeRefs } from '@wordpress/compose';

/**
* Internal dependencies
*/
import NavigableRegion from '../navigable-region';

function useHTMLClass( className ) {
useEffect( () => {
const element =
Expand Down Expand Up @@ -89,39 +91,35 @@ function InterfaceSkeleton(
) }
>
{ !! drawer && (
<div
<NavigableRegion
className="interface-interface-skeleton__drawer"
role="region"
aria-label={ mergedLabels.drawer }
tabIndex="-1"
ariaLabel={ mergedLabels.drawer }
>
{ drawer }
</div>
</NavigableRegion>
) }
<div className="interface-interface-skeleton__editor">
{ !! header && isDistractionFree && (
<motion.div
initial={ isDistractionFree ? 'hidden' : 'hover' }
whileHover="hover"
variants={ headerVariants }
transition={ { type: 'tween', delay: 0.8 } }
<NavigableRegion
className="interface-interface-skeleton__header"
role="region"
aria-label={ mergedLabels.header }
tabIndex="-1"
motionProps={ {
initial: isDistractionFree ? 'hidden' : 'hover',
whileHover: 'hover',
variants: headerVariants,
transition: { type: 'tween', delay: 0.8 },
} }
>
{ header }
</motion.div>
</NavigableRegion>
) }
{ !! header && ! isDistractionFree && (
<div
<NavigableRegion
className="interface-interface-skeleton__header"
role="region"
aria-label={ mergedLabels.header }
tabIndex="-1"
ariaLabel={ mergedLabels.header }
>
{ header }
</div>
</NavigableRegion>
) }
{ isDistractionFree && (
<div className="interface-interface-skeleton__header">
Expand All @@ -130,59 +128,49 @@ function InterfaceSkeleton(
) }
<div className="interface-interface-skeleton__body">
{ !! secondarySidebar && (
<div
<NavigableRegion
className="interface-interface-skeleton__secondary-sidebar"
role="region"
aria-label={ mergedLabels.secondarySidebar }
tabIndex="-1"
ariaLabel={ mergedLabels.secondarySidebar }
>
{ secondarySidebar }
</div>
</NavigableRegion>
) }
{ !! notices && (
<div className="interface-interface-skeleton__notices">
{ notices }
</div>
) }
<div
<NavigableRegion
className="interface-interface-skeleton__content"
role="region"
aria-label={ mergedLabels.body }
tabIndex="-1"
ariaLabel={ mergedLabels.body }
>
{ content }
</div>
</NavigableRegion>
{ !! sidebar && (
<div
<NavigableRegion
className="interface-interface-skeleton__sidebar"
role="region"
aria-label={ mergedLabels.sidebar }
tabIndex="-1"
ariaLabel={ mergedLabels.sidebar }
>
{ sidebar }
</div>
</NavigableRegion>
) }
{ !! actions && (
<div
<NavigableRegion
className="interface-interface-skeleton__actions"
role="region"
aria-label={ mergedLabels.actions }
tabIndex="-1"
ariaLabel={ mergedLabels.actions }
>
{ actions }
</div>
</NavigableRegion>
) }
</div>
</div>
{ !! footer && (
<div
<NavigableRegion
className="interface-interface-skeleton__footer"
role="region"
aria-label={ mergedLabels.footer }
tabIndex="-1"
ariaLabel={ mergedLabels.footer }
>
{ footer }
</div>
</NavigableRegion>
) }
</div>
);
Expand Down
23 changes: 20 additions & 3 deletions packages/interface/src/components/interface-skeleton/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,10 @@ html.interface-interface-skeleton__html-container {
}

.interface-interface-skeleton__content {
.interface-navigable-region__stacker {
flex-grow: 1;
}

flex-grow: 1;

// Treat as flex container to allow children to grow to occupy full
Expand All @@ -93,7 +97,6 @@ html.interface-interface-skeleton__html-container {

.interface-interface-skeleton__secondary-sidebar,
.interface-interface-skeleton__sidebar {
display: block;
flex-shrink: 0;
position: absolute;
z-index: z-index(".interface-interface-skeleton__sidebar");
Expand All @@ -107,8 +110,14 @@ html.interface-interface-skeleton__html-container {
// On Mobile the header is fixed to keep HTML as scrollable.
@include break-medium() {
position: relative !important;
z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
width: auto; // Keep the sidebar width flexible.

// Set this z-index only when the sidebar is opened. When it's closed, the
// button to open the sidebar that is shown when navigating regions needs to
// be above the footer. See `edit-post-layout__toggle-sidebar-panel`.
.is-sidebar-opened & {
z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
}
}
}

Expand Down Expand Up @@ -173,8 +182,16 @@ html.interface-interface-skeleton__html-container {
width: $sidebar-width;
color: $gray-900;

&:focus {
&:focus,
&:focus-within {
top: auto;
bottom: 0;
}
}

// Footer is visible from medium so we subtract footer's height
.interface-interface-skeleton.has-footer .interface-interface-skeleton__drawer {
@include break-medium() {
height: calc(100% - #{$button-size-small + $border-width});
}
}
Loading