| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
The Disclosure component lets users show and hide sections of content on a page. Content within disclosures are generally considered supporting content that only a subset of users will find relevant.
Usage
Do’s
Use disclosures when you want to provide relevant or related information without cluttering the page.
Dont’s
Don’t use a disclosure when content is relevant to all users.
Don’t use disclosures in list. Use Accordion instead.
Don’t use a disclosure when content within the accordion is very complex or can cause slow page loads.
Anatomy
| Warning |
|---|
Insert image here |
| Item | Component type | Content type | Notes |
|---|---|---|---|---|
1 | List item |
| Text |
|
2 | Item title |
| Text |
|
3 | Item content |
| RTA |
|
Visual style
n/a
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 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, all disclosures are 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> 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.
<dl> Thought in theory lists can have single items, its probably best we keep <dl> to an accordion context.