feat(accordion): update to use correct HTML semantics

[damienrobson-sage]

BREAKING CHANGE: Accordion has been rewritten to use the correct HTML semantics (details and summary). As such, defaultExpanded has been deprecated in favour of expanded. The AccordionGroup component has also been removed.

Proposed behaviour

• Rebuild Accordion using the semantically-correct details and summary elements, whilst maintaining functionality.
• Remove AccordionGroup.

Current behaviour

The current implementation of Accordion is built with div elements as opposed to the semantically-correct details and summary elements. This is due to legacy constraints whereby details/summary could not be animated.

Checklist

• Commits follow our style guide
• Related issues linked in commit messages if required
• Screenshots are included in the PR if useful
• All themes are supported if required
• Unit tests added or updated if required
• Playwright automation tests added or updated if required
• Storybook added or updated if required
• Translations added or updated (including creating or amending translation keys table in storybook) if required
• Typescript d.ts file added or updated if required
• Related docs have been updated if required

QA

• Tested in provided StackBlitz sandbox/Storybook
• Add new Playwright test coverage if required
• Carbon implementation matches Design System/designs
• UI Tests GitHub check reviewed if required

Additional context

• After conversation with the accessibility team, the handler for keyboard interaction between grouped Accordion elements in AccordionGroup has been removed. The default behaviour of tabbing between components should be used instead;
• Accordions can now be semantically grouped using the groupName prop as well as via the AccordionGroup component. Using the component approach, accordions will retain their open/closed state when other accordions are opened. Using the semantic approach, only one accordion can be open in a group at any given time;

Testing instructions

Use the updated Storybook examples to test the new functionalities.

[edleeks87]

Really good work @damienrobson-sage, it's great to now be able to use the semantically correct elements now. I notice when I've run the chromatic build there that some of the component is rendering slightly off screen, not sure if that'll affect chromatic but it does when viewing the docs etc. I also notice there's a tests story not sure if that's intentional.

[harpalsingh]

@damienrobson-sage looking into this, as it seems the way the content appears has changed so need to be sure this wont cause issues with larger content from an accoridon

[damienrobson-sage]

@harpalsingh spun up a quick test of the component with 10 paragraphs worth of lorem ipsum (see below). Is this what you were wanting to check?