Accordion open/close toggle keyboard interaction

Description

Space or enter key on the accordion header toggles (expands = opens or collapses = closes) the accordion section.

There was a bug report on slack that cursor right should be used instead.

CSP Request Details

None

CSP Rejection Details

None

Potential Workaround

None

Checklist

hide

TestRail: Results

Activity

Show:

Julian Ladisch September 12, 2019 at 5:11 PM

Other names of the accordion control are details disclosure elements, disclosure control,
disclosure widget, collapsible sections, expandable sections.

This is described in the Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) Authoring Practices 1.1 document https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure :

Keyboard Interaction
When the disclosure control has focus:

  • Enter: activates the disclosure control and toggles the visibility of the disclosure content.

  • Space: activates the disclosure control and toggles the visibility of the disclosure content.

Others also use Enter and Space:
https://www.scottohara.me/blog/2018/09/03/details-and-summary.html
https://design-patterns.tink.uk/disclosure1/index.html

Therefore I propose to keep the existing Enter and Space keyboard navigation for the accordion control.

Won't Do

Details

Assignee

Reporter

Priority

Development Team

Stripes Force

TestRail: Cases

Open TestRail: Cases

TestRail: Runs

Open TestRail: Runs

Created September 12, 2019 at 5:09 PM
Updated February 27, 2020 at 10:45 PM
Resolved February 27, 2020 at 10:45 PM
TestRail: Cases
TestRail: Runs