ARIA refinements for Progress [closes #356]

USDA-FSA · Oct 8, 2019 · d456f37 · d456f37
1 parent df9f54a
commit d456f37
Show file tree

Hide file tree

Showing 5 changed files with 182 additions and 143 deletions.
diff --git a/src/demo/rwd__progress.html b/src/demo/rwd__progress.html
@@ -90,12 +90,15 @@
       </div>
     </nav>
   </header>
-  <span class="fsa-progress fsa-progress--indeterminate">
-    <span class="fsa-progress__bar">
-      <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress">Page loading</span>
-      <span class="fsa-progress__secondary"></span>
-    </span>
-  </span>
+  <div class="fsa-progress fsa-progress--indeterminate" aria-live="polite">
+    <div class="fsa-progress__details fsa-sr-only">
+      <div class="fsa-progress__label">Page loading</div>
+    </div>
+    <div class="fsa-progress__bar" aria-hidden="true">
+      <div class="fsa-progress__primary"></div>
+      <div class="fsa-progress__secondary"></div>
+    </div>
+  </div>
 
   <div class="fsa-section">
     <div class="fsa-section__bd">

diff --git a/src/demo/rwd__splash.html b/src/demo/rwd__splash.html
@@ -45,12 +45,15 @@
     <div class="fsa-splash__bd">
       <div class="fsa-splash__item">
         <div class="fsa-splash__progress">
-          <span class="fsa-progress fsa-progress--indeterminate">
-            <span class="fsa-progress__bar">
-              <span class="fsa-progress__primary" aria-live="polite" aria-label="Progress">Application is loading</span>
-              <span class="fsa-progress__secondary"></span>
-            </span>
-          </span>
+          <div class="fsa-progress fsa-progress--indeterminate" aria-live="polite">
+            <div class="fsa-progress__details fsa-sr-only">
+              <div class="fsa-progress__label">Application is loading</div>
+            </div>
+            <div class="fsa-progress__bar" aria-hidden="true">
+              <div class="fsa-progress__primary"></div>
+              <div class="fsa-progress__secondary"></div>
+            </div>
+          </div>
         </div>
         <div class="fsa-splash__title">
           <span class="fsa-splash__title-abbr">SPAR</span>