Skip to content

Disclosure Menu Examples have conflicting behavior and descriptions for the Esc key #2830

@corymharper

Description

@corymharper

In Example Disclosure Navigation Menu we can see the following under "Accessibility Features":

If a dropdown is open and focus is inside the navigation region, pressing Esc will close the dropdown. Moving focus out of the navigation region also closes an open dropdown. Implementing this Esc behavior is necessary to meet the WCAG 2.1 1.4.13: Content on Hover or Focus criterion.

Then under "Keyboard Support" we can see the following behavior described for the "Escape" key:

If a dropdown is open, closes it and sets focus on the button that controls that dropdown.

Both described behaviors seem to be implemented, but I'm not sure why the description of the two differing behaviors based on where focus currently is is split up in these two locations, if someone read one and not the other, they'd miss an implementation detail.

Secondly, the same things are true about Example Disclosure Navigation Menu with Top-Level Links however there is a novel bug in the implementation of the example, where if focus is on one of the top level links pressing "Escape" does nothing at all, this seems to be in conflict with the description of what should happen if you press escape while in the navigation region.

Metadata

Metadata

Assignees

Labels

Example PageRelated to a page containing an example implementation of a patternFeedbackIssue raised by or for collecting input from people outside APG task force

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions