Skip to content

Regression: the navigate region focus style is broken #21717

@afercia

Description

@afercia

Describe the bug
When jumping through the main ARIA landmarks in the editor (also known as "navigate-region" component) via the dedicated keyboard shortcuts, the focus style of the regions is broken, in slightly different ways on different browsers.

To reproduce

  • Test in different browsers, also on Windows.
  • Use the keyboard shortcuts to navigate through the landmarks.
  • on macOS:
    • Ctrl+backtick
    • Shift+Ctrl+backtick
  • on Windows (if I'm not mistaken):
    • Shift+Alt+N
    • Shift+Alt+P
  • see the focus style is broken on some of the regions

Expected behavior
The focus style to always be clearly visible.

Note
This style broke a few times during the project history. Maybe worth considering a different, more solid, testable, implementation.

Screenshots

With Gutenberg plugin activated.

Chrome Windows: content region focused: the style is visible only in the part of the UI close to the browser scrollbar:

Screenshot (95) content

Chrome Windows: sidebar region focused: the style is barely visible:

Screenshot (96) sidebar

Chrome macOS content region: no style visible:

chrome content

Chrome macOS sidebar region: style barely visible:

chrome sidebar

Chrome macOS publish region: no style visible:

chrome publish

Firefox macOS sidebar region: style breaks but in a different way:

firefox sidebar

Editor version (please complete the following information):

  • can reproduce with slightly different results on both:
    • default editor shipped with WP 5.4
    • plugin version 7.9.1

Metadata

Metadata

Assignees

Labels

CSS StylingRelated to editor and front end styles, CSS-specific issues.General InterfaceParts of the UI which don't fall neatly under other labels.Good First IssueAn issue that's suitable for someone looking to contribute for the first time[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Status] In ProgressTracking issues with work in progress[Type] RegressionRelated to a regression in the latest release

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions