Utility list

A Utility list contains commonly used actions or tools in a single, easily accessible menu.

Copy link
Print this page
Download as PDF
Share this page

Show code Hide code

Usage

The utility list component simplifies user interaction by providing quick access to commonly used actions on content, including printing, downloading, copying, and sharing across different social media platforms.

Guidance

create a utility list that makes sense to users and matches their needs and what they'd expect in the page
use either a vertical or horizontal orientation; use a vertical utility list by default
use the horizontal option when vertical space is limited.

Don't

add too many actions
use if the webpage's purpose is straightforward and doesn't need extra features
use if it makes the user experience cluttered
add to very simple pages; it could make things too complicated.

How to

Customise the shared content adding different data attributes to the .js-share anchor link elements.

data-social: Specifies the social media platform for sharing (e.g., "facebook", "linkedin", "twitter", "mail").
data-text: For social media sharing, particularly Twitter, specifies the text content to be shared along with the URL.
data-hashtags: Specifically for Twitter sharing, provides hashtags to be included in the tweet content.
data-username: For Twitter sharing, specifies the username to be included in the tweet.
data-subject: Used for specifying the subject line in email sharing.
data-body: Specifies the content/body of the email for email sharing.

Accessibility

All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.

Utility list keyboard interaction and focus

Social share action opens via the Enter or Return keys, or by clicking the trigger element.
On open, focus moves into the social share container to navigate elements inside with the Tab key.
Dismissed by tabbing out of the social share container, pressing the Escape key, or clicking outside.
When dismissed, focus returns to the trigger element.

ARIA attributes

The trigger element has aria-expanded set to true or false based on the open state.
The trigger element has aria-controls set to the id of the social share element.
The trigger element has aria-haspopup set to the suitable role attribute of the social share, depending on the type of content.