Making WordPress.org

Opened 15 months ago

Closed 13 months ago

Last modified 12 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 15 months ago.
Mov file with a recording of the tab order of the main menu in mobile view

Change History (4)

15 months ago

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

#1 @coffee2code
13 months ago

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

#2 @coffee2code
13 months ago

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

Fixed in [14759-dotorg].

Thanks for the report!

#3 @coffee2code
12 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.