Skip to content

Commit

Permalink
Docs: add missing aria-disabled='true' to disabled anchors
Browse files Browse the repository at this point in the history
  • Loading branch information
@julien-deramond @mdo
julien-deramond authored and mdo committed Jul 6, 2023
1 parent 52d5369 commit 3515ac1
Show file tree
Hide file tree
Showing 18 changed files with 60 additions and 60 deletions.
4 changes: 2 additions & 2 deletions js/tests/visual/tab.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,12 +161,12 @@ <h4>Tabs with fade (no initially active pane)</h4>

<h4>Tabs with nav and using links (with fade)</h4>
<nav>
<div class="nav nav-pills" id="nav-tab" role="tablist">
<div class="nav nav-pills" id="nav-tab" role="tablist">
<a class="nav-link nav-item active" role="tab" data-bs-toggle="tab" href="#home5">Home</a>
<a class="nav-link nav-item" role="tab" data-bs-toggle="tab" href="#profile5">Profile</a>
<a class="nav-link nav-item" role="tab" data-bs-toggle="tab" href="#fat5">@fat</a>
<a class="nav-link nav-item" role="tab" data-bs-toggle="tab" href="#mdo5">@mdo</a>
<a class="nav-link nav-item disabled" role="tab" href="#">Disabled</a>
<a class="nav-link nav-item disabled" role="tab" href="#" aria-disabled="true">Disabled</a>
</div>
</nav>

Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/5.3/components/card.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -309,7 +309,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
Expand All @@ -332,7 +332,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/components/dropdowns.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -661,7 +661,7 @@ Add `.disabled` to items in the dropdown to **style them as disabled**.
{{< example >}}
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled">Disabled link</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
{{< /example >}}
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/components/list-group.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ Be sure to **not use the standard `.btn` classes here**.
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a class="list-group-item list-group-item-action disabled">A disabled link item</a>
<a class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
</div>
{{< /example >}}

Expand Down
14 changes: 7 additions & 7 deletions site/content/docs/5.3/components/navbar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ Here's an example of all the sub-components included in a responsive light-theme
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
Expand Down Expand Up @@ -157,7 +157,7 @@ Please note that you should also add the `aria-current` attribute on the active
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
Expand All @@ -179,7 +179,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
Expand Down Expand Up @@ -538,7 +538,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-hei
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Link</a>
<a class="nav-link disabled" aria-disabled="true">Link</a>
</li>
</ul>
<form class="d-flex" role="search">
Expand Down Expand Up @@ -578,7 +578,7 @@ With no `.navbar-brand` shown at the smallest breakpoint:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
Expand Down Expand Up @@ -608,7 +608,7 @@ With a brand name shown on the left and toggler on the right:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
Expand Down Expand Up @@ -638,7 +638,7 @@ With a toggler on the left and brand name on the right:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
Expand Down
32 changes: 16 additions & 16 deletions site/content/docs/5.3/components/navs-tabs.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ To convey the active state to assistive technologies, use the `aria-current` att
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
Expand All @@ -43,7 +43,7 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}

Expand All @@ -69,7 +69,7 @@ Centered with `.justify-content-center`:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
Expand All @@ -88,7 +88,7 @@ Right-aligned with `.justify-content-end`:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
Expand All @@ -109,7 +109,7 @@ Stack your navigation by changing the flex item direction with the `.flex-column
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
Expand All @@ -121,7 +121,7 @@ As always, vertical navigation is possible without `<ul>`s, too.
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}

Expand All @@ -141,7 +141,7 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
Expand All @@ -162,7 +162,7 @@ Take that same HTML, but use `.nav-pills` instead:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
Expand All @@ -183,7 +183,7 @@ Take that same HTML, but use `.nav-underline` instead:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
Expand All @@ -204,7 +204,7 @@ Force your `.nav`'s contents to extend the full available width with one of two
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
Expand All @@ -216,7 +216,7 @@ When using a `<nav>`-based navigation, you can safely omit `.nav-item` as only `
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}

Expand All @@ -234,7 +234,7 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
Expand All @@ -246,7 +246,7 @@ Similar to the `.nav-fill` example using a `<nav>`-based navigation.
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>

{{< /example >}}
Expand All @@ -259,7 +259,7 @@ If you need responsive nav variations, consider using a series of [flexbox utili
<a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
<a class="flex-sm-fill text-sm-center nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}

Expand Down Expand Up @@ -294,7 +294,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
Expand All @@ -320,7 +320,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
Expand Down
6 changes: 3 additions & 3 deletions site/content/docs/5.3/components/placeholders.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ In the example below, we take a typical card component and recreate it with plac
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
<a class="btn btn-primary disabled placeholder col-6"></a>
<a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
</div>
</div>
</div>
Expand Down Expand Up @@ -67,7 +67,7 @@ In the example below, we take a typical card component and recreate it with plac
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
<a class="btn btn-primary disabled placeholder col-6"></a>
<a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
</div>
</div>
```
Expand All @@ -83,7 +83,7 @@ We apply additional styling to `.btn`s via `::before` to ensure the `height` is
<span class="placeholder col-6"></span>
</p>

<a class="btn btn-primary disabled placeholder col-4"></a>
<a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a>
{{< /example >}}

{{< callout info >}}
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/examples/blog-rtl/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ <h2 class="display-5 link-body-emphasis mb-1">ميزة جديدة</h2>

<nav class="blog-pagination" aria-label="Pagination">
<a class="btn btn-outline-primary rounded-pill" href="#">تدوينات أقدم</a>
<a class="btn btn-outline-secondary rounded-pill disabled">تدوينات أحدث</a>
<a class="btn btn-outline-secondary rounded-pill disabled" aria-disabled="true">تدوينات أحدث</a>
</nav>

</div>
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/examples/blog/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ <h2 class="display-5 link-body-emphasis mb-1">New feature</h2>

<nav class="blog-pagination" aria-label="Pagination">
<a class="btn btn-outline-primary rounded-pill" href="#">Older</a>
<a class="btn btn-outline-secondary rounded-pill disabled">Newer</a>
<a class="btn btn-outline-secondary rounded-pill disabled" aria-disabled="true">Newer</a>
</nav>

</div>
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/examples/carousel-rtl/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<a class="nav-link" href="#">حلقة الوصل</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">رابط غير مفعل</a>
<a class="nav-link disabled" aria-disabled="true">رابط غير مفعل</a>
</li>
</ul>
<form class="d-flex" role="search">
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/examples/carousel/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
Expand Down
8 changes: 4 additions & 4 deletions site/content/docs/5.3/examples/cheatsheet-rtl/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1170,7 +1170,7 @@ <h3>التنقل</h3>
<a class="nav-link active" aria-current="page" href="#">نشط</a>
<a class="nav-link" href="#">رابط</a>
<a class="nav-link" href="#">رابط</a>
<a class="nav-link disabled">معطل</a>
<a class="nav-link disabled" aria-disabled="true">معطل</a>
</nav>
{{< /example >}}

Expand Down Expand Up @@ -1207,7 +1207,7 @@ <h3>التنقل</h3>
<a class="nav-link" href="#">رابط</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">معطل</a>
<a class="nav-link disabled" aria-disabled="true">معطل</a>
</li>
</ul>
{{< /example >}}
Expand Down Expand Up @@ -1250,7 +1250,7 @@ <h3>شريط التنقل</h3>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">معطل</a>
<a class="nav-link disabled" aria-disabled="true">معطل</a>
</li>
</ul>
<form class="d-flex" role="search">
Expand Down Expand Up @@ -1289,7 +1289,7 @@ <h3>شريط التنقل</h3>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">معطل</a>
<a class="nav-link disabled" aria-disabled="true">معطل</a>
</li>
</ul>
<form class="d-flex" role="search">
Expand Down
8 changes: 4 additions & 4 deletions site/content/docs/5.3/examples/cheatsheet/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1169,7 +1169,7 @@ <h3>Navs</h3>
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}

Expand Down Expand Up @@ -1206,7 +1206,7 @@ <h3>Navs</h3>
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
Expand Down Expand Up @@ -1249,7 +1249,7 @@ <h3>Navbar</h3>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
Expand Down Expand Up @@ -1288,7 +1288,7 @@ <h3>Navbar</h3>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
Expand Down

0 comments on commit 3515ac1

Please sign in to comment.