Usage | Anatomy | Visual style | Editorial | Behaviour | Accessibility | Related components
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
The Disclosure component lets users show and hide sections of related content on a page. Content within disclosures are generally considered supporting content that only a subset of users will find relevant.
Usage| Table of Contents | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
Usage
| Tip |
|---|
Do’s
|
|
| Warning |
|---|
Dont’s
|
|
|
Anatomy
| Warning |
|---|
Insert image here |
n/aItem | Component type | Content type | Notes | |
|---|---|---|---|---|
1 |
List item
Text
Open icon | SVG |
| ||||||||
2 | Item title |
Text |
3
Item content
RTA
Visual style
| ||||||||||
3 | Close icon | SVG |
| |||||||
4 | Disclosure content | Any component | Any |
|
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.
Disclosures are individually controlled with a toggle between expanded and collapsed.
Disclosures 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 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, all disclosures are the disclosure is expanded by default and expand/collapse controls are not present.
Accessibility
Related components
tbd
To be added:
<section> Use when the drawer title is a semantic heading. Wrapping the content in a section means that we can programmatically determine headings and this will make the heading a child of the heading that came before (e.g. a section header H2)
<summary> Use when the drawer title is not a heading. Use also when you want expand/collapse functions to work without javascript and complex CSS fallbacks (it will even expand/collapse in HTML)
Haven’t checked if there are any CSS styling constraints on summary, or any browser issues that might get in the way.
Some accessibility considerations with summary: https://adrianroselli.com/2019/04/details-summary-are-not-insert-control-here.html
<div> <dl> Thought in theory lists can have single items, its probably best we keep <dl> to an accordion context.
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.