A11y: Enhance components docs

docs/documentation/components/breadcrumb.html

@@ -43,10 +43,38 @@ doc-subtab: breadcrumb
 {% capture breadcrumb_icons_example %}
 <nav class="breadcrumb" aria-label="breadcrumbs">
   <ul>
-    <li><a href="#"><span class="icon is-small"><i class="fas fa-home"></i></span><span>Bulma</span></a></li>
-    <li><a href="#"><span class="icon is-small"><i class="fas fa-book"></i></span><span>Documentation</span></a></li>
-    <li><a href="#"><span class="icon is-small"><i class="fas fa-puzzle-piece"></i></span><span>Components</span></a></li>
-    <li class="is-active"><a href="#" aria-current="page"><span class="icon is-small"><i class="fas fa-thumbs-up" aria-hidden="true"></i></span><span>Breadcrumb</span></a></li>
+    <li>
+      <a href="#">
+        <span class="icon is-small">
+          <i class="fas fa-home" aria-hidden="true"></i>
+        </span>
+        <span>Bulma</span>
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        <span class="icon is-small">
+          <i class="fas fa-book" aria-hidden="true"></i>
+        </span>
+        <span>Documentation</span>
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        <span class="icon is-small">
+          <i class="fas fa-puzzle-piece" aria-hidden="true"></i>
+        </span>
+        <span>Components</span>
+      </a>
+    </li>
+    <li class="is-active">
+      <a href="#">
+        <span class="icon is-small">
+          <i class="fas fa-thumbs-up" aria-hidden="true"></i>
+        </span>
+        <span>Breadcrumb</span>
+      </a>
+    </li>
   </ul>
 </nav>
 {% endcapture %}

docs/documentation/components/modal.html

@@ -80,7 +80,7 @@ doc-subtab: modal
         </li>
       </ul>
       <p>
-        <a class="button is-primary is-large modal-button" data-target="modal">Launch example modal</a>
+        <button class="button is-primary is-large modal-button" data-target="modal" aria-haspopup="true">Launch example modal</button>
       </p>
     </div>
 
@@ -119,7 +119,7 @@ doc-subtab: modal
     <div class="content">
       <p>If you want a more classic modal, with a <strong>head</strong>, a <strong>body</strong> and a <strong>foot</strong>, use the <code>modal-card</code>.</p>
       <p>
-        <a class="button is-primary is-large modal-button" data-target="modal-ter">Launch modal card</a>
+        <button class="button is-primary is-large modal-button" data-target="modal-bis" aria-haspopup="true">Launch image modal</button>
       </p>
     </div>
 
@@ -152,14 +152,15 @@ doc-subtab: modal
           </div>
           <nav class="level is-mobile">
             <div class="level-left">
-              <a class="level-item">
-                <span class="icon is-small"><i class="fas fa-reply"></i></span>
-              </a>
-              <a class="level-item">
-                <span class="icon is-small"><i class="fas fa-retweet"></i></span>
-              </a>
-              <a class="level-item">
-                <span class="icon is-small"><i class="fas fa-heart"></i></span>
+              <a class="level-item" aria-label="retweet">
+                  <span class="icon is-small">
+                    <i class="fas fa-retweet" aria-hidden="true"></i>
+                  </span>
+                </a>
+                <a class="level-item" aria-label="like">
+                  <span class="icon is-small">
+                    <i class="fas fa-heart" aria-hidden="true"></i>
+                </span>
               </a>
             </div>
           </nav>
@@ -167,17 +168,17 @@ doc-subtab: modal
       </article>
     </div>
   </div>
-  <button class="modal-close is-large"></button>
+  <button class="modal-close is-large" aria-label="close"></button>
 </div>
 
 <div id="modal-bis" class="modal">
   <div class="modal-background"></div>
   <div class="modal-content">
     <p class="image is-4by3">
-      <img src="{{site.url}}/images/placeholders/1280x960.png">
+      <img src="{{site.url}}/images/placeholders/1280x960.png" alt="">
     </p>
   </div>
-  <button class="modal-close is-large"></button>
+  <button class="modal-close is-large" aria-label="close"></button>
 </div>
 
 <div id="modal-ter" class="modal">
@@ -185,7 +186,7 @@ doc-subtab: modal
   <div class="modal-card">
     <header class="modal-card-head">
       <p class="modal-card-title">Modal title</p>
-      <button class="delete"></button>
+      <button class="delete" aria-label="close"></button>
     </header>
     <section class="modal-card-body">
       <div class="content">
@@ -226,8 +227,8 @@ doc-subtab: modal
       </div>
     </section>
     <footer class="modal-card-foot">
-      <a class="button is-success">Save changes</a>
-      <a class="button">Cancel</a>
+      <button class="button is-success">Save changes</button>
+      <button class="button">Cancel</button>
     </footer>
   </div>
 </div>

docs/documentation/components/nav.html

@@ -53,20 +53,20 @@ doc-subtab: nav
 {% capture nav_example %}
 <nav class="nav">
   <div class="nav-left">
-    <a class="nav-item">
-      <img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma logo">
+    <a class="nav-item" href="#">
+      <img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma">
     </a>
   </div>
 
   <div class="nav-center">
     <a class="nav-item">
       <span class="icon">
-        <i class="fab fa-github"></i>
+        <i class="fas fa-github" aria-hidden="true"></i>
       </span>
     </a>
     <a class="nav-item">
       <span class="icon">
-        <i class="fab fa-twitter"></i>
+        <i class="fas fa-twitter" aria-hidden="true"></i>
       </span>
     </a>
   </div>
@@ -95,9 +95,9 @@ doc-subtab: nav
     <div class="nav-item">
       <div class="field is-grouped">
         <p class="control">
-          <a class="button" >
+          <a class="button">
             <span class="icon">
-              <i class="fab fa-twitter"></i>
+              <i class="fas fa-twitter" aria-hidden="true"></i>
             </span>
             <span>Tweet</span>
           </a>
@@ -105,7 +105,7 @@ doc-subtab: nav
         <p class="control">
           <a class="button is-primary">
             <span class="icon">
-              <i class="fas fa-download"></i>
+              <i class="fas fa-download" aria-hidden="true"></i>
             </span>
             <span>Download</span>
           </a>
@@ -145,9 +145,9 @@ doc-subtab: nav
   <div class="container">
     <div class="nav-left">
       <a class="nav-item">
-        <img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma logo">
+        <img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma">
       </a>
-      <a class="nav-item is-tab is-hidden-mobile is-active">Home</a>
+      <a class="nav-item is-tab is-hidden-mobile is-active" aria-current="page">Home</a>
       <a class="nav-item is-tab is-hidden-mobile">Features</a>
       <a class="nav-item is-tab is-hidden-mobile">Pricing</a>
       <a class="nav-item is-tab is-hidden-mobile">About</a>
@@ -158,13 +158,13 @@ doc-subtab: nav
       <span></span>
     </span>
     <div class="nav-right nav-menu">
-      <a class="nav-item is-tab is-hidden-tablet is-active">Home</a>
+      <a class="nav-item is-tab is-hidden-tablet is-active" aria-current="page">Home</a>
       <a class="nav-item is-tab is-hidden-tablet">Features</a>
       <a class="nav-item is-tab is-hidden-tablet">Pricing</a>
       <a class="nav-item is-tab is-hidden-tablet">About</a>
       <a class="nav-item is-tab">
         <figure class="image is-16x16" style="margin-right: 8px;">
-          <img src="{{site.url}}/images/jgthms.png">
+          <img src="{{site.url}}/images/jgthms.png" alt="">
         </figure>
         Profile
       </a>

docs/documentation/components/navbar.html

@@ -20,11 +20,11 @@ doc-subtab: navbar
 {% endcapture %}
 
 {% capture navbar_burger_example %}
-<div class="navbar-burger">
-  <span></span>
-  <span></span>
-  <span></span>
-</div>
+<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
+  <span aria-hidden="true"></span>
+  <span aria-hidden="true"></span>
+  <span aria-hidden="true"></span>
+</a>
 {% endcapture %}
 
 {% capture navbar_brand_items_example %}
@@ -34,11 +34,11 @@ doc-subtab: navbar
       <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
     </a>
 
-    <div class="navbar-burger">
-      <span></span>
-      <span></span>
-      <span></span>
-    </div>
+    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+    </a>
   </div>
 </nav>
 {% endcapture %}
@@ -114,7 +114,7 @@ doc-subtab: navbar
     <p class="control">
       <a class="button">
         <span class="icon">
-          <i class="fab fa-twitter" aria-hidden="true"></i>
+          <i class="fas fa-twitter" aria-hidden="true"></i>
         </span>
         <span>Tweet</span>
       </a>
@@ -478,11 +478,11 @@ doc-subtab: navbar
 {% endcapture %}
 
 {% capture navbar_js_html %}
-<div class="navbar-burger" data-target="navMenu">
-  <span></span>
-  <span></span>
-  <span></span>
-</div>
+<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
+  <span aria-hidden="true"></span>
+  <span aria-hidden="true"></span>
+  <span aria-hidden="true"></span>
+</a>
 
 <div class="navbar-menu" id="navMenu">
   <!-- navbar-start, navbar-end... -->
@@ -641,12 +641,12 @@ document.addEventListener('DOMContentLoaded', function () {
       </p>
     </div>
 
-    <div class="bd-example is-paddingless">
-      <div class="navbar-burger" style="display: flex;">
-        <span></span>
-        <span></span>
-        <span></span>
-      </div>
+    <div class="example is-paddingless">
+      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" style="display: flex;">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
     </div>
 
     {% highlight html %}{{ navbar_burger_example }}{% endhighlight %}
@@ -657,12 +657,12 @@ document.addEventListener('DOMContentLoaded', function () {
       </p>
     </div>
 
-    <div class="bd-example is-paddingless">
-      <div class="navbar-burger is-active" style="display: flex;">
-        <span></span>
-        <span></span>
-        <span></span>
-      </div>
+    <div class="example is-paddingless">
+      <a role="button" class="navbar-burger is-active" aria-label="menu" aria-expanded="false" style="display: flex;">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
     </div>
 
     {% include anchor.html name="Navbar menu" %}

docs/documentation/components/panel.html

@@ -14,7 +14,7 @@ doc-subtab: panel
     <p class="control has-icons-left">
       <input class="input is-small" type="text" placeholder="search">
       <span class="icon is-small is-left">
-        <i class="fas fa-search"></i>
+        <i class="fas fa-search" aria-hidden="true"></i>
       </span>
     </p>
   </div>
@@ -27,37 +27,37 @@ doc-subtab: panel
   </p>
   <a class="panel-block is-active">
     <span class="panel-icon">
-      <i class="fas fa-book"></i>
+      <i class="fas fa-book" aria-hidden="true"></i>
     </span>
     bulma
   </a>
   <a class="panel-block">
     <span class="panel-icon">
-      <i class="fas fa-book"></i>
+      <i class="fas fa-book" aria-hidden="true"></i>
     </span>
     marksheet
   </a>
   <a class="panel-block">
     <span class="panel-icon">
-      <i class="fas fa-book"></i>
+      <i class="fas fa-book" aria-hidden="true"></i>
     </span>
     minireset.css
   </a>
   <a class="panel-block">
     <span class="panel-icon">
-      <i class="fas fa-book"></i>
+      <i class="fas fa-book" aria-hidden="true"></i>
     </span>
     jgthms.github.io
   </a>
   <a class="panel-block">
     <span class="panel-icon">
-      <i class="fas fa-code-branch"></i>
+      <i class="fas fa-code-fork" aria-hidden="true"></i>
     </span>
     daniellowtw/infboard
   </a>
   <a class="panel-block">
     <span class="panel-icon">
-      <i class="fas fa-code-branch"></i>
+      <i class="fas fa-code-fork" aria-hidden="true"></i>
     </span>
     mojs
   </a>

docs/documentation/components/tabs.html

@@ -43,25 +43,25 @@ doc-subtab: tabs
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon is-small"><i class="fas fa-image"></i></span>
+        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-music"></i></span>
+        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-film"></i></span>
+        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
+        <span class="icon is-small"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -107,25 +107,25 @@ doc-subtab: tabs
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon is-small"><i class="fas fa-image"></i></span>
+        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-music"></i></span>
+        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-film"></i></span>
+        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
+        <span class="icon is-small"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -138,25 +138,25 @@ doc-subtab: tabs
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon is-small"><i class="fas fa-image"></i></span>
+        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-music"></i></span>
+        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-film"></i></span>
+        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
+        <span class="icon is-small"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -200,20 +200,20 @@ doc-subtab: tabs
   <ul>
     <li>
       <a>
-        <span class="icon"><i class="fas fa-angle-left"></i></span>
+        <span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
         <span>Left</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon"><i class="fas fa-angle-up"></i></span>
+        <span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
         <span>Up</span>
       </a>
     </li>
     <li>
       <a>
         <span>Right</span>
-        <span class="icon"><i class="fas fa-angle-right"></i></span>
+        <span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
       </a>
     </li>
   </ul>
@@ -225,25 +225,25 @@ doc-subtab: tabs
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon is-small"><i class="fas fa-image"></i></span>
+        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-music"></i></span>
+        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-film"></i></span>
+        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
+        <span class="icon is-small"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -256,25 +256,25 @@ doc-subtab: tabs
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon is-small"><i class="fas fa-image"></i></span>
+        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-music"></i></span>
+        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-film"></i></span>
+        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
+        <span class="icon is-small"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -287,25 +287,25 @@ doc-subtab: tabs
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon is-small"><i class="fas fa-image"></i></span>
+        <span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-music"></i></span>
+        <span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-film"></i></span>
+        <span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon is-small"><i class="fas fa-file-alt"></i></span>
+        <span class="icon is-small"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>
     </li>
@@ -318,25 +318,25 @@ doc-subtab: tabs
   <ul>
     <li class="is-active">
       <a>
-        <span class="icon"><i class="fas fa-image"></i></span>
+        <span class="icon"><i class="fas fa-image" aria-hidden="true"></i></span>
         <span>Pictures</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon"><i class="fas fa-music"></i></span>
+        <span class="icon"><i class="fas fa-music" aria-hidden="true"></i></span>
         <span>Music</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon"><i class="fas fa-film"></i></span>
+        <span class="icon"><i class="fas fa-film" aria-hidden="true"></i></span>
         <span>Videos</span>
       </a>
     </li>
     <li>
       <a>
-        <span class="icon"><i class="fas fa-file-alt"></i></span>
+        <span class="icon"><i class="fas fa-file-text-o" aria-hidden="true"></i></span>
         <span>Documents</span>
       </a>
     </li>

docs/documentation/elements/box.html

@@ -25,14 +25,20 @@ doc-subtab: box
       </div>
       <nav class="level is-mobile">
         <div class="level-left">
-          <a class="level-item">
-            <span class="icon is-small"><i class="fas fa-reply"></i></span>
+          <a class="level-item" aria-label="reply">
+            <span class="icon is-small">
+              <i class="fas fa-reply" aria-hidden="true"></i>
+            </span>
           </a>
-          <a class="level-item">
-            <span class="icon is-small"><i class="fas fa-retweet"></i></span>
+          <a class="level-item" aria-label="retweet">
+            <span class="icon is-small">
+              <i class="fas fa-retweet" aria-hidden="true"></i>
+            </span>
           </a>
-          <a class="level-item">
-            <span class="icon is-small"><i class="fas fa-heart"></i></span>
+          <a class="level-item" aria-label="like">
+            <span class="icon is-small">
+              <i class="fas fa-heart" aria-hidden="true"></i>
+            </span>
           </a>
         </div>
       </nav>