Multi Select Dropdown Proof of Concept

This is a proof of concept for a multi-select dropdown list.

It comprises a conventional group of checkboxes inside a hide / reveal component that is built using <details> and <summary> elements. Both components have been used as specified in the GOV.UK Design System.

Design notes

Essential

The <summary> element must have an "aria-label" attribute that contains all the words in the <summary> element (i.e. "Select" in the first example) AND all the words in the label above it (i.e. "Choice of desserts" in the first example). This is necessary to meet WCAG 2.1 success criterion 2.5.3 (label in name).
The role="button" attribute should not be needed on the <summary> element, but it is essential because Dragon voice recognition software does not recognise the <summary> element otherwise (even though it should).
Since this is a proof of concept, we have not applied all the element styles and focus indicators required by the GOV.UK Design System. These will need to be implemented correctly in production.

In both designs we recommend that a JavaScript event handler is added to close the dropdown if the focus is moved away from the <summary> element or the checkboxes.
A further enhancement (although not a WCAG requirement) would be to add a JavaScript event handler to place the focus on the <summary> element when the label above it is clicked. This emulates the behaviour of a real combobox, assuming that it is programmatically associated with its text label.

Implementations

Following content is displaced when dropdown is open

Choice of desserts

Select

This is more content that follows the dropdown. This is more content that follows the dropdown. This is more content that follows the dropdown. This is more content that follows the dropdown. This is more content that follows the dropdown. This is more content that follows the dropdown.

Following content is overlaid when dropdown is open

This design is identical except that the <div> element containing the checkboxes has the attribute "position: absolute", so the following content does not move when the dropdown is open.

Choice of fruit