Utility list

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

Guidance
Demo & 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.

It's important to create a utility list in a way that makes sense to users, matching their needs and what they'd expect in the page.

The utility list can be either vertical or horizontal in its orientation. By default, a utility list is vertical. The horizontal option should be used for when vertical space is limited.

When to avoid

While a utility list can be helpful in many cases, there are situations where it might be best to avoid.

Do not:

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 meet WCAG 2.1 AA accessibility guidelines.

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.