ARIA cleanup of Progress component. Begin doc'ing examples [amends #356]

USDA-FSA · Sep 26, 2019 · 0e0f352 · 0e0f352
1 parent 7b3c36e
commit 0e0f352
Show file tree

Hide file tree

Showing 4 changed files with 192 additions and 554 deletions.
diff --git a/src/demo/rwd__progress.html b/src/demo/rwd__progress.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+
+<!--[if lt IE 9]><html class="lt-ie9"><![endif]-->
+<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <title>fsa-style Demo</title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="../css/fsa-style.min.css" media="all">
+  <link rel="stylesheet" href="../css/fsa-style-docs.min.css" media="all">
+  <!--[if lt IE 9]>
+    <script src="../js/vendor/html5shiv.js"></script>
+    <script src="../js/vendor/respond.js"></script>
+    <script src="../js/vendor/selectivizr-min.js"></script>
+    <script src="../js/vendor/rem.min.js"></script>
+  <![endif]-->
+</head>
+<body>
+
+  <!--[if lt IE 10]><p class="fsa-browser-upgrade">You are using an <strong>outdated</strong> browser. Please <strong><a href="http://browsehappy.com/">upgrade your browser</a></strong> to obtain a secure and improved experience.</p><![endif]-->
+
+  <a class="skipnav" href="#primary-navigation">Skip to primary navigation</a>
+  <a class="skipnav" href="#main-content">Skip to main content</a>
+
+  <header>
+    <div class="fsa-tophat">
+      <div class="fsa-tophat__bd">
+        <div class="fsa-tophat__primary">
+          <span class="fsa-tophat__agency">
+            <a class="fsa-tophat__link" href="//usda.gov" title="Link to USDA homepage">
+              <img role="presentation" class="fsa-tophat__agency-logo" src="img/usda-logo--white.svg" alt="">
+              <abbr class="fsa-tophat__agency-abbr" title="United States Department of Agriculture">USDA</abbr>
+              <span class="fsa-tophat__agency-fullname">United States Department of Agriculture</span>
+            </a>
+          </span>
+        </div>
+        <div class="fsa-tophat__secondary">
+          <span class="fsa-tophat__subagency">
+            Farm Production and Conservation
+          </span>
+        </div>
+      </div>
+    </div>
+    <div class="fsa-header-app">
+      <div class="fsa-header-app__bd">
+        <div class="fsa-header-app__primary">
+          <a class="fsa-header-app__home-link" href="boilerplate.html" title="Link to YAFANS home">
+            <span class="fsa-header-app__app-name">
+              <abbr class="fsa-header-app__app-abbr" title="Electronic Loan Deficiency Payment Schedule">YAFANS</abbr>
+              <span class="fsa-header-app__app-full">Yet Another Farm App Name Superlong</span>
+            </span>
+          </a>
+        </div>
+        <div class="fsa-header-app__secondary">
+          <span class="fsa-header-app__profile">
+            <span class="fsa-header-app__profile-name">Brandon Reuben</span>
+            <a href="https://www.eauth.usda.gov/Logout/logoff.asp" class="fsa-header-app__profile-link">Log out</a>
+          </span>
+        </div>
+      </div>
+    </div>
+    <nav>
+      <div class="fsa-nav-global">
+        <div class="fsa-nav-global__bd">
+          <ul class="fsa-nav-global__list" aria-label="Primary Navigation" id="primary-navigation">
+            <li class="fsa-nav-global__list-item">
+              <a class="fsa-nav-global__link fsa-nav-global__link--active" href="link.html">
+                <span class="fsa-nav-global__text">Lorem</span>
+              </a>
+            </li>
+            <li class="fsa-nav-global__list-item">
+              <a class="fsa-nav-global__link" href="link.html">
+                <span class="fsa-nav-global__text">Ipsum</span>
+              </a>
+            </li>
+            <li class="fsa-nav-global__list-item">
+              <a class="fsa-nav-global__link" href="link.html">
+                <span class="fsa-nav-global__text">Dolor</span>
+              </a>
+            </li>
+            <li class="fsa-nav-global__list-item">
+              <a class="fsa-nav-global__link" href="link.html">
+                <span class="fsa-nav-global__text">Amet</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </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-section">
+    <div class="fsa-section__bd">
+      <p>Est vitae quas tempora quo incidunt fugit, voluptatum quos labore officia error! Excepturi, quam ratione quibusdam cumque sint beatae libero amet adipisci!</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod fuga, repudiandae sit pariatur inventore hic ipsum a eveniet id nesciunt ipsa dolorem veritatis ratione qui delectus labore distinctio doloribus corporis.</p>
+      <p>Itaque explicabo doloremque, nesciunt autem dignissimos aspernatur animi et in quae est deserunt excepturi quasi earum harum similique suscipit at accusantium, quibusdam odio pariatur ea sint vel! Debitis, ullam exercitationem?</p>
+      <p>Exercitationem maxime ab nostrum, numquam labore veniam itaque similique molestias! In nemo expedita aut delectus. Veniam ea voluptatum ipsam delectus at eaque iure libero? Hic molestiae fugit excepturi nisi ullam!</p>
+    </div>
+  </div>
+  <script src="../js/fsa-style-docs.min.js"></script>
+</body>
+</html>
diff --git a/src/index.html b/src/index.html
@@ -147,6 +147,7 @@ <h1 class="docs__bd docs__title">fsa-style <span class="docs__title__version" ti
                 <li class="docs__primary-nav-sub-item"><a class="docs__primary-nav-sub-link" href="#component__breadcrumbs">Breadcrumbs</a></li>
                 <li class="docs__primary-nav-sub-item"><a class="docs__primary-nav-sub-link" href="#component__labels">Labels</a></li>
                 <li class="docs__primary-nav-sub-item"><a class="docs__primary-nav-sub-link" href="#component__badges">Badges</a></li>
+                <li class="docs__primary-nav-sub-item"><a class="docs__primary-nav-sub-link" href="#component__progress">Progress</a></li>
                 <li class="docs__primary-nav-sub-item"><a class="docs__primary-nav-sub-link" href="#component__tophat">Header: Tophat</a></li>
                 <li class="docs__primary-nav-sub-item"><a class="docs__primary-nav-sub-link" href="#component__header-app">Header: App</a></li>
                 <li class="docs__primary-nav-sub-item"><a class="docs__primary-nav-sub-link" href="#component__top-nav">Header: Global Nav</a></li>
@@ -4721,6 +4722,9 @@ <h3 class="docs__figure"><a class="docs__anchor" aria-hidden="true" href="#compo
           </p>
         </div>
       </div>
+      <div class="docs__jump-target" id="component__progress">
+        <div class="fsa-box" style="height:200px;background-color:orangered"></div>
+      </div>
       <div class="docs__jump-target" id="component__tophat">
         <div class="docs__bd docs__section-title">
           <h3 class="docs__figure"><a class="docs__anchor" aria-hidden="true" href="#component__tophat">#</a>Header: Top Hat</h3>