From aa06dffdf65f15f6663159c9785432b82adde20f Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Mon, 6 Sep 2021 20:14:21 +0100 Subject: [PATCH] Disabled link cleanup (#34886) * Disabled link cleanup 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 * Turn big note into actual normal doc text Co-authored-by: Mark Otto Co-authored-by: Mark Otto Co-authored-by: XhmikosR --- site/content/docs/5.1/components/buttons.md | 20 ++++++++----- site/content/docs/5.1/components/card.md | 4 +-- site/content/docs/5.1/components/dropdowns.md | 2 +- .../content/docs/5.1/components/list-group.md | 2 +- site/content/docs/5.1/components/navbar.md | 14 ++++----- site/content/docs/5.1/components/navs-tabs.md | 30 +++++++++---------- .../content/docs/5.1/components/pagination.md | 6 ++-- .../docs/5.1/examples/blog-rtl/index.html | 2 +- .../content/docs/5.1/examples/blog/index.html | 2 +- .../docs/5.1/examples/carousel-rtl/index.html | 2 +- .../docs/5.1/examples/carousel/index.html | 2 +- .../5.1/examples/cheatsheet-rtl/index.html | 10 +++---- .../docs/5.1/examples/cheatsheet/index.html | 10 +++---- .../5.1/examples/navbar-bottom/index.html | 2 +- .../docs/5.1/examples/navbar-fixed/index.html | 2 +- .../5.1/examples/navbar-static/index.html | 2 +- .../docs/5.1/examples/navbars/index.html | 22 +++++++------- .../examples/sticky-footer-navbar/index.html | 2 +- .../docs/5.1/utilities/interactions.md | 9 ++++-- 19 files changed, 76 insertions(+), 69 deletions(-) diff --git a/site/content/docs/5.1/components/buttons.md b/site/content/docs/5.1/components/buttons.md index d62d6e2b6506..5752615a958f 100644 --- a/site/content/docs/5.1/components/buttons.md +++ b/site/content/docs/5.1/components/buttons.md @@ -85,18 +85,22 @@ Disabled buttons using the `` element behave a bit different: - ``s don't support the `disabled` attribute, so you must add the `.disabled` class to make it visually appear disabled. - Some future-friendly styles are included to disable all `pointer-events` on anchor buttons. -- Disabled buttons should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies. +- Disabled buttons using `` should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies. +- Disabled buttons using `` *should not* include the `href` attribute. {{< example >}} -Primary link -Link +Primary link +Link {{< /example >}} -{{< callout warning >}} -##### Link functionality caveat +### Link functionality caveat -The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of ``s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to `aria-disabled="true"`, also include a `tabindex="-1"` attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether. -{{< /callout >}} +To cover cases where you have to keep the `href` attribute on a disabled link, the `.disabled` class uses `pointer-events: none` to try to disable the link functionality of ``s. Note that this CSS property is not yet standardized for HTML, but all modern browsers support it. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to `aria-disabled="true"`, also include a `tabindex="-1"` attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether. + +{{< example >}} +Primary link +Link +{{< /example >}} ## Block buttons @@ -157,7 +161,7 @@ Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre {{< example >}} Toggle link Active toggle link -Disabled toggle link +Disabled toggle link {{< /example >}} ### Methods diff --git a/site/content/docs/5.1/components/card.md b/site/content/docs/5.1/components/card.md index 97bcf77d51db..3effb21d003e 100644 --- a/site/content/docs/5.1/components/card.md +++ b/site/content/docs/5.1/components/card.md @@ -309,7 +309,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen Link
  • - Disabled + Disabled
    • @@ -332,7 +332,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen Link
  • - Disabled + Disabled
    • diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md index 1668ae7bd79c..b388fb376529 100644 --- a/site/content/docs/5.1/components/dropdowns.md +++ b/site/content/docs/5.1/components/dropdowns.md @@ -628,7 +628,7 @@ Add `.disabled` to items in the dropdown to **style them as disabled**. {{< example >}} {{< /example >}} diff --git a/site/content/docs/5.1/components/list-group.md b/site/content/docs/5.1/components/list-group.md index c49541bdba22..cf6b06be9064 100644 --- a/site/content/docs/5.1/components/list-group.md +++ b/site/content/docs/5.1/components/list-group.md @@ -62,7 +62,7 @@ Be sure to **not use the standard `.btn` classes here**. A second link item A third link item A fourth link item - A disabled link item + A disabled link item {{< /example >}} diff --git a/site/content/docs/5.1/components/navbar.md b/site/content/docs/5.1/components/navbar.md index 1abfcd16c2bd..f6dbb8e612da 100644 --- a/site/content/docs/5.1/components/navbar.md +++ b/site/content/docs/5.1/components/navbar.md @@ -62,7 +62,7 @@ Here's an example of all the sub-components included in a responsive light-theme
  • - Disabled + Disabled
    • @@ -156,7 +156,7 @@ Please note that you should also add the `aria-current` attribute on the active Pricing
  • - Disabled + Disabled
    • @@ -178,7 +178,7 @@ And because we use classes for our navs, you can avoid the list-based approach e Home Features Pricing - Disabled + Disabled @@ -521,7 +521,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-hei
  • - Link + Link
    • @@ -561,7 +561,7 @@ With no `.navbar-brand` shown at the smallest breakpoint: Link
  • - Disabled + Disabled
    • @@ -591,7 +591,7 @@ With a brand name shown on the left and toggler on the right: Link
  • - Disabled + Disabled
    • @@ -621,7 +621,7 @@ With a toggler on the left and brand name on the right: Link
  • - Disabled + Disabled
    • diff --git a/site/content/docs/5.1/components/navs-tabs.md b/site/content/docs/5.1/components/navs-tabs.md index 043a04f5bbf0..e83cb0094f95 100644 --- a/site/content/docs/5.1/components/navs-tabs.md +++ b/site/content/docs/5.1/components/navs-tabs.md @@ -31,7 +31,7 @@ To convey the active state to assistive technologies, use the `aria-current` att Link
  • - Disabled + Disabled
    • {{< /example >}} @@ -43,7 +43,7 @@ Classes are used throughout, so your markup can be super flexible. Use ` {{< /example >}} @@ -88,7 +88,7 @@ Right-aligned with `.justify-content-end`: Link
  • - Disabled + Disabled
    • {{< /example >}} @@ -109,7 +109,7 @@ Stack your navigation by changing the flex item direction with the `.flex-column Link
  • - Disabled + Disabled
    • {{< /example >}} @@ -121,7 +121,7 @@ As always, vertical navigation is possible without ` {{< /example >}} @@ -162,7 +162,7 @@ Take that same HTML, but use `.nav-pills` instead: Link
  • - Disabled + Disabled
    • {{< /example >}} @@ -183,7 +183,7 @@ Force your `.nav`'s contents to extend the full available width one of two modif Link
  • - Disabled + Disabled
    • {{< /example >}} @@ -195,7 +195,7 @@ When using a ` {{< /example >}} @@ -213,7 +213,7 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ Link
  • - Disabled + Disabled
    • {{< /example >}} @@ -225,7 +225,7 @@ Similar to the `.nav-fill` example using a ` {{< /example >}} @@ -238,7 +238,7 @@ If you need responsive nav variations, consider using a series of [flexbox utili Active Longer nav link Link - Disabled + Disabled {{< /example >}} @@ -273,7 +273,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin Link
  • - Disabled + Disabled
    • {{< /example >}} @@ -299,7 +299,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin Link
  • - Disabled + Disabled
    • {{< /example >}} diff --git a/site/content/docs/5.1/components/pagination.md b/site/content/docs/5.1/components/pagination.md index 6b7c7a3da140..7e70a77e1496 100644 --- a/site/content/docs/5.1/components/pagination.md +++ b/site/content/docs/5.1/components/pagination.md @@ -58,7 +58,7 @@ While the `.disabled` class uses `pointer-events: none` to _try_ to disable the