[wp-trac] [WordPress Trac] #64075: Focus trap and screen reader issue when navigation menu opened in mobile view

[WordPress Trac]

#64075: Focus trap and screen reader issue when navigation menu opened in mobile
view
---------------------------------------+-----------------------------
 Reporter:  kymhaugen                  |      Owner:  (none)
     Type:  defect (bug)               |     Status:  new
 Priority:  normal                     |  Milestone:  Awaiting Review
Component:  Menus                      |    Version:  6.8.2
 Severity:  normal                     |   Keywords:
  Focuses:  accessibility, javascript  |
---------------------------------------+-----------------------------
 Using a completely vanilla install, no plugins, and the Twenty Twenty-Five
 theme, there are some accessibility issues present with navigation menus
 that contain submenus that are set to open on click.

 This can be seen with a navigation menu like this:
 Navigation Item 1
 Navigation Item 2 (submenu)
 --Submenu Item 1
 --Submenu Item 2

 **Steps to reproduce:**
 1. Tab to the mobile menu button and hit Enter
 2. Tab to the submenu toggle item (Navigation Item 2)
 3. Hit Enter when focused on the sub menu toggle item
 4. Continue to hit Tab to go through all the submenu's links - focus will
 remain inside this submenu and cycle through only the submenu links.

 The only way to escape this submenu is to hit Escape, close the entire
 menu, and start over from the beginning of the navigation.

 This may not be a common issue with sighted users, as they likely will not
 hit Enter on the submenu toggle. However, users with impaired vision who
 use a screenreader can easily encounter this focus trap.

 The submenu toggles have aria-expanded attributes that will announce as
 collapsed or expanded when the user Tabs to them while using a
 screenreader.

 For example, a site visitor using a screenreader would Tab through the
 menu and hear "[Submenu Toggle Text] menu, collapsed". They would hit
 Enter to open the menu, thus triggering the focus trap. They would Tab
 through all the links, reach the submenu toggle again, which will announce
 that it is "expanded". They would hit Enter again, it would announce as
 "collapsed", but when they start hitting Tab again they will still be
 stuck in the submenu.

 This seems to be a bug with how the interactivity API handles the keydown
 event and cycles focus from top to bottom, even when the state of the
 submenu has been marked as closed.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/64075>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform