Make WordPress Core

Opened 6 weeks ago

Closed 2 weeks ago

#61344 closed defect (bug) (reported-upstream)

On mobile devices, the first element of the Navigation block is focused by default

Reported by: skullblaka's profile skullblaka Owned by: audrasjb's profile audrasjb
Milestone: Priority: normal
Severity: normal Version: 5.9
Component: Editor Keywords:
Focuses: ui, accessibility, css Cc:



i'm using twenty twenty-four, when i click on the nav icon, the first element is always focused.

From my screenshot, you can see I am on page "services" but, when i open the navbar, the "about" page is focused.

Whichever element is placed first will be focused when i open the navbar.
This is kind of misleading for the user.

Is it possible to avoid this behavior?


Change History (9)

#1 @audrasjb
6 weeks ago

  • Component changed from Themes to Bundled Theme
  • Keywords 2nd-opinion added
  • Owner set to audrasjb
  • Severity changed from minor to normal
  • Status changed from new to assigned

Hello, welcome to WordPress Core Trac and thanks for opening this ticket.

This behavior sounds logical to me as when the menu is opened via the menu button, the focus should be set to the menu so users using keyboard navigation can start to navigate through the menu items.

It wouldn't make sense to focus on the current menu item as people may want to navigate to the previous menu items as well.

By the way you can still override the menu items styles with custom css is this focus on the first item doesn't please yourself :)

Adding 2nd-opinion workflow keyword (while I'm pretty sure about this one) as it would be nice to get a confirmation from the accessibility team :)

Last edited 6 weeks ago by audrasjb (previous) (diff)

#2 @sabernhardt
6 weeks ago

  • Summary changed from mobile devices - first element of the navbar is focused by default to On mobile devices, the first element of the Navigation block is focused by default
  • Version changed from 6.5.3 to 5.9

Since WordPress 5.9 and Twenty Twenty-Two 1.0, the Navigation block has moved focus from the button that opens and closes the menu to the first item in the (top-level) mobile menu.

In contrast, on larger screens, focus remains on a submenu's toggle button after the submenu is opened.

#3 @sabernhardt
6 weeks ago

  • Component changed from Bundled Theme to Editor

#4 @skullblaka
6 weeks ago

I'd like to point out that it doesn't really matter the device screen size.
if I use the nav icon in the desktop version, it has the same issue.

In this example, i'm on the home page but the about page is focused.

#5 @joedolson
4 weeks ago

I'd argue that focus should not be moved, as long as the position of the menu in the DOM is immediately after the menu toggle. Activating a toggle control to disclose content should only have a focus change if it will otherwise be difficult to reach the revealed content.

In general, unnecessary changes of focus are undesirable.

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.

3 weeks ago

#7 @joedolson
3 weeks ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from assigned to closed

The accessibility team agreed in today's bug scrub that the focus move is undesirable; focus should stay on the activating control.

I assume that this is an issue with the block, and should be moved upstream. I'll check the Gutenberg directory and report upstream if it's not already reported.

#8 @joedolson
3 weeks ago

  • Milestone set to Awaiting Review
  • Resolution invalid deleted
  • Status changed from closed to reopened

Did not mean to close this.

#9 @sabernhardt
2 weeks ago

  • Keywords 2nd-opinion removed
  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from reopened to closed

Yes, the focus change is already reported on GitHub:

Note: See TracTickets for help on using tickets.