ActionList

Action list is for providing multiple
action or option links structured
as a group.

  • 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

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

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

  1. Imagine finishing this sentence in as few words as possible: "On the next page, you’ll find [name of product]"
  2. 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

Moving home

Moving checklist

Plans and pricing

Offers for movers

OVO support

There’s even more to see

Help me change my address

New offers for new homeowners

Help me move my utilities

How green is my new grid?

 

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.

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

Properties

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:

  1. Turn on a screen reader.
  2. Navigate through the action list links using the Tab key.
  3. Verify that when reading list content, that the number of list items and the position of the list item being announced, is announced.
  4. Verify that the visible label for each link is included in the name announced by the screen reader.
  5. Verify that any links can be activated using the Enter key.
  6. Verify that any buttons can be activated using the Space key.

Related components