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

v4: Disabled link cleanup (backport) #34924

Merged
merged 1 commit into from
Sep 9, 2021

Conversation

patrickhlauke
Copy link
Member

manual backport of #34886

per https://www.w3.org/TR/html-aria/#docconformance

It is NOT RECOMMENDED to use aria-disabled="true" on an a element with an href attribute.

NOTE
If a link needs to be "disabled", remove the href attribute.

This PR removes the unnecessary href="#", tabindex="-1", and aria-disabled="true" from disabled links in both docs pages and examples. aria-disabled="true" is kept for disabled link-based buttons (that have role="button") as there it's appropriate to use (you want to convey to assistive technologies that this thing you're claiming is a button is also disabled at the moment)

Further, the PR extends the "Link functionality caveat" to show the "proper" way (removing href and adding .disabled class only) to disable a link, but then explains what to do if that's not possible (and then keeps an example with all the traditional href="#" tabindex="-1" aria-disabled="true", but explains clearly that it's not ideal). Same sort of explanation is also added to the pointer event utilities page

manual backport of #34886

per https://www.w3.org/TR/html-aria/#docconformance

> It is NOT RECOMMENDED to use `aria-disabled="true"` on an `a` element with an `href` attribute.
>
>NOTE
>If a link needs to be "disabled", remove the `href` attribute.

This PR removes the unnecessary `href="#"`, `tabindex="-1"`, and `aria-disabled="true"` from disabled links in both docs pages and examples. `aria-disabled="true"` *is* kept for disabled link-based buttons (that have `role="button"`) as there it's appropriate to use (you *want* to convey to assistive technologies that this thing you're claiming is a button is also disabled at the moment)

Further, the PR extends the "Link functionality caveat" to show the "proper" way (removing `href` and adding `.disabled` class only) to disable a link, but then explains what to do if that's not possible (and then keeps an example with all the traditional `href="#" tabindex="-1" aria-disabled="true"`, but explains clearly that it's not ideal). Same sort of explanation is also added to the pointer event utilities page
@XhmikosR XhmikosR requested a review from mdo September 8, 2021 14:54
@XhmikosR XhmikosR added the docs label Sep 8, 2021
@XhmikosR XhmikosR merged commit f4a1a35 into v4-dev Sep 9, 2021
@XhmikosR XhmikosR deleted the v4-remove-not-recommended-aria-disabled branch September 9, 2021 11:49
@patrickhlauke patrickhlauke restored the v4-remove-not-recommended-aria-disabled branch November 30, 2021 00:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants