Open Bug 1854008 Opened 9 months ago Updated 3 months ago

Improve accordion card summary a11y

Categories

(Toolkit :: UI Widgets, enhancement, P3)

Product:
Toolkit
Component:
UI Widgets
Type:
enhancement

Tracking

()

People

(Reporter: tgiles, Unassigned)

References

Details

(Whiteboard: [recomp])

The bug summary should be updated once we decide on an approach. The clickable div approach is the first I thought of, but there may be other valid solutions too.

As part of Bug 1846846, I disabled two rules in our Storybook specifically for the accordion card of moz-card.stories.mjs. I would like to re-enable those rules by changing the accordion heading button to a clickable div.

Normally changing a button with its built-in semantics to a clickable div is a bad idea. In this case, all the button does is toggle the <details> element of the accordion card type. Currently it's not even focusable since it has tabindex="-1" but I think it's still part of the accessibility tree. The button is just another click target for mouse users, since the <details> element can be focused and opened/closed with keyboard and mouse so there's no degraded user experience as far as I can tell.

We should work with #accessibility-frontend-reviewers on this.

Summary: Change accordion heading button to a clickable div → Improve accordion card summary a11y
Whiteboard: [fidefe-reusable-components] → [recomp]
You need to log in before you can comment on or make changes to this bug.