Skip to content

Commit

Permalink
docs(spinners): improve buttons examples accessibility (twbs#38632)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
2 people authored and romankupchak93 committed Jan 5, 2024
1 parent 37c4b1d commit cbc9846
Showing 1 changed file with 10 additions and 10 deletions.
20 changes: 10 additions & 10 deletions site/content/docs/5.3/components/spinners.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 >}}

Expand Down Expand Up @@ -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 >}}

Expand Down

0 comments on commit cbc9846

Please sign in to comment.