Decision: Focus in left nav submenu

Thing	Info
Relevant features	Content page
Date started	2021-07-13
Date finished	2021-07-13
Decision status	Done
Summary of outcome	Skip through subparts similar to the CMS Design System site

Background/context

When navigating by keyboard, "focus" seems to disappear within the left nav sidebar on a content page, because it gets inside the submenus (various sections) without being visibly displayed.

Helpful Chrome settings for testing: "Show a quick highlight on the focused object" + "Navigate pages with a text cursor"

Reference:

• https://webaim.org/techniques/keyboard/
• https://www.washington.edu/accessibility/checklist/focus/
• https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/accordion.html
• https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex

Core question

This behavior is confusing - but what should we do instead?

For example: should the left submenu pop open so you can see what you're navigating through? Should it skip from Subpart to Subpart subheading?

What we know

Comparison: ATF eRegs skips you through the Subpart subheadings but doesn't enable you to hit enter to expand them.

The navigation on the CMS Design System site works pretty well - skips from submenu item to submenu item, while allowing you to hit enter to expand the submenu item.

Things we need to decide + options for them

What should happen?

Let's make it similar to the CMS Design System: skip through subheadings, hit enter to expand submenu. (That page may also be an interesting example of how to implement "Skip to Main Content" as well.)

The difference is that we have two actions: visiting the subpart as a whole vs visiting a specific section. Tab should go to subpart whole action first, then arrow to expand action, then next subpart.

Outcome (decision)

Change the focus behavior to work more like CMS Design System.

Consequences