Accordion

[bameyrick]

Use this place to discuss the Accordion component in the ONS Design System

[trevorsaint]

Accordions break visually if using it without show/hide buttons. I have removed one as an example.

[jrbarnes9]

It may be a case that the buttons should be mandatory. Component needs to be retested with DAC because the original evidence for the buttons cannot be found. It is believed the buttons to open/close the accordions were added as a visual cue required for users of speech recognition software.

[jrbarnes9]

To be DAC tested in May 2022 ONSdigital/design-team#10

[trevorsaint]

A visual improvement would be to indent the content, so visually it aligns to the heading.

An indent of 27px or 1.5rem on the content would achieve this.

Currently

Suggested

[JoelClemence]

I have attempted to use this in my Flask app but this component unfortunately does not work in Jinja2 (3.0.3):

jinja2.exceptions.TemplateRuntimeError: No filter named 'setAttributes' found.

[jrbarnes9]

Raised #1786

[boxadesign]

@JoelClemence We will need to provide documentation for this or perhaps refactor to not require this filter. But you will need to add the filter to your app as done here:

https://github.com/ONSdigital/eq-questionnaire-runner/blob/567f85c5bcaf926a0f9534fa8226b06305d2ea70/app/jinja_filters.py#L181

[jrbarnes9]

Accordion collapsibles of the simple variant are not in the tab order

[jrbarnes9]

Raised #2147

[Al-Davies]

UR findings on accordions -
tested as part of eQ business survey usability testing Oct 21

• users expected to be able to add their information into the survey introduction page - they expected that by clicking on the show all / show buttons this would reveal a list of questions with a box to input an answer
• users realised on trying to do this that only information was held here, quickly realising they had to use the start survey button
• users using a mixture of show all and show buttons - actions of doing so matched their expectations
• where accordians hold information, users may be less likely to look at these as they become more familiar with the product - this may need consideration if important information is added here that needs to be communicated to users