[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        |  Resolution:
 Keywords:                |     Focuses:  accessibility, javascript
--------------------------+----------------------------------------

Comment (by kymhaugen):

 I agree; it may not be a true keyboard trap, but it is frustrating -
 especially for screenreader users.

 I don't have a publicly available link, but this issue can be recreated in
 the WordPress playground with the following setup.

 **I made 3 new pages, and arranged them into a submenu like this.**

 [[Image(https://i.imgur.com/gINMz6r.jpeg)]]


 **Also set the menu to open on click.**

 [[Image(https://i.imgur.com/1FFZQKa.jpeg)]]

 **Here is a video demo of the issue: ** https://i.imgur.com/Q0M8EKF.mp4
 I tested this using the latest version of Chrome.

 When I Tab to the 'Sample Dropdown' nav item and hit Enter, you can see
 the aria-expanded attribute change to 'true'. Then I press Tab to go
 through all the submenu links.

 I then hit Enter on the submenu toggle again, and you can see the aria-
 expanded attribute go back to 'false'. Even though the submenu's state is
 considered closed, when I start hitting Tab again I can only access the
 submenu items, not the 'Sample Page' or close button.

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