Accessibility Keyboard Interaction

[jessiehuff]

Ultimate goals:

• To have consistent keyboard behavior across similar components
• Have keyboard behavior documented for consumers/contributors
• Avoid regressions

Updating Components:

• Component behaviors should be based off of Design Documentation
• Current state of components has been audited, current behaviors are documented and need updated based on best practices
• Each time we fix an interaction, a test should be included to prevent a regression
• Component behaviors that could use improvement are listed below

Testing:

• Each time we fix an interaction, a test should be included to prevent a regression
• Test framework (Cypress) has already been set up; it’s a matter of enabling tests to run and reducing the amount of time it takes to test.
• Design Documentation can be used as a blueprint for creating the tests
• Also investigate testing with Firefox/Chrome (and possibly other browsers)- different browsers tend to have different behaviors

Component Behaviors:

This section captures any keyboard behavior within the component that doesn’t currently meet accessibility expectations
** NOTE: ** Any issue that is created for fixing the components below should include creating tests as part of the acceptance criteria

Dropdown:

• 1.2 Toggle - Expanded state
  • Space
  • Esc
• 2.1 Panel - Escape user action
  • Esc
• 2.3 Panel > Menu - Single-selection variant
  • Enter
  • Space
• 2.5 Panel > Menu > Menu Item - Managing focus
  • Tab
  • Shift + Tab

Dropdown Panel:

• 1.1 Toggle - Collapsed state
  • Enter
  • Space
• 1.2 Toggle - Expanded state
  • Space
  • Esc
• 2.1 Panel - Escape user action
  • Esc
• 2.2 Panel - Customizable variant
  • Tab
  • Shift + Tab

Application Launcher (uses Dropdown and will likely be impacted by Dropdown updates):

• 1.2 Toggle - Expanded state
  • Space (issue in Firefox)
  • Tab
  • Shift + Tab
• 2.1 Panel - Escape user action
  • Esc
• Panel > Menu - Single-selection variant:
  • Enter (Note that the behavior is roughly the same, except additional behavior is included in the example (e.g. the link places focus on the first heading, the other actions have additional behavior associated with them)
  • Space

Context Selector:

• 1.2 Toggle - Expanded state
  • Enter (issue in Firefox)
  • Esc
  • Tab
  • Shift + Tab
• 2.1 Panel - Escape user action
  • Esc
• 2.7 Panel > Menu - Filterable variant
  • Enter
  • Space
  • Tab
  • Shift + Tab
  • Arrow down
  • Arrow up
• 2.8 Panel > Filter Input
  • Shift + Tab

Options Menu (uses Dropdown and will likely be impacted by Dropdown updates):

• 1.2 Toggle - Expanded state
  • Space (issue in Firefox)
  • Esc
• 2.1 Panel - Escape user action
  • Esc
• 2.3 Panel > Menu - Single-selection variant
  • Enter
  • Space
• 2.5 Panel > Menu > Menu Item - Managing focus
  • Tab
  • Shift + Tab

Pagination (uses Dropdown and will likely be impacted by Dropdown updates):

• 1.1 Toggle - Collapsed state
  • Space (issue in Firefox)
• 1.2 Toggle - Expanded state
  • Space (issue in Firefox)
  • Esc
• 2.1 Panel - Escape user action
  • Esc
• 2.3 Panel > Menu - Single-selection variant
  • Enter (focus not placed)
  • Space
• 2.5 Panel > Menu > Menu Item - Managing focus
  • Tab
  • Shift + Tab

Select:

• 1.1 Toggle - Collapsed state
  • Space (issue in Firefox)
• 1.2 Toggle - Expanded state
  • Space
  • Esc
  • Tab
  • Shift + Tab
• 2.1 Panel - Escape user action
  • Esc
• 2.3 Panel > Menu - Single-selection variant
  • Enter
  • Space
• 2.4 Panel > Menu - Multi-selection variant
  • Space (issue with Chrome, but not FF. Check all browsers)
• 2.5 Panel > Menu > Menu Item - Managing focus
  • Tab
  • Shift + Tab
• 2.6 Panel > Menu > Checkbox Menu Item - Managing focus
  • Shift + Tab
  • Arrow down (if next item is disabled)
  • Arrow up (if previous item is disabled)

[nicolethoen]

We will be refactoring the components to consume the Menu component to standardize interactions across similar components. Finishing the refactor process will be a breaking change.

[nicolethoen]

This whole epic may be addressed when a refactor epic is completed: #6014

[nicolethoen]

This can be considered a duplicate of #6014 since all dropdown menus will use the same Menu and/or Panel components under the hood, they will be using the same interaction patterns.