From: Antti Hukkanen <antti.hukkanen@mainiotech.fi>
Date: Fri, 29 May 2020 09:22:46 +0000 (+0300)
Subject: Remove tabindex from progressbar documentation
X-Git-Tag: v6.7.1~35^2~1
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=9df0fbfa65b7616be5d31d182a598a389f1d30ad;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Remove tabindex from progressbar documentation

The tabindex attribute makes the progress bars focusable and there
is no real reason for them to be focusable.

This change improves accessibility.
---

diff --git a/docs/pages/progress-bar.md b/docs/pages/progress-bar.md
index 0e2fb3ed8..c20b6985d 100644
--- a/docs/pages/progress-bar.md
+++ b/docs/pages/progress-bar.md
@@ -27,7 +27,7 @@ If the value of the progress bar is not numeric, also add the attribute `aria-va
 </div>
 
 ```html_example
-<div class="progress" role="progressbar" tabindex="0" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+<div class="progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
   <div class="progress-meter"></div>
 </div>
 ```
@@ -35,7 +35,7 @@ If the value of the progress bar is not numeric, also add the attribute `aria-va
 Add a `width` CSS property to the inner meter to fill the progress bar.
 
 ```html_example
-<div class="progress" role="progressbar" tabindex="0" aria-valuenow="50" aria-valuemin="0" aria-valuetext="50 percent" aria-valuemax="100">
+<div class="progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuetext="50 percent" aria-valuemax="100">
   <div class="progress-meter" style="width: 50%"></div>
 </div>
 ```
@@ -55,7 +55,7 @@ A progress bar can be styled with the `.secondary`, `.success`, `.warning`, and
 </div>
 
 ```html_example
-<div class="secondary progress" role="progressbar" tabindex="0" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
+<div class="secondary progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
   <div class="progress-meter" style="width: 25%"></div>
 </div>
 
@@ -87,7 +87,7 @@ You can add text inside the meter of a progress bar. Make sure the text you use
 </div>
 
 ```html_example
-<div class="progress" role="progressbar" tabindex="0" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
+<div class="progress" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">
   <span class="progress-meter" style="width: 25%">
     <span class="progress-meter-text">25%</span>
   </span>