Implementation

Implementation

The Details component uses the native <details> and <summary> HTML elements, which have built-in accessibility support in all modern browsers. The guidance below applies when the component is customised, when native browser behaviour is overridden with JavaScript, or when consuming teams implement a visually similar pattern using non-native elements.

ARIA attributes

The native <details> and <summary> elements do not require additional ARIA attributes to function accessibly, browsers handle role and state exposure automatically. The following ARIA guidance applies when the native implementation is extended or replaced.

If you recreate this pattern with non-native elements:

• Apply role="button" or use a <button> element as the trigger
• Apply aria-expanded= "true|false" on the trigger to reflect panel state
• Apply aria-controls="[panel-id]" on the tirgger, referencing the panel
• Apply id to the panel element matching the aria-controls value
• Apply aria-labelledby="[trigger-id]" on the panel to assosciate it with its trigger.

Keyboard interactions