Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accordion: Missing role on .accordion-collapse ? #37591

Closed
2 tasks done
louismaximepiton opened this issue Dec 6, 2022 · 0 comments · Fixed by #37718
Closed
2 tasks done

Accordion: Missing role on .accordion-collapse ? #37591

louismaximepiton opened this issue Dec 6, 2022 · 0 comments · Fixed by #37718

Comments

@louismaximepiton
Copy link
Member

Prerequisites

Proposal

I don't really what's the best here, but I think we should either add a role="region" or remove our aria-labelledby="*" from our .accordion-collapse.

Motivation and context

There is one reason that made me think of this, and several things that make me struggle on the solution to choose, I'll try to present them here.

Reason

Some observations on aXe DevTools inside my browser. It raises this:
image

Add role="region"

I must admit that my heart is going to this solution since W3C seems to recommand it in their example page (here).

That said, it seems that several front-end framework/design system encourage to use this solution everytime such as Material Angular and Adobe.

As an alternative maybe we could use a <section> as well as in Aditus.

Remove aria-labelledby="*"

On the other side, I could find several sources on web that doesn't implement the role="region". I feel like it's more personal projects, but there are also some front-end frameworks that display it such as Getuikit.

If we remove this one, maybe we should add a paragraph to mention that this role depends on the content whether it's significant or not ?

patrickhlauke added a commit that referenced this issue Dec 25, 2022
Explicit labelling (which then would also benefit from a `role="group"` or similar role) is only optional, and not really appropriate just for a cheatsheet

https://www.w3.org/WAI/ARIA/apg/patterns/accordion/

Closes #37591
@patrickhlauke patrickhlauke moved this to To do in v5.3.0 Dec 26, 2022
@patrickhlauke patrickhlauke removed this from v5.3.0 Dec 26, 2022
patrickhlauke added a commit that referenced this issue Dec 26, 2022
…37718)

Explicit labelling (which then would also benefit from a `role="group"` or similar role) is only optional, and not really appropriate just for a cheatsheet

https://www.w3.org/WAI/ARIA/apg/patterns/accordion/

Closes #37591
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants