Accordion Accessibility

[sahar-saadatmandi-corelab]

Description:
The accordion component has accessibility issues for keyboard-only users. While the first accordion is expanded by default, its header is not focusable. As a result, users cannot collapse it using the keyboard. However, the headers of the other accordions are not focusable, making the items inside the other accordions completely inaccessible — they cannot be focused, selected, or interacted with using the Tab key.

Steps to Reproduce:

1. Open a page with multiple accordion components.
2. Notice that the first accordion is expanded by default, and you can tab through its fields.
3. Try to focus the header of the first accordion using the Tab key — it cannot be focused.
4. Manually select the header of the first accordion (e.g., using a mouse) and press Enter or Space to collapse it — this does not work.
5. Use the Tab key to navigate to the headers of the other accordions — the headers are not focusable.
6. Fields inside the other accordions remain inaccessible because they are collapsed, and their headers cannot be controlled with the keyboard.

Expected Behavior:

• Accordion headers should be focusable using the Tab key.
• Accordion headers should support expand and collapse actions using keyboard inputs such as Enter or Space.

Possible Solution:

• Make Headers Focusable:
  Add tabindex to headers so they can be focused using the Tab key.

• Add role="button":
  Define the functionality of headers for assistive technologies.

• Enable Keyboard Navigation:
  Add keydown listeners to toggle the accordion with Enter or Space.

• Add Focus Styles:
  Use CSS to clearly highlight headers when focused.

Why is this Important:
The current behavior renders the accordion component inaccessible for keyboard-only users and violates WCAG accessibility guidelines. Ensuring keyboard navigation accessibility is vital for providing an inclusive and user-friendly experience.

[tabuna]

Hi! 😊 Thank you so much for opening this issue and making changes to the closed PR.

I think we can take it step by step, starting with small improvements to enhance the overall experience.

I’d suggest simply replacing the <h6> tag with <button type="button">.

Additionally, we could add styles for outline on buttons and links, using the modern selector :focus-visible instead of just :focus to ensure it works only for keyboard users. It could look something like this:

a, button, .btn {
  &:focus-visible {
    outline: // ... ???
  }
}

What do you think about this approach?

[sahar-saadatmandi-corelab]

Hi!
Thank you for your suggestion and clear explanation. I think your approach works perfectly and seems to solve the problem effectively.
Should I go ahead and create a PR with these changes, or would you prefer to handle it yourself? Let me know how you'd like to proceed!
Thank you again for your help!

[tabuna]

I would be happy if you could create a PR and check it.