From f4a1a35cf245566018b109af7b56d69cd6f13975 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Thu, 9 Sep 2021 12:49:06 +0100 Subject: [PATCH] v4: Disabled link cleanup (#34924) 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 --- site/content/docs/4.6/components/buttons.md | 18 ++++++----- site/content/docs/4.6/components/card.md | 4 +-- site/content/docs/4.6/components/dropdowns.md | 2 +- .../content/docs/4.6/components/list-group.md | 2 +- site/content/docs/4.6/components/navbar.md | 14 ++++----- site/content/docs/4.6/components/navs.md | 30 +++++++++---------- .../content/docs/4.6/components/pagination.md | 6 ++-- .../content/docs/4.6/examples/blog/index.html | 2 +- .../docs/4.6/examples/carousel/index.html | 2 +- .../docs/4.6/examples/jumbotron/index.html | 2 +- .../4.6/examples/navbar-bottom/index.html | 2 +- .../docs/4.6/examples/navbar-fixed/index.html | 2 +- .../4.6/examples/navbar-static/index.html | 2 +- .../docs/4.6/examples/navbars/index.html | 20 ++++++------- .../4.6/examples/starter-template/index.html | 2 +- .../examples/sticky-footer-navbar/index.html | 2 +- 16 files changed, 58 insertions(+), 54 deletions(-) diff --git a/site/content/docs/4.6/components/buttons.md b/site/content/docs/4.6/components/buttons.md index a544823198d7..9df1fa12e940 100644 --- a/site/content/docs/4.6/components/buttons.md +++ b/site/content/docs/4.6/components/buttons.md @@ -101,18 +101,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. In browsers which support that property, you won't see the disabled cursor at all. -- 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, add a `tabindex="-1"` attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality. -{{< /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 >}} ## Button plugin diff --git a/site/content/docs/4.6/components/card.md b/site/content/docs/4.6/components/card.md index 8108d21b673f..ea784dc99461 100644 --- a/site/content/docs/4.6/components/card.md +++ b/site/content/docs/4.6/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/4.6/components/dropdowns.md b/site/content/docs/4.6/components/dropdowns.md index 99d9e1d85cb7..661a95952238 100644 --- a/site/content/docs/4.6/components/dropdowns.md +++ b/site/content/docs/4.6/components/dropdowns.md @@ -580,7 +580,7 @@ Add `.disabled` to items in the dropdown to **style them as disabled**. {{< example >}}
    Regular link - Disabled link + Disabled link Another link
    {{< /example >}} diff --git a/site/content/docs/4.6/components/list-group.md b/site/content/docs/4.6/components/list-group.md index 5f57d1625c6a..f1e41707a14a 100644 --- a/site/content/docs/4.6/components/list-group.md +++ b/site/content/docs/4.6/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/4.6/components/navbar.md b/site/content/docs/4.6/components/navbar.md index 4e670e11c11c..2235eb2a1606 100644 --- a/site/content/docs/4.6/components/navbar.md +++ b/site/content/docs/4.6/components/navbar.md @@ -61,7 +61,7 @@ Here's an example of all the sub-components included in a responsive light-theme
  • - Disabled + Disabled
    • @@ -135,7 +135,7 @@ Active states—with `.active`—to indicate the current page can be applied dir Pricing
  • - Disabled + Disabled
    • @@ -155,7 +155,7 @@ And because we use classes for our navs, you can avoid the list-based approach e Home (current) Features Pricing - Disabled + Disabled @@ -472,7 +472,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="max-height: 100
  • - Link + Link
    • @@ -510,7 +510,7 @@ With no `.navbar-brand` shown at the smallest breakpoint: Link
  • - Disabled + Disabled
    • @@ -539,7 +539,7 @@ With a brand name shown on the left and toggler on the right: Link
  • - Disabled + Disabled
    • @@ -568,7 +568,7 @@ With a toggler on the left and brand name on the right: Link
  • - Disabled + Disabled
    • diff --git a/site/content/docs/4.6/components/navs.md b/site/content/docs/4.6/components/navs.md index aec1f8a952ca..7d175234688d 100644 --- a/site/content/docs/4.6/components/navs.md +++ b/site/content/docs/4.6/components/navs.md @@ -28,7 +28,7 @@ The base `.nav` component does not include any `.active` state. The following ex Link
  • - Disabled + Disabled
    • {{< /example >}} @@ -40,7 +40,7 @@ Classes are used throughout, so your markup can be super flexible. Use ` {{< /example >}} @@ -85,7 +85,7 @@ Right-aligned with `.justify-content-end`: Link
  • - Disabled + Disabled
    • {{< /example >}} @@ -106,7 +106,7 @@ Stack your navigation by changing the flex item direction with the `.flex-column Link
  • - Disabled + Disabled
    • {{< /example >}} @@ -118,7 +118,7 @@ As always, vertical navigation is possible without ` {{< /example >}} @@ -159,7 +159,7 @@ Take that same HTML, but use `.nav-pills` instead: Link
  • - Disabled + Disabled
    • {{< /example >}} @@ -180,7 +180,7 @@ Force your `.nav`'s contents to extend the full available width one of two modif Link
  • - Disabled + Disabled
    • {{< /example >}} @@ -192,7 +192,7 @@ When using a ` {{< /example >}} @@ -210,7 +210,7 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ Link
  • - Disabled + Disabled
    • {{< /example >}} @@ -222,7 +222,7 @@ Similar to the `.nav-fill` example using a ` {{< /example >}} @@ -235,7 +235,7 @@ If you need responsive nav variations, consider using a series of [flexbox utili Active Longer nav link Link - Disabled + Disabled {{< /example >}} @@ -270,7 +270,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin Link
  • - Disabled + Disabled
    • {{< /example >}} @@ -296,7 +296,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin Link
  • - Disabled + Disabled
    • {{< /example >}} diff --git a/site/content/docs/4.6/components/pagination.md b/site/content/docs/4.6/components/pagination.md index 23b474589db2..6b959279283b 100644 --- a/site/content/docs/4.6/components/pagination.md +++ b/site/content/docs/4.6/components/pagination.md @@ -58,7 +58,7 @@ While the `.disabled` class uses `pointer-events: none` to _try_ to disable the