A11y: Enhance dropdown examples. (#908)

- use button to can reach by keyboard and make a user with screen reader understand that's is a button.
- add aria-haspopup to make screen reader user understand this button have a drop-down.
- add aria-controls to make screen reader user understand this button control on items called x.
- should add aria-expanded by JS when user toggle button.

- add aria-hidden to icons.
- add href=# to links to make it a link we can interact with a keyboard.

- add role menu to menu drop-down to make sure this div is a menu.
- should add aria-hidden by JS and toggle it by button expanded.

diff --git a/docs/documentation/components/dropdown.html b/docs/documentation/components/dropdown.html
index 20227caac9f27e730bbb849ab7d41935044c6dd6..7ff7d61d15edc1714929a815fda3b65959ef3a2f 100644 (file)
--- a/docs/documentation/components/dropdown.html
+++ b/docs/documentation/components/dropdown.html
@@ -7,29 +7,29 @@ doc-subtab: dropdown
 {% capture dropdown_example %}
 <div class="dropdown is-active">
   <div class="dropdown-trigger">
-    <a class="button">
+    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
       <span>Dropdown button</span>
       <span class="icon is-small">
-        <i class="fa fa-angle-down"></i>
+        <i class="fa fa-angle-down" aria-hidden="true"></i>
       </span>
-    </a>
+    </button>
   </div>
-  <div class="dropdown-menu">
+  <div class="dropdown-menu" id="dropdown-menu" role="menu">
     <div class="dropdown-content">
-      <a class="dropdown-item">
+      <a href="#" class="dropdown-item">
         Dropdown item
       </a>
       <a class="dropdown-item">
         Other dropdown item
       </a>
-      <a class="dropdown-item is-active">
+      <a href="#" class="dropdown-item is-active">
         Active dropdown item
       </a>
-      <a class="dropdown-item">
+      <a href="#" class="dropdown-item">
         Other dropdown item
       </a>
       <hr class="dropdown-divider">
-      <a class="dropdown-item">
+      <a href="#" class="dropdown-item">
         With a divider
       </a>
     </div>
@@ -40,14 +40,14 @@ doc-subtab: dropdown
 {% capture dropdown_content_example %}
 <div class="dropdown is-active">
   <div class="dropdown-trigger">
-    <a class="button is-info">
+    <button class="button is-info" aria-haspopup="true" aria-controls="dropdown-menu2">
       <span>Content</span>
       <span class="icon is-small">
-        <i class="fa fa-angle-down"></i>
+        <i class="fa fa-angle-down" aria-hidden="true"></i>
       </span>
-    </a>
+    </button>
   </div>
-  <div class="dropdown-menu">
+  <div class="dropdown-menu" id="dropdown-menu2" role="menu">
     <div class="dropdown-content">
       <div class="dropdown-item">
         <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
@@ -57,7 +57,7 @@ doc-subtab: dropdown
         <p>You simply need to use a <code>&lt;div&gt;</code> instead.</p>
       </div>
       <hr class="dropdown-divider">
-      <a class="dropdown-item">
+      <a href="#" class="dropdown-item">
         This is a link
       </a>
     </div>
@@ -68,38 +68,38 @@ doc-subtab: dropdown
 {% capture dropdown_click_example %}
 <div class="dropdown">
   <div class="dropdown-trigger">
-    <a class="button is-primary">
+    <button class="button is-primary" aria-haspopup="true" aria-controls="dropdown-menu3">
       <span>Click me</span>
       <span class="icon is-small">
-        <i class="fa fa-angle-down"></i>
+        <i class="fa fa-angle-down" aria-hidden="true"></i>
       </span>
-    </a>
+    </button>
   </div>
-  <div class="dropdown-menu">
+  <div class="dropdown-menu" id="dropdown-menu3" role="menu">
     <div class="dropdown-content">
-      <a class="dropdown-item">
+      <a href="#" class="dropdown-item">
         Overview
       </a>
-      <a class="dropdown-item">
+      <a href="#" class="dropdown-item">
         Modifiers
       </a>
-      <a class="dropdown-item">
+      <a href="#" class="dropdown-item">
         Grid
       </a>
-      <a class="dropdown-item">
+      <a href="#" class="dropdown-item">
         Form
       </a>
-      <a class="dropdown-item">
+      <a href="#" class="dropdown-item">
         Elements
       </a>
-      <a class="dropdown-item">
+      <a href="#" class="dropdown-item">
         Components
       </a>
-      <a class="dropdown-item">
+      <a href="#" class="dropdown-item">
         Layout
       </a>
       <hr class="dropdown-divider">
-      <a class="dropdown-item">
+      <a href="#" class="dropdown-item">
         More
       </a>
     </div>
@@ -110,14 +110,14 @@ doc-subtab: dropdown
 {% capture dropdown_info_example %}
 <div class="dropdown is-hoverable">
   <div class="dropdown-trigger">
-    <a class="button is-info">
+    <button class="button is-info" aria-haspopup="true" aria-controls="dropdown-menu4">
       <span>Hover me</span>
       <span class="icon is-small">
-        <i class="fa fa-angle-down"></i>
+        <i class="fa fa-angle-down" aria-hidden="true"></i>
       </span>
-    </a>
+    </button>
   </div>
-  <div class="dropdown-menu">
+  <div class="dropdown-menu" id="dropdown-menu4" role="menu">
     <div class="dropdown-content">
       <div class="dropdown-item">
         <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
@@ -130,14 +130,14 @@ doc-subtab: dropdown
 {% capture dropdown_left_example %}
 <div class="dropdown is-active">
   <div class="dropdown-trigger">
-    <a class="button is-info">
+    <button class="button is-info" aria-haspopup="true" aria-controls="dropdown-menu5">
       <span>Left aligned</span>
       <span class="icon is-small">
-        <i class="fa fa-angle-down"></i>
+        <i class="fa fa-angle-down" aria-hidden="true"></i>
       </span>
-    </a>
+    </button>
   </div>
-  <div class="dropdown-menu">
+  <div class="dropdown-menu" id="dropdown-menu5" role="menu">
     <div class="dropdown-content">
       <div class="dropdown-item">
         <p>The dropdown is <strong>left-aligned</strong> by default.</p>
@@ -150,14 +150,14 @@ doc-subtab: dropdown
 {% capture dropdown_right_example %}
 <div class="dropdown is-right is-active">
   <div class="dropdown-trigger">
-    <a class="button is-info">
+    <button class="button is-info" aria-haspopup="true" aria-controls="dropdown-menu6">
       <span>Right aligned</span>
       <span class="icon is-small">
-        <i class="fa fa-angle-down"></i>
+        <i class="fa fa-angle-down" aria-hidden="true"></i>
       </span>
-    </a>
+    </button>
   </div>
-  <div class="dropdown-menu">
+  <div class="dropdown-menu" id="dropdown-menu6" role="menu">
     <div class="dropdown-content">
       <div class="dropdown-item">
         <p>Add the <code>is-right</code> modifier for a <strong>right-aligned</strong> dropdown.</p>