Add how to progressively reveal content

[kelliedesigner]

As a user of the Design System,
I want to know how to provide content which can be revealed
So that there is consistency across products

Acceptance Criteria

• Research usability and accessibility of progressively revealing content
• Add guidance into the Design System

[kelliedesigner]

GOV.UK Design System - Details component

• Make a page easier to scan
• Letting users reveal more detailed information
• Include information that only some users will need
• Do not use to hide information that the majority of users will need
• Make the link text short and descriptive so users can quickly work out if they need to reveal it

[kelliedesigner]

• MDN (Mozilla Developer Network) web docs - The Details disclosure element

The 'details' element provides a good user experience with minimal html and can be styled.

'Summary' can be included for the link text.

Working example, click 'System requirements' below.

System Requirements

Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.

[kelliedesigner]

NN Group - Progressive Disclosure

• It must be obvious how users progress from the primary to the secondary disclosure levels
• Make the mechanics of this operation simple
• Label the button or link in a way that sets clear expectations for what users will find when they progress to the next level (strong information scent)

[kelliedesigner]

GOV.UK - Github issue on Details

• From an accessibility point of view, they are not treated as links by screen readers assistive technology so the experience is totally different.

• Native details can't be forced to display its contents when printed (unless element is already open on page load or was opened by user). This is because the visibility of the contents is toggled with open attribute in the markup, and this can't be controlled with CSS print styles.
  Ability to style <details>/<summary> to be open (e.g. for print styles) w3c/csswg-drafts#2084

• Since we're using plus and minus in the Accordion component, I thought I'd see how Details would look with the same symbols, as the behaviour is very similar:
  

[olimj]

• MDN (Mozilla Developer Network) web docs - The Details disclosure element

The 'details' element provides a good user experience with minimal html and can be styled.

'Summary' can be included for the link text.

Working example, click 'System requirements' below.

System Requirements

Other Mozilla example doesn't seem to use a pointer cursor: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

[olimj]

Cursors on the details element

HTML example doesn't use a pointer cursor either: https://html.com/tags/details/

• Without any CSS, the cursor seems to use the text cursor on the details element.
• Considering this element is interactive, the text cursor doesn't 'feel' right.
• Could we use a default or pointer cursor to indicate an interaction?