From: Gaël Poupard <ffoodd@users.noreply.github.com>
Date: Thu, 1 Jun 2023 02:32:47 +0000 (+0200)
Subject: docs(spinners): improve buttons examples accessibility (#38632)
X-Git-Tag: v5.3.1~90
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=a4918e33b80684386fce1ec64fc0204e0bac6b90;p=thirdparty%2Fbootstrap.git

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 <redux@splintered.co.uk>
---

diff --git a/site/content/docs/5.3/components/spinners.md b/site/content/docs/5.3/components/spinners.md
index f2635c63ec..977257dd0c 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 >}}