Navigation Links: Disclosure Pattern

More information on the ARIA disclosure pattern.

Keyboard Features

• Button open and closes the list of links using space or enter key.
• Pressing the esc key when focus is on a link closes the container element and moves focus back to the button..

ARIA Markup

• aria-expanded="true" on the button when the container is open.
• aria-expanded="false" on the button when the container is closed.
• aria-controls="id-container" on the button to reference the id of container element that opens and closes.

High Contrast Support

• When button does not have focus, CSS border property is set to 1px.
• When button does have focus, CSS border property is set to 3px and padding is reduced by 2px.
• When a element does not have focus, CSS border property is set to none.
• When a element does have focus, CSS border property is set to 2px and padding is reduced by 2px.