Porsche Design System

Multi Select

Table of Contents

Accessibility support
Development considerations
Integration examples
Tests

Accessibility support#

Keyboard

Combobox

Key / state

Function

Down Arrow Up Arrow Space

- Opens the listbox if it is not already displayed without moving focus or changing selection.
- DOM focus remains on the combobox.

Listbox

Key / state

Function

Down Arrow Up Arrow

Moves visual focus to the next/previous option.

Home End

Moves visual focus to the first/last option.

ESC

Closes listbox

Enter

Selects an option

ARIA enhancements

External ARIA provided by the aria property:

Use the aria property to pass supported attributes to the native control inside the shadow DOM. Prefer a visible label for the accessible name. Use aria-label when the label is hidden or missing, and aria-description for extra context that should not replace the name. Do not use aria-label to replace a different visible label (WCAG 2.5.3).

ARIA

Usage

aria-label

Defines an accessible name when the visible label is insufficient or hidden; prefer a visible label for most cases.

aria-description

Provides additional context for assistive technologies without replacing the accessible name.

Internal ARIA that is managed by the component:

ARIA

Usage

aria-labelledby="IDREF"

On the listbox: references the field label as the accessible name.

aria-describedby="IDREF"

References the accessible description and status messages of the combobox.

aria-label="STRING"

On options without a value: fallback accessible name (Empty value).

role="status", role="alert"

When message and state prop change, the status message is announced.

aria-expanded="BOOLEAN"

Indicates that the listbox element is displayed/hidden.

aria-controls="IDREF"

Identifies the element that serves as the listbox.

aria-hidden="true"

If required attribute is set, the visible indicator is hidden from assistive technologies.

aria-multiselectable="true"

Indicates that more than one item from the current selectable descendants can be selected.

aria-autocomplete="list"

Indicates that user input effects results of listbox.

aria-haspopup="listbox"

Indicates that the combobox will open a listbox.

aria-required="true"

Indicates if the element is required.

Development considerations#

Disabled state

In general, avoid using the disabled state. Disabled elements are no longer focusable and may be missed by screen reader users. They can also confuse sighted users if the reason they are disabled is not made clear.

Common do's and don'ts

Do pass extra labelling through the aria prop (aria-label, aria-description).

Do provide a clear, persistent label for what the selection controls.

Do use meaningful option text so choices are understandable out of context.

Do use the component state/message API so validation and status changes are announced.

Don't use a prompt option or adjacent text as a substitute for a field label.

Don't use hide-label without an accessible name.

Don't add native aria-* attributes directly on the component host.

Integration examples#

ARIA on component host vs aria prop

❌ Anti-pattern

<p-multi-select name="options" label="Optional extras" aria-label="Accessible name" aria-description="Additional context">
  <p-multi-select-option value="option-a">
    Option A
  </p-multi-select-option>
</p-multi-select>

✅ Recommended

<p-multi-select name="options" label="Optional extras" aria="{'aria-label': 'Accessible name', 'aria-description': 'Additional context'}">
  <p-multi-select-option value="option-a">
    Option A
  </p-multi-select-option>
</p-multi-select>

Prompt option used instead of a label

❌ Anti-pattern

<p-multi-select name="features">
  <p-multi-select-option value="">
    Select features
  </p-multi-select-option>
  <p-multi-select-option value="sport">
    Sport Chrono Package
  </p-multi-select-option>
</p-multi-select>

✅ Recommended

<p-multi-select label="Optional features" name="features" description="Select all features for your configuration.">
  <p-multi-select-option value="sport">
    Sport Chrono Package
  </p-multi-select-option>
  <p-multi-select-option value="audio">
    BOSE Surround Sound
  </p-multi-select-option>
</p-multi-select>

Hidden label without accessible name

❌ Anti-pattern

<p-multi-select name="features" hide-label="true">
  <p-multi-select-option value="sport">
    Sport Chrono Package
  </p-multi-select-option>
</p-multi-select>

✅ Recommended

<p-multi-select label="Optional features" name="features" hide-label="true">
  <p-multi-select-option value="sport">
    Sport Chrono Package
  </p-multi-select-option>
</p-multi-select>

Validation feedback via state and message API

❌ Anti-pattern

<p-multi-select label="Optional features" name="features" aria-invalid="true" message="Required">
  <p-multi-select-option value="sport">
    Sport Chrono Package
  </p-multi-select-option>
</p-multi-select>

✅ Recommended

<p-multi-select label="Optional features" name="features" required="true" state="error" message="Select at least one feature to continue.">
  <p-multi-select-option value="sport">
    Sport Chrono Package
  </p-multi-select-option>
  <p-multi-select-option value="audio">
    BOSE Surround Sound
  </p-multi-select-option>
</p-multi-select>

Tests#

Automated

Technology

Support

AXE-Core (WCAG 2.2 AA, Best-Practice)

✅

High-Contrast Mode (light/dark)

✅

Text-Zoom (200%)

✅

Manual

Technology

Support

Keyboard

✅

Screen reader (VoiceOver, NVDA)

✅ (Note: Though Safari supports ariaActiveDescendantElement the active option doesn't get announced in VoiceOver)