Look at improving 'expandable things'

[christopherthomasdesign]

What

Look at expandable components to solve common problems between them and find a more unified approach.

Why

• The details component has seen several issues with users thinking they link to other pages: Details (Hidden text) govuk-design-system-backlog#44
• The placement of the +/− icons and 'open all' controls on accordions can be missed by users with screen magnifiers: Accordion govuk-design-system-backlog#1 (comment)
• We like the look of how NHS have approached their 'expander' component: https://service-manual.nhs.uk/design-system/components/expander
• There seem to be big overlaps between details and accordions which are worth exploring

Who needs to know about this

Designers, developers

Further detail

Components with expandable things include:

• Accordion
• Details

Should also consider:

• Conditionally revealing checkboxes and radios
• Step-by-step pages

Done when

TBC

[36degrees]

Related: Feedback from testing highlighting that the <details> element is styled to look like a link, but is (natively) treated as a button by assistive technology.

alphagov/govuk-design-system-backlog#44 (comment)

alphagov/govuk-design-system-backlog#44 (comment)

[chris-gds]

Just noting some additional instances of this "open-and-close" pattern on GOV.UK that is all somewhat linked,

including:

• Mobile Menus (GOV.UK)
• Search filtering options (GOV.UK/search)

---