rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 10 deletions
Show Stats 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 >}} {{< example >}}
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<strong>Loading...</strong> <strong role="status">Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div> <div class="spinner-border ms-auto" aria-hidden="true"></div>
</div> </div>
{{< /example >}} {{< /example >}}
@ -151,23 +151,23 @@ Use spinners within buttons to indicate an action is currently processing or tak
{{< example >}} {{< example >}}
<button class="btn btn-primary" type="button" disabled> <button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span> <span class="visually-hidden" role="status">Loading...</span>
</button> </button>
<button class="btn btn-primary" type="button" disabled> <button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
Loading... <span role="status">Loading...</span>
</button> </button>
{{< /example >}} {{< /example >}}
{{< example >}} {{< example >}}
<button class="btn btn-primary" type="button" disabled> <button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> <span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span> <span class="visually-hidden" role="status">Loading...</span>
</button> </button>
<button class="btn btn-primary" type="button" disabled> <button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> <span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
Loading... <span role="status">Loading...</span>
</button> </button>
{{< /example >}} {{< /example >}}