- Use as navigation for exploration and task completion
- Use to give users a list of different actions to choose from
- Use when displaying a customers' bill history as a list
- Don't use for conversion-optimised journeys, e.g. selling a product or service. This component does not draw people in, instead look at CTA or ActionCard components.
- Don't use when there are one or two clear actions the user should take. Instead use CTA components.
Live example
Default
Availabile platforms
|
Platform |
Available |
|---|---|
|
Figma |
v3+ |
|
Web (@ovotech/element) |
v3.1.0+ |
|
App (@ovotech/element-native) |
v3.1.0+ |
How to use it
Writing an action in a list
- Imagine finishing this sentence in as few words as possible: "On the next page, you’ll find [name of product]"
- Now see if you can write that product name in even fewer words
- use only nouns or only verb phrases in a list - for example 'Change your direct debit details', 'Your energy tariff'
- make sure your links share a similar focus, and name that focus with a 1- to 2-word header
- be concise
- check it will make sense to a screenreader – can this copy stand alone with no body copy and still make sense?
- vary the tone link to link – the entire group should feel cohesive
- use more than 4 tertiary links together
- use a question
Tone of voice
Dial up our straight-talking and inclusive traits - find out more in our tone of voice guidelines.
Examples
Inverted
Setting this property on the list means that it is passed onto the children, and (providing these are Action components as intended) means they don't need the property setting individually.
Properties
ActionList
|
Name |
Values |
Default |
|---|---|---|
|
children |
ReactNode | ReactNode[] |
|
|
inverted (optional) |
Boolean |
false |
|
... |
JSX.IntrinsicElements["ul"] |
|
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 a screen reader user, I want to be able to know the number of list items present, and the current position of the item that I am reading.
- As someone with a cognitive disability, I want to be able to easily understand the purpose of the control.
- As someone with a motor disability, I want to be able to easily select the correct control.
- As a screen reader user, I want to be able to understand the purpose of the control and whether it will complete an action on the same page, or navigate me elsewhere.
- As a keyboard-only user, I want to be able to navigate to the controls using the Tab key.
- As a keyboard-only user, I want to be able to activate the links using the Enter key.
- As a keyboard-only user, I want to be able to activate the buttons using the Space key.
Test steps
Use these steps to check that the Action list component has been implemented correctly:
- Turn on a screen reader.
- Navigate through the action list links using the Tab key.
- Verify that when reading list content, that the number of list items and the position of the list item being announced, is announced.
- Verify that the visible label for each link is included in the name announced by the screen reader.
- Verify that any links can be activated using the Enter key.
- Verify that any buttons can be activated using the Space key.
Related components