Skip to content

Commit f4a1a35

Browse files
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
1 parent 408252e commit f4a1a35

File tree

16 files changed

+58
-54
lines changed

16 files changed

+58
-54
lines changed

site/content/docs/4.6/components/buttons.md

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -101,18 +101,22 @@ Disabled buttons using the `<a>` element behave a bit different:
101101

102102
- `<a>`s don't support the `disabled` attribute, so you must add the `.disabled` class to make it visually appear disabled.
103103
- 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.
104-
- Disabled buttons should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies.
104+
- Disabled buttons using `<a>` should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies.
105+
- Disabled buttons using `<a>` *should not* include the `href` attribute.
105106

106107
{{< example >}}
107-
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
108-
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
108+
<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
109+
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
109110
{{< /example >}}
110111

111-
{{< callout warning >}}
112-
##### Link functionality caveat
112+
### Link functionality caveat
113113

114-
The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`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.
115-
{{< /callout >}}
114+
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 `<a>`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.
115+
116+
{{< example >}}
117+
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
118+
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
119+
{{< /example >}}
116120

117121
## Button plugin
118122

site/content/docs/4.6/components/card.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -309,7 +309,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
309309
<a class="nav-link" href="#">Link</a>
310310
</li>
311311
<li class="nav-item">
312-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
312+
<a class="nav-link disabled">Disabled</a>
313313
</li>
314314
</ul>
315315
</div>
@@ -332,7 +332,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
332332
<a class="nav-link" href="#">Link</a>
333333
</li>
334334
<li class="nav-item">
335-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
335+
<a class="nav-link disabled">Disabled</a>
336336
</li>
337337
</ul>
338338
</div>

site/content/docs/4.6/components/dropdowns.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -580,7 +580,7 @@ Add `.disabled` to items in the dropdown to **style them as disabled**.
580580
{{< example >}}
581581
<div class="dropdown-menu">
582582
<a class="dropdown-item" href="#">Regular link</a>
583-
<a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
583+
<a class="dropdown-item disabled">Disabled link</a>
584584
<a class="dropdown-item" href="#">Another link</a>
585585
</div>
586586
{{< /example >}}

site/content/docs/4.6/components/list-group.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ Be sure to **not use the standard `.btn` classes here**.
6262
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
6363
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
6464
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
65-
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
65+
<a class="list-group-item list-group-item-action disabled">A disabled link item</a>
6666
</div>
6767
{{< /example >}}
6868

site/content/docs/4.6/components/navbar.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ Here's an example of all the sub-components included in a responsive light-theme
6161
</div>
6262
</li>
6363
<li class="nav-item">
64-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
64+
<a class="nav-link disabled">Disabled</a>
6565
</li>
6666
</ul>
6767
<form class="form-inline my-2 my-lg-0">
@@ -135,7 +135,7 @@ Active states—with `.active`—to indicate the current page can be applied dir
135135
<a class="nav-link" href="#">Pricing</a>
136136
</li>
137137
<li class="nav-item">
138-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
138+
<a class="nav-link disabled">Disabled</a>
139139
</li>
140140
</ul>
141141
</div>
@@ -155,7 +155,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
155155
<a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
156156
<a class="nav-link" href="#">Features</a>
157157
<a class="nav-link" href="#">Pricing</a>
158-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
158+
<a class="nav-link disabled">Disabled</a>
159159
</div>
160160
</div>
161161
</nav>
@@ -472,7 +472,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="max-height: 100
472472
</ul>
473473
</li>
474474
<li class="nav-item">
475-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link</a>
475+
<a class="nav-link disabled">Link</a>
476476
</li>
477477
</ul>
478478
<form class="d-flex">
@@ -510,7 +510,7 @@ With no `.navbar-brand` shown at the smallest breakpoint:
510510
<a class="nav-link" href="#">Link</a>
511511
</li>
512512
<li class="nav-item">
513-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
513+
<a class="nav-link disabled">Disabled</a>
514514
</li>
515515
</ul>
516516
<form class="form-inline my-2 my-lg-0">
@@ -539,7 +539,7 @@ With a brand name shown on the left and toggler on the right:
539539
<a class="nav-link" href="#">Link</a>
540540
</li>
541541
<li class="nav-item">
542-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
542+
<a class="nav-link disabled">Disabled</a>
543543
</li>
544544
</ul>
545545
<form class="form-inline my-2 my-lg-0">
@@ -568,7 +568,7 @@ With a toggler on the left and brand name on the right:
568568
<a class="nav-link" href="#">Link</a>
569569
</li>
570570
<li class="nav-item">
571-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
571+
<a class="nav-link disabled">Disabled</a>
572572
</li>
573573
</ul>
574574
<form class="form-inline my-2 my-lg-0">

site/content/docs/4.6/components/navs.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ The base `.nav` component does not include any `.active` state. The following ex
2828
<a class="nav-link" href="#">Link</a>
2929
</li>
3030
<li class="nav-item">
31-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
31+
<a class="nav-link disabled">Disabled</a>
3232
</li>
3333
</ul>
3434
{{< /example >}}
@@ -40,7 +40,7 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
4040
<a class="nav-link active" href="#">Active</a>
4141
<a class="nav-link" href="#">Link</a>
4242
<a class="nav-link" href="#">Link</a>
43-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
43+
<a class="nav-link disabled">Disabled</a>
4444
</nav>
4545
{{< /example >}}
4646

@@ -66,7 +66,7 @@ Centered with `.justify-content-center`:
6666
<a class="nav-link" href="#">Link</a>
6767
</li>
6868
<li class="nav-item">
69-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
69+
<a class="nav-link disabled">Disabled</a>
7070
</li>
7171
</ul>
7272
{{< /example >}}
@@ -85,7 +85,7 @@ Right-aligned with `.justify-content-end`:
8585
<a class="nav-link" href="#">Link</a>
8686
</li>
8787
<li class="nav-item">
88-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
88+
<a class="nav-link disabled">Disabled</a>
8989
</li>
9090
</ul>
9191
{{< /example >}}
@@ -106,7 +106,7 @@ Stack your navigation by changing the flex item direction with the `.flex-column
106106
<a class="nav-link" href="#">Link</a>
107107
</li>
108108
<li class="nav-item">
109-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
109+
<a class="nav-link disabled">Disabled</a>
110110
</li>
111111
</ul>
112112
{{< /example >}}
@@ -118,7 +118,7 @@ As always, vertical navigation is possible without `<ul>`s, too.
118118
<a class="nav-link active" href="#">Active</a>
119119
<a class="nav-link" href="#">Link</a>
120120
<a class="nav-link" href="#">Link</a>
121-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
121+
<a class="nav-link disabled">Disabled</a>
122122
</nav>
123123
{{< /example >}}
124124

@@ -138,7 +138,7 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
138138
<a class="nav-link" href="#">Link</a>
139139
</li>
140140
<li class="nav-item">
141-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
141+
<a class="nav-link disabled">Disabled</a>
142142
</li>
143143
</ul>
144144
{{< /example >}}
@@ -159,7 +159,7 @@ Take that same HTML, but use `.nav-pills` instead:
159159
<a class="nav-link" href="#">Link</a>
160160
</li>
161161
<li class="nav-item">
162-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
162+
<a class="nav-link disabled">Disabled</a>
163163
</li>
164164
</ul>
165165
{{< /example >}}
@@ -180,7 +180,7 @@ Force your `.nav`'s contents to extend the full available width one of two modif
180180
<a class="nav-link" href="#">Link</a>
181181
</li>
182182
<li class="nav-item">
183-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
183+
<a class="nav-link disabled">Disabled</a>
184184
</li>
185185
</ul>
186186
{{< /example >}}
@@ -192,7 +192,7 @@ When using a `<nav>`-based navigation, you can safely omit `.nav-item` as only `
192192
<a class="nav-link active" href="#">Active</a>
193193
<a class="nav-link" href="#">Much longer nav link</a>
194194
<a class="nav-link" href="#">Link</a>
195-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
195+
<a class="nav-link disabled">Disabled</a>
196196
</nav>
197197
{{< /example >}}
198198

@@ -210,7 +210,7 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ
210210
<a class="nav-link" href="#">Link</a>
211211
</li>
212212
<li class="nav-item">
213-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
213+
<a class="nav-link disabled">Disabled</a>
214214
</li>
215215
</ul>
216216
{{< /example >}}
@@ -222,7 +222,7 @@ Similar to the `.nav-fill` example using a `<nav>`-based navigation.
222222
<a class="nav-link active" href="#">Active</a>
223223
<a class="nav-link" href="#">Much longer nav link</a>
224224
<a class="nav-link" href="#">Link</a>
225-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
225+
<a class="nav-link disabled">Disabled</a>
226226
</nav>
227227

228228
{{< /example >}}
@@ -235,7 +235,7 @@ If you need responsive nav variations, consider using a series of [flexbox utili
235235
<a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
236236
<a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
237237
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
238-
<a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
238+
<a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
239239
</nav>
240240
{{< /example >}}
241241

@@ -270,7 +270,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
270270
<a class="nav-link" href="#">Link</a>
271271
</li>
272272
<li class="nav-item">
273-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
273+
<a class="nav-link disabled">Disabled</a>
274274
</li>
275275
</ul>
276276
{{< /example >}}
@@ -296,7 +296,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
296296
<a class="nav-link" href="#">Link</a>
297297
</li>
298298
<li class="nav-item">
299-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
299+
<a class="nav-link disabled">Disabled</a>
300300
</li>
301301
</ul>
302302
{{< /example >}}

site/content/docs/4.6/components/pagination.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ While the `.disabled` class uses `pointer-events: none` to _try_ to disable the
5858
<nav aria-label="...">
5959
<ul class="pagination">
6060
<li class="page-item disabled">
61-
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
61+
<a class="page-link">Previous</a>
6262
</li>
6363
<li class="page-item"><a class="page-link" href="#">1</a></li>
6464
<li class="page-item active" aria-current="page">
@@ -128,7 +128,7 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr
128128
<nav aria-label="Page navigation example">
129129
<ul class="pagination justify-content-center">
130130
<li class="page-item disabled">
131-
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
131+
<a class="page-link">Previous</a>
132132
</li>
133133
<li class="page-item"><a class="page-link" href="#">1</a></li>
134134
<li class="page-item"><a class="page-link" href="#">2</a></li>
@@ -144,7 +144,7 @@ Change the alignment of pagination components with [flexbox utilities]({{< docsr
144144
<nav aria-label="Page navigation example">
145145
<ul class="pagination justify-content-end">
146146
<li class="page-item disabled">
147-
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
147+
<a class="page-link">Previous</a>
148148
</li>
149149
<li class="page-item"><a class="page-link" href="#">1</a></li>
150150
<li class="page-item"><a class="page-link" href="#">2</a></li>

site/content/docs/4.6/examples/blog/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ <h2 class="blog-post-title">New feature</h2>
149149

150150
<nav class="blog-pagination">
151151
<a class="btn btn-outline-primary" href="#">Older</a>
152-
<a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">Newer</a>
152+
<a class="btn btn-outline-secondary disabled">Newer</a>
153153
</nav>
154154

155155
</div><!-- /.blog-main -->

site/content/docs/4.6/examples/carousel/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<a class="nav-link" href="#">Link</a>
2121
</li>
2222
<li class="nav-item">
23-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
23+
<a class="nav-link disabled">Disabled</a>
2424
</li>
2525
</ul>
2626
<form class="form-inline mt-2 mt-md-0">

site/content/docs/4.6/examples/jumbotron/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<a class="nav-link" href="#">Link</a>
2121
</li>
2222
<li class="nav-item">
23-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
23+
<a class="nav-link disabled">Disabled</a>
2424
</li>
2525
<li class="nav-item dropdown">
2626
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-expanded="false">Dropdown</a>

0 commit comments

Comments
 (0)