Making WordPress.org

Opened 10 months ago

Closed 8 months ago

Last modified 7 months ago

#3928 closed defect (fixed)

Move the mobile toggle button for the main menu to just above the menu items

Reported by: rianrietveld Owned by: coffee2code
Milestone: Priority: normal
Component: General Keywords:


At the moment the hamburger menu toggle button is placed in the DOM above the WordPress logo link and the search.
If you open the menu and tab further, first the WordPress logo link and the search field get focus before you can tab trough the menu.

If the button is moved, in the DOM, just before the list items in the menu, the tab order makes more sense.

So in the DOM the order will be better:

<button id="mobile-menu-button" aria-expanded="false">
    <span class="screen-reader-text">Toggle Menu</span>
<ul id="wporg-header-menu" class=" nav-menu">
   [list items ]

Attachments (1)

taborder-menu.mov (3.7 MB) - added by rianrietveld 10 months ago.
Mov file with a recording of the tab order of the main menu in mobile view

Change History (4)

10 months ago

Mov file with a recording of the tab order of the main menu in mobile view

#1 @coffee2code
8 months ago

  • Owner set to coffee2code
  • Status changed from new to accepted

#2 @coffee2code
8 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

Fixed in [14759-dotorg].

Thanks for the report!

#3 @coffee2code
7 months ago

In 8283:

Trac: Move main menu toggle button in header to immediately before the menu, so keyboard traversal from one to the other doesn't require tabbing past the logo and search field.

See #3928.

Note: See TracTickets for help on using tickets.