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

We shouldn't be putting aria-* attributes on custom elements #1954

Open
svanherk opened this issue Dec 21, 2021 · 3 comments
Open

We shouldn't be putting aria-* attributes on custom elements #1954

svanherk opened this issue Dec 21, 2021 · 3 comments

Comments

@svanherk
Copy link
Contributor

axe-core version 4.3.4 caused a number of our tests to start breaking because we place aria-expanded on things like d2l-button, d2l-subtle-button, etc. We then pass down the value into the aria-expanded attribute on the actual native button. Even though this works from a screenreader POV, we really should be using something like just expanded here. This may be an issue for other aria-* attributes as well.

The change was reverted in 4.3.5 after discussion in this issue: dequelabs/axe-core#3241
It's still unknown whether this will be added back in version 4.4.0, or if it will be added as a warning. But we should go through and fix these when we can to avoid lots of warnings (in both core tests and everywhere that uses d2l-button tests) or having to lock our axe-core version everywhere.

@svanherk
Copy link
Contributor Author

Update - axe-core v4.4.0 (releasing at the end of this month) will add back the violation for non-global ARIA attributes on elements with a role. Custom elements will report as Needs Review rather than a failure.

So this shouldn't fail our builds (unless we have violations on native elements), and we should get a log to help us track down places we need to fix.

@KaiPrince
Copy link
Contributor

Does this include role?

@svanherk
Copy link
Contributor Author

svanherk commented Jul 4, 2022

I believe role is fine and sometimes necessary, and we've definitely leveraged that in a few places. role and any global aria properties won't fail the tests, but I still think we'd want to avoid the global aria-* properties if all we're doing is passing them down to the web component. Like if we want to put an optional aria-live on an internal element, we should have the custom element's property just be live (or whatever).

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

No branches or pull requests

2 participants