Versions Compared

Version Old Version 4 New Version Current
Changes made by

Nick Harris

Nick Harris

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
panelIconId293035db-a48a-4d92-a968-8e1e6c7285d6
panelIcon:Figma:
panelIconText:Figma:
bgColor#F4F5F7

Figma component link

Panel
panelIconIdefa8ba60-1dab-4e63-8948-4ff4366ce32a
panelIcon:Storybook:
panelIconText:Storybook:
bgColor#F4F5F7

Storybook component

The Disclosure component lets users show and hide sections of related content on a page.

Table of Contents
minLevel1
maxLevel2
indent0
stylecircle
separatorpipe

Usage

Tip

Do’s

  • Use a disclosure to hide a single piece of related content.

  • Use a disclosure when the content is relevant to a small subset of users.

Warning

Dont’s

  • Don’t use a disclosure when content is relevant to all users.

  • Don’t use a disclosure when content within the disclosure is very complex or can cause slow page loads.

Anatomy

Image Added

Item

Component type

Content type

Notes

1

Open icon

Icon

SVG

Status
colourRed
titleMandatory

2

Item title

Typography

Text

Status
colourRed
titleMandatory

3

Close icon

Icon

SVG

Status
colourRed
titleMandatory

4

Disclosure content

Any component

Any

Status
colourRed
titleMandatory

Visual style

The disclosure component has no additional visual styles but can be considered a sibling of the Accordion component. The disclosure’s style is visually less prominent by reducing size and removing borders.

Disclosures will generally be restricted to a single draw and is used to house peripheral content that isn’t relevant to all users. Two examples of this are product ingredient pack details and video transcripts.

If you have a lot of related content like an FAQ, we recommend you use the Accordion.

Editorial

  • Keep disclosure titles short, but long enough to clearly communicate what a user can expect to find inside. This is especially required for unsighted users.

Behaviour

  • Disclosure items are collapsed by default.

  • Disclosure’s includes hover, focus and disabled and active states. CSS ‘focus-visible’ will remove visual focus for mouse-controlled accordions.

  • Mouse click or touch on the Disclosure title will toggle between expand and collapse.

  • Once focused, Enter or Space on a keyboard will toggle expand or collapse.

  • Where Javascript is disabled, the disclosure is expanded by default and expand/collapse controls are not present.

Accessibility

  • The control is a <button> which toggles aria-expanded between “true” and “false”.

  • The icon is deliberately placed before the title (left on LTR languages and right on RTL languages) to aid users of screen magnifiers, who may not be able to see the status if it was right aligned on a wide disclosure.

  • Collapsed content shouldn’t be visible to users or screen-readers. (e.g. display:none).

  • Disclosures can be configured with multiple semantic elements.

    • <div> Use when the drawer title is not a heading (e.g. a paragraph). Using section here would create a section without a heading which is bad practice.

    • <details> An accessible html element that creates a disclosure widget and wraps the item title in a <summary> tag.

    • <dl> Most appropriately used for FAQ lists and although it looks the same, it should be noted that the drawer titles will not be headings semantically and so won't be as easily navigable by screen-reader users, but the list will appear to them.