summaryrefslogtreecommitdiffstats
path: root/site/content/docs/5.3/components
diff options
context:
space:
mode:
Diffstat (limited to 'site/content/docs/5.3/components')
-rw-r--r--site/content/docs/5.3/components/alerts.md2
-rw-r--r--site/content/docs/5.3/components/button-group.md10
-rw-r--r--site/content/docs/5.3/components/buttons.md36
-rw-r--r--site/content/docs/5.3/components/card.md4
-rw-r--r--site/content/docs/5.3/components/collapse.md4
-rw-r--r--site/content/docs/5.3/components/dropdowns.md2
-rw-r--r--site/content/docs/5.3/components/list-group.md2
-rw-r--r--site/content/docs/5.3/components/navbar.md18
-rw-r--r--site/content/docs/5.3/components/navs-tabs.md38
-rw-r--r--site/content/docs/5.3/components/placeholders.md6
-rw-r--r--site/content/docs/5.3/components/spinners.md20
-rw-r--r--site/content/docs/5.3/components/tooltips.md8
12 files changed, 79 insertions, 71 deletions
diff --git a/site/content/docs/5.3/components/alerts.md b/site/content/docs/5.3/components/alerts.md
index d634ce2..9eb64df 100644
--- a/site/content/docs/5.3/components/alerts.md
+++ b/site/content/docs/5.3/components/alerts.md
@@ -84,7 +84,7 @@ Similarly, you can use [flexbox utilities]({{< docsref "/utilities/flex" >}}) an
Need more than one icon for your alerts? Consider using more Bootstrap Icons and making a local SVG sprite like so to easily reference the same icons repeatedly.
{{< example >}}
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</symbol>
diff --git a/site/content/docs/5.3/components/button-group.md b/site/content/docs/5.3/components/button-group.md
index 9c63562..9f26a91 100644
--- a/site/content/docs/5.3/components/button-group.md
+++ b/site/content/docs/5.3/components/button-group.md
@@ -190,8 +190,6 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
- <button type="button" class="btn btn-primary">Button</button>
- <button type="button" class="btn btn-primary">Button</button>
</div>
{{< /example >}}
@@ -208,9 +206,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
- <button type="button" class="btn btn-primary">Button</button>
- <button type="button" class="btn btn-primary">Button</button>
- <div class="btn-group" role="group">
+ <div class="btn-group dropstart" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
@@ -219,7 +215,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
- <div class="btn-group" role="group">
+ <div class="btn-group dropend" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
@@ -228,7 +224,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
- <div class="btn-group" role="group">
+ <div class="btn-group dropup" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md
index ae58fca..83a6138 100644
--- a/site/content/docs/5.3/components/buttons.md
+++ b/site/content/docs/5.3/components/buttons.md
@@ -129,7 +129,7 @@ To cover cases where you have to keep the `href` attribute on a disabled link, t
## Block buttons
-Create responsive stacks of full-width, "block buttons" like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
+Create responsive stacks of full-width, "block buttons" like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button-specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
{{< example >}}
<div class="d-grid gap-2">
@@ -156,7 +156,7 @@ You can adjust the width of your block buttons with grid column width classes. F
</div>
{{< /example >}}
-Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they're no longer stacked.
+Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right-align the buttons when they're no longer stacked.
{{< example >}}
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
@@ -178,15 +178,29 @@ Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{
Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to ensure that it is conveyed appropriately to assistive technologies.
{{< example >}}
-<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
-<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
-<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
+<p class="d-inline-flex gap-1">
+ <button type="button" class="btn" data-bs-toggle="button">Toggle button</button>
+ <button type="button" class="btn active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
+ <button type="button" class="btn" disabled data-bs-toggle="button">Disabled toggle button</button>
+</p>
+<p class="d-inline-flex gap-1">
+ <button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
+ <button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
+ <button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
+</p>
{{< /example >}}
{{< example >}}
-<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
-<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
-<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
+<p class="d-inline-flex gap-1">
+ <a href="#" class="btn" role="button" data-bs-toggle="button">Toggle link</a>
+ <a href="#" class="btn active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
+ <a class="btn disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
+</p>
+<p class="d-inline-flex gap-1">
+ <a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
+ <a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
+ <a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
+</p>
{{< /example >}}
### Methods
@@ -201,8 +215,8 @@ const bsButton = new bootstrap.Button('#myButton')
| Method | Description |
| --- | --- |
| `dispose` | Destroys an element's button. (Removes stored data on the DOM element) |
-| `getInstance` | Static method which allows you to get the button instance associated to a DOM element, you can use it like this: `bootstrap.Button.getInstance(element)`. |
-| `getOrCreateInstance` | Static method which returns a button instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Button.getOrCreateInstance(element)`. |
+| `getInstance` | Static method which allows you to get the button instance associated with a DOM element, you can use it like this: `bootstrap.Button.getInstance(element)`. |
+| `getOrCreateInstance` | Static method which returns a button instance associated with a DOM element or creates a new one in case it wasn't initialized. You can use it like this: `bootstrap.Button.getOrCreateInstance(element)`. |
| `toggle` | Toggles push state. Gives the button the appearance that it has been activated. |
{{< /bs-table >}}
@@ -227,7 +241,7 @@ As part of Bootstrap's evolving CSS variables approach, buttons now use local CS
Each `.btn-*` modifier class updates the appropriate CSS variables to minimize additional CSS rules with our `button-variant()`, `button-outline-variant()`, and `button-size()` mixins.
-Here's an example of building a custom `.btn-*` modifier class like we do for the buttons unique to our docs by reassigning Bootstrap's CSS variables with a mixture of our own CSS and Sass variables.
+Here's an example of building a custom `.btn-*` modifier class as we do for the buttons unique to our docs by reassigning Bootstrap's CSS variables with a mixture of our own CSS and Sass variables.
<div class="bd-example">
<button type="button" class="btn btn-bd-primary">Custom button</button>
diff --git a/site/content/docs/5.3/components/card.md b/site/content/docs/5.3/components/card.md
index 2ad32b4..6138c3d 100644
--- a/site/content/docs/5.3/components/card.md
+++ b/site/content/docs/5.3/components/card.md
@@ -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>
@@ -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>
diff --git a/site/content/docs/5.3/components/collapse.md b/site/content/docs/5.3/components/collapse.md
index 21b9c3e..d517115 100644
--- a/site/content/docs/5.3/components/collapse.md
+++ b/site/content/docs/5.3/components/collapse.md
@@ -25,7 +25,7 @@ Click the buttons below to show and hide another element via class changes:
Generally, we recommend using a `<button>` with the `data-bs-target` attribute. While not recommended from a semantic point of view, you can also use an `<a>` link with the `href` attribute (and a `role="button"`). In both cases, the `data-bs-toggle="collapse"` is required.
{{< example >}}
-<p>
+<p class="d-inline-flex gap-1">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
@@ -69,7 +69,7 @@ A `<button>` or `<a>` element can show and hide multiple elements by referencing
Conversely, multiple `<button>` or `<a>` elements can show and hide the same element if they each reference it with their `data-bs-target` or `href` attribute.
{{< example >}}
-<p>
+<p class="d-inline-flex gap-1">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
diff --git a/site/content/docs/5.3/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md
index 0988820..6e3811f 100644
--- a/site/content/docs/5.3/components/dropdowns.md
+++ b/site/content/docs/5.3/components/dropdowns.md
@@ -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 >}}
diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md
index 6c22809..598bb38 100644
--- a/site/content/docs/5.3/components/list-group.md
+++ b/site/content/docs/5.3/components/list-group.md
@@ -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 >}}
diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md
index 9b9f86a..ab6c230 100644
--- a/site/content/docs/5.3/components/navbar.md
+++ b/site/content/docs/5.3/components/navbar.md
@@ -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">
@@ -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>
@@ -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>
@@ -331,7 +331,7 @@ Mix and match with other components and utilities as needed.
Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `data-bs-theme="dark"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` and additional utilities.
<div class="bd-example">
- <nav class="navbar navbar-expand-lg bg-dark border-bottom border-bottom-dark" data-bs-theme="dark">
+ <nav class="navbar navbar-expand-lg bg-dark border-bottom border-body" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
@@ -420,7 +420,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
</div>
```html
-<nav class="navbar bg-dark border-bottom border-bottom-dark" data-bs-theme="dark">
+<nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
<!-- Navbar content -->
</nav>
@@ -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">
@@ -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">
@@ -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">
@@ -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">
diff --git a/site/content/docs/5.3/components/navs-tabs.md b/site/content/docs/5.3/components/navs-tabs.md
index 3242506..5cf75e1 100644
--- a/site/content/docs/5.3/components/navs-tabs.md
+++ b/site/content/docs/5.3/components/navs-tabs.md
@@ -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 >}}
@@ -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 >}}
@@ -53,7 +53,7 @@ Change the style of `.nav`s component with modifiers and utilities. Mix and matc
### Horizontal alignment
-Change the horizontal alignment of your nav with [flexbox utilities]({{< docsref "/layout/grid#horizontal-alignment" >}}). By default, navs are left-aligned, but you can easily change them to center or right aligned.
+Change the horizontal alignment of your nav with [flexbox utilities]({{< docsref "/utilities/flex#justify-content" >}}). By default, navs are left-aligned, but you can easily change them to center or right-aligned.
Centered with `.justify-content-center`:
@@ -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 >}}
@@ -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 >}}
@@ -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 >}}
@@ -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 >}}
@@ -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 >}}
@@ -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 >}}
@@ -183,14 +183,14 @@ 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 >}}
### Fill and justify
-Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.
+Force your `.nav`'s contents to extend the full available width with one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.
{{< example >}}
<ul class="nav nav-pills nav-fill">
@@ -204,7 +204,7 @@ Force your `.nav`'s contents to extend the full available width one of two modif
<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 >}}
@@ -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 >}}
@@ -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 >}}
@@ -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 >}}
@@ -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 >}}
@@ -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 >}}
@@ -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 >}}
@@ -567,7 +567,7 @@ And with vertical pills. Ideally, for vertical tabs, you should also add `aria-o
Dynamic tabbed interfaces, as described in the [ARIA Authoring Practices Guide tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality, and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using `<button>` elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.
-In line with the ARIA Authoring Practices pattern, only the currently active tab receives keyboard focus. When the JavaScript plugin is initialized, it will set `tabindex="-1"` on all inactive tab controls. Once the currently active tab has focus, the cursor keys activate the previous/next tab, with the plugin changing the [roving `tabindex`](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/) accordingly. However, note that the JavaScript plugin does not distinguish between horizontal and vertical tab lists when it comes to cursor key interactions: regardless of the tab list's orientation, both the up *and* left cursor go to the previous tab, and down *and* right cursor go to the next tab.
+In line with the ARIA Authoring Practices pattern, only the currently active tab receives keyboard focus. When the JavaScript plugin is initialized, it will set `tabindex="-1"` on all inactive tab controls. Once the currently active tab has focus, the cursor keys activate the previous/next tab. The <kbd>Home</kbd> and <kbd>End</kbd> keys activate the first and last tabs, respectively. The plugin will change the [roving `tabindex`](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/) accordingly. However, note that the JavaScript plugin does not distinguish between horizontal and vertical tab lists when it comes to cursor key interactions: regardless of the tab list's orientation, both the up *and* left cursor go to the previous tab, and down *and* right cursor go to the next tab.
{{< callout warning >}}
In general, to facilitate keyboard navigation, it's recommended to make the tab panels themselves focusable as well, unless the first element containing meaningful content inside the tab panel is already focusable. The JavaScript plugin does not try to handle this aspect—where appropriate, you'll need to explicitly make your tab panels focusable by adding `tabindex="0"` in your markup.
diff --git a/site/content/docs/5.3/components/placeholders.md b/site/content/docs/5.3/components/placeholders.md
index 3dca347..8317b11 100644
--- a/site/content/docs/5.3/components/placeholders.md
+++ b/site/content/docs/5.3/components/placeholders.md
@@ -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>
@@ -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>
```
@@ -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 >}}
diff --git a/site/content/docs/5.3/components/spinners.md b/site/content/docs/5.3/components/spinners.md
index f2635c6..977257d 100644
--- a/site/content/docs/5.3/components/spinners.md
+++ b/site/content/docs/5.3/components/spinners.md
@@ -96,8 +96,8 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
{{< example >}}
<div class="d-flex align-items-center">
- <strong>Loading...</strong>
- <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
+ <strong role="status">Loading...</strong>
+ <div class="spinner-border ms-auto" aria-hidden="true"></div>
</div>
{{< /example >}}
@@ -151,23 +151,23 @@ Use spinners within buttons to indicate an action is currently processing or tak
{{< example >}}
<button class="btn btn-primary" type="button" disabled>
- <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
- <span class="visually-hidden">Loading...</span>
+ <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+ <span class="visually-hidden" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
- <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
- Loading...
+ <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+ <span role="status">Loading...</span>
</button>
{{< /example >}}
{{< example >}}
<button class="btn btn-primary" type="button" disabled>
- <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
- <span class="visually-hidden">Loading...</span>
+ <span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
+ <span class="visually-hidden" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
- <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
- Loading...
+ <span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
+ <span role="status">Loading...</span>
</button>
{{< /example >}}
diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md
index cf628e3..91adacc 100644
--- a/site/content/docs/5.3/components/tooltips.md
+++ b/site/content/docs/5.3/components/tooltips.md
@@ -157,7 +157,7 @@ const tooltip = new bootstrap.Tooltip('#example', {
The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
{{< callout warning >}}
-**Keep tooltips accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltips as this will make theme impossible to trigger for keyboard users.
+**Keep tooltips accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltips as this will make them impossible to trigger for keyboard users.
{{< /callout >}}
```html
@@ -165,7 +165,7 @@ The required markup for a tooltip is only a `data` attribute and `title` on the
<a href="#" data-bs-toggle="tooltip" data-bs-title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
-<div class="tooltip bs-tooltip-top" role="tooltip">
+<div class="tooltip bs-tooltip-auto" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
@@ -177,13 +177,11 @@ The required markup for a tooltip is only a `data` attribute and `title` on the
Elements with the `disabled` attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.
-<div class="tooltip-demo">
-{{< example >}}
+{{< example class="tooltip-demo" stackblitz_add_js="true" >}}
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled tooltip">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
{{< /example >}}
-</div>
### Options
generated by cgit v1.2.3 (git 2.39.1) at 2024-05-23 06:20:02 +0000