Progress documentation updated

docs/progress.html

@@ -45,7 +45,7 @@
     <!-- Insert your page content here-->
     <main><div class="container">
       <div class="row" style="padding-top: 40px;">
-        <div class="col-sm">
+        <div class="col-sm col-lg-10 col-lg-offset-1">
           <h1>Progress</h1>
           <p>The <strong>progress</strong> module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading.</p>
           <p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
@@ -53,7 +53,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm">
+        <div class="col-sm col-lg-10 col-lg-offset-1">
           <div class="card fluid">
             <div class="section">
               <h2>Quick overview</h2>
@@ -68,7 +68,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm">
+        <div class="col-sm col-lg-10 col-lg-offset-1">
           <div class="card fluid">
             <div class="section"><h2>Basic progress bar</h2></div>
             <div class="section row">
@@ -106,7 +106,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm">
+        <div class="col-sm col-lg-10 col-lg-offset-1">
           <div class="card fluid">
             <div class="section"><h2>Progress bar variants</h2></div>
             <div class="section row">
@@ -149,7 +149,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm">
+        <div class="col-sm col-lg-10 col-lg-offset-1">
           <div class="card fluid">
             <div class="section"><h2>Donut spinner</h2></div>
             <div class="section row">
@@ -168,6 +168,7 @@
             <h3>Notes</h3>
               <ul>
                 <li>The <code>.spinner-donut</code> is an animated component, meaning that if a browsers does not support animation, this element might display incorrectly.</li>
+				<li>In certain cases, it might be useful to add the <code><span class="fore-secondary">role</span>=<span class="fore-primary">&quot;progressbar&quot;</span></code> attribute to increase donut spinner accessibility.</li>
               </ul><hr>
               <div class="row">
                 <div class="col-sm-12 col-md-6">
@@ -184,7 +185,7 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-sm">
+        <div class="col-sm col-lg-10 col-lg-offset-1">
           <div class="card fluid">
             <div class="section"><h2>Donut spinner variants</h2></div>
             <div class="section row">
@@ -211,7 +212,7 @@
         </div>
       </div>
       <div class="row" style="padding-bottom: 20px; padding-top:20px;">
-        <div class="col-sm">
+        <div class="col-sm col-lg-10 col-lg-offset-1">
           <p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
         </div>
       </div>

docs/tab.html

@@ -98,7 +98,7 @@
                     </ol>
                   </li>
                 </ul>
-                <p>Tabs are responsive and will collapse into a stacked display on smaller screens, allowing the user to view the actual content more easily. The tab container's syntax is accessible, but parts of it might confuse screen readers, so we suggest adding the <code><span class="fore-secondary">aria-hidden</span>=<span class="fore-primary">&quot;true&quot;</span></code> to all the <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code> elements inside the <code>.tabs</code> container.</p>
+                <p>Tabs are responsive and will collapse into a stacked display on smaller screens, allowing the user to view the actual content more easily. The tab container's syntax is accessible, but parts of it might confuse screen readers, so we suggest adding the <code><span class="fore-secondary">aria-hidden</span>=<span class="fore-primary">&quot;true&quot;</span></code> attribute to all the <code>&lt;input&gt;</code> and <code>&lt;label&gt;</code> elements inside the <code>.tabs</code> container.</p>
                 <h3>Sample code</h3>
                 <pre>&lt;div class=&quot;tabs&quot;&gt;
   &lt;input type=&quot;radio&quot; name=&quot;tab-group&quot; id=&quot;tab1&quot; checked aria-hidden=&quot;true&quot;&gt;

docs/v2/DEVLOG.md

@@ -849,3 +849,4 @@
 
 - Fed **hugging cat**, it's even happier now.
 - Updated `tab.html` with some minor accessibility guidelines and new layout.
+- Updated `progress.html` with an accessibility guideline and new layout.