diff options
| author | Gaël Poupard <[email protected]> | 2023-06-01 04:32:47 +0200 |
|---|---|---|
| committer | GitHub <[email protected]> | 2023-05-31 19:32:47 -0700 |
| commit | a4918e33b80684386fce1ec64fc0204e0bac6b90 (patch) | |
| tree | 68430e23feaf50e84d0f06665b5c9da29a065094 /site | |
| parent | b7e351b445908c82d7a0642960a8ceeaba1c5db4 (diff) | |
| download | bootstrap-a4918e33b80684386fce1ec64fc0204e0bac6b90.tar.xz bootstrap-a4918e33b80684386fce1ec64fc0204e0bac6b90.zip | |
docs(spinners): improve buttons examples accessibility (#38632)
* docs(spinners): improve buttons examples accessibility
* docs(spinners): missed occurrence of wrong role + aria-hidden
---------
Co-authored-by: Patrick H. Lauke <[email protected]>
Diffstat (limited to 'site')
| -rw-r--r-- | site/content/docs/5.3/components/spinners.md | 20 |
1 files changed, 10 insertions, 10 deletions
diff --git a/site/content/docs/5.3/components/spinners.md b/site/content/docs/5.3/components/spinners.md index f2635c63e..977257dd0 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 >}} |