]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Remove tabindex from progressbar documentation
authorAntti Hukkanen <antti.hukkanen@mainiotech.fi>
Fri, 29 May 2020 09:22:46 +0000 (12:22 +0300)
committerAntti Hukkanen <antti.hukkanen@mainiotech.fi>
Fri, 29 May 2020 09:22:46 +0000 (12:22 +0300)
The tabindex attribute makes the progress bars focusable and there
is no real reason for them to be focusable.

This change improves accessibility.

docs/pages/progress-bar.md

index 0e2fb3ed8de1059ec3f8ad4c58a4f8679c7614d4..c20b6985d7799e97494cc9767f1f4e2e7eef54d7 100644 (file)
@@ -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>