A11y: Enhance navbar docs (#1065)

docs/documentation/components/navbar.html

@@ -66,7 +66,7 @@ variables:
 {% endcapture %}
 
 {% capture navbar_brand_example %}
-<nav class="navbar">
+<nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
     <!-- navbar items, navbar burger ... -->
   </div>
@@ -74,31 +74,31 @@ variables:
 {% endcapture %}
 
 {% capture navbar_burger_example %}
-<div class="navbar-burger">
+<button class="button navbar-burger">
   <span></span>
   <span></span>
   <span></span>
-</div>
+</button>
 {% endcapture %}
 
 {% capture navbar_brand_items_example %}
-<nav class="navbar">
+<nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
     <a class="navbar-item" href="{{ site.url }}">
       <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
     </a>
 
-    <div class="navbar-burger">
+    <button class="button navbar-burger">
       <span></span>
       <span></span>
       <span></span>
-    </div>
+    </button>
   </div>
 </nav>
 {% endcapture %}
 
 {% capture navbar_menu_example %}
-<nav class="navbar">
+<nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
     <!-- navbar items, nav burger ... -->
   </div>
@@ -138,7 +138,7 @@ variables:
 
 {% capture navbar_item_brand_example %}
 <a class="navbar-item">
-  <img src="{{ site.url }}/images/bulma-logo.png" width="112" height="28">
+  <img src="{{ site.url }}/images/bulma-logo.png" width="112" height="28" alt="Bulma">
 </a>
 {% endcapture %}
 
@@ -168,7 +168,7 @@ variables:
     <p class="control">
       <a class="button">
         <span class="icon">
-          <i class="fa fa-twitter"></i>
+          <i class="fa fa-twitter" aria-hidden="true"></i>
         </span>
         <span>Tweet</span>
       </a>
@@ -176,7 +176,7 @@ variables:
     <p class="control">
       <a class="button is-primary">
         <span class="icon">
-          <i class="fa fa-download"></i>
+          <i class="fa fa-download" aria-hidden="true"></i>
         </span>
         <span>Download</span>
       </a>
@@ -190,7 +190,7 @@ variables:
 {% endcapture %}
 
 {% capture navbar_dropdown_example %}
-<nav class="navbar">
+<nav class="navbar" role="navigation" aria-label="dropdown navigation">
   <div class="navbar-item has-dropdown">
     <a class="navbar-link">
       Docs
@@ -222,7 +222,7 @@ variables:
 {% endcapture %}
 
 {% capture navbar_dropdown_hover_example %}
-<nav class="navbar">
+<nav class="navbar" role="navigation" aria-label="dropdown navigation">
   <div class="navbar-item has-dropdown is-hoverable">
     <a class="navbar-link">
       Docs
@@ -254,7 +254,7 @@ variables:
 {% endcapture %}
 
 {% capture navbar_dropdown_active_example %}
-<nav class="navbar">
+<nav class="navbar" role="navigation" aria-label="dropdown navigation">
   <div class="navbar-item has-dropdown is-active">
     <a class="navbar-link">
       Docs
@@ -286,7 +286,7 @@ variables:
 {% endcapture %}
 
 {% capture navbar_dropdown_right_example %}
-<nav class="navbar">
+<nav class="navbar" role="navigation" aria-label="dropdown navigation">
   <div class="navbar-menu">
     <div class="navbar-start">
       <div class="navbar-item has-dropdown is-active">
@@ -351,7 +351,7 @@ variables:
 {% endcapture %}
 
 {% capture navbar_dropdown_default_example %}
-<nav class="navbar">
+<nav class="navbar" role="navigation" aria-label="dropdown navigation">
   <a class="navbar-item">
     <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
   </a>
@@ -392,7 +392,7 @@ variables:
 {% endcapture %}
 
 {% capture navbar_dropdown_boxed_example %}
-<nav class="navbar is-transparent">
+<nav class="navbar is-transparent" role="navigation" aria-label="dropdown navigation">
   <a class="navbar-item">
     <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
   </a>
@@ -433,7 +433,7 @@ variables:
 {% endcapture %}
 
 {% capture navbar_dropdown_item_active_example %}
-<nav class="navbar">
+<nav class="navbar" role="navigation" aria-label="dropdown navigation">
   <a class="navbar-item">
     <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
   </a>
@@ -478,11 +478,11 @@ variables:
 {% endcapture %}
 
 {% capture navbar_js_html %}
-<div class="navbar-burger" data-target="navMenu">
+<button class="button navbar-burger" data-target="navMenu">
   <span></span>
   <span></span>
   <span></span>
-</div>
+</button>
 
 <div class="navbar-menu" id="navMenu">
   <!-- navbar-start, navbar-end... -->