mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-17 19:06:40 +02:00
Code Issues Releases Wiki Activity

docs(spinners): improve buttons examples accessibility (#38632)

Browse Source 
* docs(spinners): improve buttons examples accessibility

* docs(spinners): missed occurrence of wrong role + aria-hidden

---------

Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
This commit is contained in:
Gaël Poupard
2023-06-01 04:32:47 +02:00
committed by GitHub
parent b7e351b445
commit a4918e33b8
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
site/content/docs/5.3/components/spinners.md
View File

@@ -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 >}}