feat[dev]: ✨ implement A11y improvements to sd-accordion and sd-accordion-group

[yoezlem]

Description

This task describes the Storybook implementation for the sd-accordion and sd-accordion-group component as part of the A11y improvements outlined in Epic #1465.

A11y improvements for sd-accordion and sd-accordion-group can be found here: sd-accordion and sd-accordion-group Notes.

---

Comment

No critical issues found.

Notes

• Many implementations of accordions use headings (h2 or h3) with nested buttons instead of the header element for the accordion header because headings provide a convenient additional way of navigation for screen reader users.
  There is an example where you slot an h4, but this heading ends up nested inside a button, which means that the heading is not discoverable in some screen readers. The other way around, it works fine.

<h4><button>heading</button></h4> <!-- good -->
<button><h4>heading</h4></button> <!-- bad -->

• Instead of changing the role of the header element to button and adding tabindex, consider using an actual button element to decrease complexity.
• Each content slot is a named region. That's generally fine, but on a page with many accordion items (e.g., a FAQ page) where most or all of them are expanded, having too many landmarks can pollute landmark navigation.

Best Practices

• Hiding content can become a potential barrier, making content more challenging to discover. Use this pattern only for non-critical information.

Additional resources

https://www.w3.org/WAI/ARIA/apg/patterns/accordion/

Open Questions towards design

• Question1
• Question2

DoR

• Item has been estimated by the team
• Item dependencies have been identified and documented

DoD

• Documentation has been created/updated (if applicable)
• Migration Guide has been created/updated (if applicable)
• Relevant E2E tests (Features, A11y, Bug fixes) are created/updated
• Relevant stories (Features, A11y) are created/updated
• Implementation works successfully on feature branch