v5 component refactor: Accordion

[willmcvay]

Abstract

As part of the v5 Elements release, each component will be reviewed and refactored to ensure best practice and design system alignment

Specification

• Is new component or existing? Existing - called Accordion in Elements
• Is the component being re-named? No, but the DS calls the main component AccordionGroup and each AccordionItem it calls an Accordion - we should align with this naming convention
• Is the component design signed off by product and design?
• Guide to component structure & documentation in storybook
• Link to DS in Figma
• Additional behavioural specification: Simple smooth 0.5s transition on open close would be a nice addition but not essential.
• Accessibility requirements
• Link to Design Guidelines

Developer Checklist

• [ ] Styles alignment between Design System and Elements
• [ ] Check design tokens in Figma and implement CSS variable tokens if available for relevant component
• [ ] Align with accessibility standards / spec as per above
• [ ] If relevant, break down component into Styles Only and React component structures
• [ ] Ensure all variants of components are documented as appropriate
• [ ] Ensure unit test coverage is adequate for component
• [ ] Update documentation in MDX file as per guidelines
• [ ] Changelog updated to reflect a single beta version per component ideally

Release Checklist

• [ ] Approved PR merged to main
• [ ] Design & product review and feedback addressed by developer
• [ ] Beta release by product / engineering lead to next beta version

Additional Context or Information

[kurtdoherty]

suggestion: I think it would be great to see us use the native HTML details element for the Accordion, particularly because it will provide all the correct a11y out-of-the-box for us, but also because it can handle groups of accordions at the DOM level, which provides CSS-only consumers a comparable experience to React users.

suggestion: I also think it would be great to move away from the items prop and towards a more JSX-centric API. As a very rough draft, I mean something like...

<Accordion.Group>
  <Accordion>
    <Accordion.Header>Foo</Accordion.Header>
    <Accordion.Body>Bar</Accordion.Body>
  </Accordion>
  ...
</Accordion.Group>

note: a quick and dirty POC of the above two suggestions is available here