Disclosure

Disclosures expand when activated
to reveal additional text.

A disclosure provides people with additional information, which can be expanded or collapsed to allow people to focus on the information that they need.

There are other components that can be used for hiding content, such as Accordions for hiding multiple pieces of content or expanding on existing content, and Tabs for multiple sections of distinctive content.

Use for content that's extra to the main content and that some users may want to know. For example, 'How carbon footprints are calculated'.

  • Never use a disclosure for essential information as it won't be seen by most users.
  • If you're using multiple disclosure elements, consider using an Accordion instead.

Live example

Storybook failed to load. Please connect to the VPN to access.

Availabile platforms

Platform

Available

Figma

v1+

Web (@ovotech/element)

v1+

App (@ovotech/element-native)

v1+


How to use

Label

Be plain and direct. Do not phrase it as a question.

Inner content

This is a block of text, ranging from a few words to a paragraph. If the content is no longer than the label, consider using a simple text component instead.

Toggle button

The disclosure is an uncontrolled component and manages its own state. It will link the component toggle button to the content and set the relevant aria attributes.

Expanding by default

The disclosure component can be set as expanded by default by setting the expanded prop to true, but if you're doing this it's highly likely the content would be better in a Text or DescriptionList component.

Ref to 606:8953

Properties

These are the properties for anyone implementing this component and code.

Names

Values

Default

title (required)

ReactNode

 

expanded

Boolean

false

onToggle
(expanded) => null

Function

 

...

JSX.IntrinsicElements["button"]

 


Checking for accessibility

User stories

The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.

  • As someone using the component, I want to be able to understand the purpose of the disclosure based on its visual appearance.
  • As someone with a cognitive disability, I want to be able to understand the content within a disclosure from its title alone, so that I don't have to expand and search through the disclosure to understand if it's relevant to me.
  • As a keyboard-only user, I want to be able to expand the disclosure in order to find the information that I need.
  • As a screen reader user, I want to be able to know that I can interact with the disclosure and whether its currently expanded or collapsed.

Test steps

Use these steps to check that the disclosure component has been implemented correctly:

  1. Turn on a screen reader
  2. Navigate to each instance of the disclosure component using the Tab key
  3. Check that the disclosure's meaningful title is announced, as well as whether the disclosure is expanded or collapsed
  4. Using the Space or Enter key, toggle the disclosure open, and then check that content within it is announced by the screen reader as expected
  5. Using the Space or Enter key, toggle the disclosure closed, and then check that the now hidden content within the disclosure is not announced by the screen reader as expected

External resources