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.

Sign up for GitHub

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

Jump to bottom

Docs: add missing aria-disabled='true' to disabled anchors #38827

Merged
merged 1 commit into from Jul 6, 2023
Merged

Docs: add missing aria-disabled='true' to disabled anchors #38827

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions js/tests/visual/tab.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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