Feedback: "Navigate forwards to a collapsed disclosure button" (Disclosure Navigation Menu Example, Test 5)

[mbgower]

Description of Behaviour

I was not running a screen reader against this test, but wanted to flag that the keyboard behaviour of this menu does not match the APG for either Menu button or Menu both of which respectively state:

Enter: opens the menu and places focus on the first menu item.

When a menu opens, or when a menubar receives focus, keyboard focus is placed on the first item.

When using this demo, activating the menu merely opens the menu. It keeps the focus on the menu itself, instead of moving focus to the first item. Is this intentional, and if so, to what end?

[jscholes]

@mbgower Thanks for your feedback. This example is not semantically marked up as a menu; the word "menu" is used more as a recognisable human-readable construct relating to navigation. The actual mark-up only uses disclosure buttons and lists of links, and as such, the focus management applicable to semantic menus is not implemented.

You can also see this in action on the original Authoring Practices example at:

https://www.w3.org/WAI/ARIA/apg/example-index/disclosure/disclosure-navigation.html

If you believe that the underlying Authoring Practices example, which these tests are based on, should be modified in some way, you can file an issue at:

https://github.com/w3c/aria-practices

As the ARIA-AT tests and demo test case are working as expected, I'll be closing this issue.

[mbgower]

the word "menu" is used more as a recognisable human-readable construct relating to navigation. The actual mark-up only uses disclosure buttons and lists of links, and as such, the focus management applicable to semantic menus is not implemented.

I find that a little unusual.

I will take this up with the APG issue, but that is somewhat nonsensical from a design perspective. Isn't the purpose here to create a universal experience?

1. The test is named "menu" because as you note 'it looks like a menu'
2. You create a button that opens something and is visually cued that way for sighted users

If we imagine a sighted designer requesting a menu construct, the convention is that the first item in the menu takes focus on open. That is what they will request/expect from their developer.

These conventions are not just restricted to the first item taking focus. Another is that a menu collapses when focus leaves it, either due to activation or to a user navigating past it.

One of the consequences of using a disclosure to mimic a menu is that you no longer have a requirement to auto-close it. But when replicating a menu, that is expected behaviour. It can lead to unexpected/unintended issues. Here, your 'menu' is not collapsing when a menu item is activated. The result is that the menu persists and visually obscures the content brought into focus by its activation.

Image showing the Admissions menu open with the main content showing the heading Tuition. Even though the main content has focus, it cannot be read by a sighted user because it is obscured by the still open Admissions menu.