ba-details
ba-details is used for standalone disclosure of secondary information
Figma
GitHub
Storybook
Picking between ba-details and ba-accordion
Use ba-accordion when:
- The text in the closed state acts as a heading for the content it contains
- You need something more prominent
- Grouping many collapsible sections
Use ba-details when:
- There is a small amount of content to be disclosed
- You need something less prominent
- The collapsible section is standalone
Live Demo
Details content
<ba-details summary="Summary">
<ba-content>
<p>Details content</p>
</ba-content>
</ba-details>Guidelines
A few contextual examples of where to use this component include:
- Read more
- Terms and conditions
- Summary of flight details
- Clarifying why information is needed on an input
This will help users decide whether to interact with this component. For example: "Read more", "Terms and Conditions", "Why we need this information", etc
When there are many ba-details grouped together it's tempting to only allow one accordion to be open at a time. However this does not provide the best user experience:
- On mobile devices auto closing can interfere with the scroll behavior
- Automatically moving the user up and down the page can be disorientating
- Increases cognitive load of having to remember what was in a closed accordion
- It makes it hard to compare the contents of multiple ba-details
Further Reading:
The content in ba-details is intended for information that not every user needs. Therefore, it should remain closed until the user interacts with the component.
If you are considering opening ba-details by default, the content might be better placed directly on the page instead of inside the ba-details
Accessibility
In high contrast mode:
- The icon and text use the browser default colour for the summary element
- The keyline is the same colour as the current text colour
| Key | Element | State | Behaviour |
|---|---|---|---|
Enter |
<summary> |
Summary has focus | Toggles the open / close state of ba-details |
Space |
<summary> |
Summary has focus | Toggles the open / close state of ba-details |
Voiceover does not announce the expanded or collapsed state in Safari
This is a known bug and can be found below on the webkit site
https://bugs.webkit.org/show_bug.cgi?id=252223
Issues with moving between multiple ba-details with Voiceover
When trying to tab between multiple ba-details with Voiceover in Safari, if a ba-details has been opened and then closed, you cannot navigate to the next ba-details. Instead you get moved to the first one in the list.
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
summary(required) |
summary |
Text to display in the interactive part of the component | string |
undefined |
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | <ba‑content>, <ba‑flex>, <ba‑form‑group>, <ba‑form‑group‑dropdown>, <ba‑grid>, <ba‑input>, <ba‑input‑date>, <ba‑input‑datepicker>, <ba‑input‑email>, <ba‑input‑number>, <ba‑input‑password>, <ba‑input‑phone‑number>, <ba‑input‑stepper>, <ba‑input‑text>, <ba‑input‑textarea>, <ba‑input‑typeahead>, <ba‑input‑upload>, <ba‑radio‑group>, <ba‑select>, <fieldset>, <form> |
Permitted ARIA roles
- none
Parent components
ba-details can be slotted into:
<ba‑card><ba‑card‑segmented><ba‑flex><ba‑form‑group><ba‑grid><ba‑hero><ba‑message><ba‑message‑global><ba‑page‑segment>
Usage
Basic usage
In most scenarios ba-details will consist of a short descriptive summary and a few lines of content
<ba-details summary="Short descriptive text">
<ba-content>
<p>Hidden content to be shown when opened</p>
</ba-content>
</ba-details>