Details

[jrbarnes9]

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

[jrbarnes9]

#189 resolved

[jrbarnes9]

#250 resolved

[jrbarnes9]

#363 resolved

[jrbarnes9]

#580 resolved

[jrbarnes9]

Details needs a default bottom margin

[jrbarnes9]

Issue #1678 raised

[jrbarnes9]

#445 resolved

[jrbarnes9]

#453 resolved

[jrbarnes9]

#508 resolved

[jrbarnes9]

#556 resolved

[jrbarnes9]

#615 resolved

[jrbarnes9]

#741 resolved

[jrbarnes9]

#990 resolved

[jrbarnes9]

#1002 resolved

[jrbarnes9]

#1238 resolved

[mr-nick17]

Could this component use the semantic <details> markup? The browser can hide/show content without JS. The only possible drawback is IE11, the content is still rendered but could potentially lose its semantic meaning

[jrbarnes9]

We did use to, but we had to pull it due to a bug (#741) found during Census rehearsal

[jrbarnes9]

Added a card to the backlog to document why we don't currently use <details>

[jrbarnes9]

Agreed to reinstate the <details> element to resolve #1996

[jrbarnes9]

#1808 fixed

[jrbarnes9]

Raised #1996

[James-Nitron]

WCAG A - Incorrect use of ARIA

The ‘Hide this’ button that is found in the collapsible element contains an aria-hidden attribute. The aria-hidden attribute should not be used on elements that can receive keyboard-only focus. This may cause some disorientation to screen reader users that are able to ‘tab’ onto the element.

<button type="button" class="ons-btn ons-js-collapsible-button ons-btn--secondary ons-btn--small" aria-hidden="true" aria-controls="collapsible" data-ga-action="Open panel">
<span class="ons-btn__inner ons-js-collapsible-button-inner">Hide this</span>
<span class="ons-btn__context ons-u-vh">What is a photovoltaic system? content</span>
</button>

Suggestion remove the aria-hidden attribute.

[jrbarnes9]

Resolved by #2013

[LaurenDowling]

When CSS is turned off, the svg takes up a huge amount of space onscreen. This reduces the usability of the component. The same goes for the accordion component.

Might be worth comparing with the gov one. The following is with css removed:

[Al-Davies]

UR findings on collapsible
tested as part of end-to-end Census testing Feb-Sept 2020

• These have been well tested via census EQ and census website. Are now widely used on the ONS - these reduce page length so page isn't over-daunting for users.
• Users like these - they don't have to read content they are not interested in, but understand how they work and can hide the content again should they wish.