[wp-trac] [WordPress Trac] #38397: Twenty Seventeen: Mobile menu parent items require double tap

[WordPress Trac]

#38397: Twenty Seventeen: Mobile menu parent items require double tap
-------------------------------------+----------------------------
 Reporter:  celloexpressions         |       Owner:
     Type:  defect (bug)             |      Status:  new
 Priority:  low                      |   Milestone:  4.7
Component:  Bundled Theme            |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch needs-testing  |     Focuses:  accessibility
-------------------------------------+----------------------------
Changes (by afercia):

 * focuses:   => accessibility


Comment:

 Worth noting the `aria-haspopup` attribute set on the list item doesn't
 have any benefit for accessibility, since it's on a non-focusable, non-
 actionable element (the `<li>`). Screen readers won't announce it, I've
 tested just with VoiceOver but it will be the same with other screen
 readers:

 [[Image(https://cldup.com/MHnPPN9cTD.png)]]

 Only when I edit the JS and set the attribute on the `<a>` element, then
 it is announced. VoiceOver announces `aria-haspopup` saying "Menu pop-up",
 other screen readers use a different wording:

 [[Image(https://cldup.com/wYof2zhqkF.png)]]

 That's also how the `aria-haspopup` is implemented in the core admin menu
 and toolbar, it is set on the links, not on the list items.

 The example mentioned on the Stack Overflow post, see
 https://www.w3.org/WAI/tutorials/menus/examples/appmenu/, is completely
 different because:
 - it's an application menu, not a navigation menu
 - thus, it uses the ARIA roles menubar, menu, menuitem that make the list
 items actionable when using a screen reader
 - the click event is attached on the list items

 So that example shouldn't be taken into consideration. As it is now, on
 the Twenty Seventeen menu the `aria-haspopup` is pointless and as far as I
 see there are two options:
 - remove it: the button already gives some indication there's a sub menu
 that can be expanded
 - set the `aria-haspopup` attribute on the links, and then it should be
 tested again to check the bug reported on this ticket

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