Multi select (in tables)

[kelliedesigner]

The multi select component is live in the MoJ Design System.

Use this discussion to suggest changes and improvements to this component.

Variation

Product created in

OPG Sirius Supervision workflow

About the product

OPG Sirius Supervision workflow is a product being developed in OPG to replace its legacy system.

Who the users are

It will be used by staff of the OPG to allow them to supervise deputies appointed by the court of protection.

User need

There is a need for users to be able to clearly see what row they have selected in a list of information.

Using the existing multi select component

Before designing a variation, the team first followed the guidance of the multi select component in the MOJ Pattern Library.

Research showed users need clear feedback of what rows they have selected. The existing component doesn't provide any feedback.

Designing a variation

The team used their research to design a variation of the filter component that would meet the user need.

This variation includes a blue tint and a left blue border to indicate selected rows

Research on this variation

This variation has been tested with users and iterated and improved based on research.

When to use

This variation would be added to the existing component rather than be for a separate use case.

Contribute

Things we don’t know enough about

Accessibility testing

Once we have a production version ready of this variation we will conduct accessibility testing.

[cazzzac]

On NHS Jobsite, we're tossing up as to whether to use a 'Select all' text box in the table, or a Checkbox.

[CarolineS-QA]

At HMRC for Agent Services, when using the multi-select in the table header we had the following raised during an a11y audit

Issue: Column heading for selectable checkboxes in table
WCAG 2.1 violation: 1.3.1 Info and Relationships

• 'select all' marked up as column heading, that doesn't represent whole column content and misleading with causing additional noise and for screen reader users
• column with checkboxes missing heading (A 1.3.1)
• the "Select all" checkbox does not have a visible label so some users would not know the purpose of this. Voice recognition software users would not know what to read out to select this (as a workaround, they can use the numbers command to do this). User research will identify if this is an issue for your users.

Resolve: Investigate possible solutions, liaise with DIAS
Column heading need text that describes purpose of elements in column, possibly 'Select clients' and display 'Select all' for checkbox.

Unfortunately, it seems taking the select all out the heading is their solution, although this goes against the established user expectations for select all. The fact 'select all' is read out for each checkbox below is definitely a big annoyance for screenreaders (header - row content). An update so the multi-select is not marked up in the header, and some hidden content so the header is not empty is something we've considered, but erring on the side of caution.

Note also for labelling the checkboxes in the first column, if using information in the second column as a label - it's recommended to possibly combine them into 1 column. The checkboxes on the lefthand side must have some label, but you want to avoid repetition with the table (and also not overload the label with the entire row's contents). Any other research or patterns for what information is best for labels would be welcome here!

[adrian-yee]

we've recently crossed the same issue and chosen to implement this pattern https://design-system.agriculture.gov.au/patterns/selectable-table-with-batch-actions

[hvekriya]

@adrian-yee great pattern. Just wanted to ask how it'd work from accessibility perspective.

[adrian-yee]

Hey Vekriya, we identified the same two issues in our research:

• 'select all' marked up as column heading, that doesn't represent whole column content and misleading with causing additional noise and for screen reader users
• column with checkboxes missing heading (A 1.3.1)
  We place the checkbox input above the table and use a standard table head of 'Select' to represent the entire table column. The only negative is the space above the table required for the 'Select all' input.
  We are about to do another round of usability testing with people living with disabilities (low vision, no vision, neuro-divergent and dexterity) so I can report back if we find any problems.