Skip to content

accordion focus moves from focusable panel content to header when arrow key up or down are pressed #4326

@SethDonohue

Description

@SethDonohue

Describe the bug; what happened?
The focus is moving from accordion item panel focusable content back to the accordion headers when the down or up arrow keys are pressed.

What are the steps to reproduce the issue?

Example:

see stackblitz repro: https://stackblitz.com/edit/fast-design-tku4xg?file=index.html

  1. Focus on accordion header
  2. Tab focus to any button in panel
  3. Press arrow up or down key
  4. Notice how focus moves to accordion headers

What behavior did you expect?
The accordion item should not handle arrow key presses or focus unless the focus is already on the accordion headers.
See ARIA Spec Accordion Keyboard Interaction: https://w3c.github.io/aria-practices/#keyboard-interaction

Down Arrow (Optional): If focus is on an accordion header, moves focus to the next accordion header. If focus is on the last accordion header, either does nothing or moves focus to the first accordion header.
Up Arrow (Optional): If focus is on an accordion header, moves focus to the previous accordion header. If focus is on the first accordion header, either does nothing or moves focus to the last accordion header.

If applicable, provide screenshots:
accordionkeycast

In what environment did you see the issue?

  • OS & Device: MacOS, Windows, on PC
  • Browser Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions