Improve Console screen-reader accessibility: (elastic#11602)

- Add aria-label for Console History entries. - Add aria-label and aria-labelledby to Console Request 'wrench' menu.
snide · May 30, 2017 · 4399213 · 4399213
1 parent 9373141
commit 4399213
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/src/core_plugins/console/public/index.html b/src/core_plugins/console/public/index.html
@@ -12,11 +12,20 @@
           </a>
         </kbn-tooltip>
         <span dropdown>
-          <a class="editor_action" dropdown-toggle href="#">
-            <i class="fa fa-wrench"></i>
+          <a
+            id="consoleRequestOptions"
+            class="editor_action"
+            dropdown-toggle href="#"
+            aria-label="Request options"
+          >
+            <span class="kuiIcon fa-wrench"></span>
           </a>
 
-          <ul class="dropdown-menu" role="menu" aria-labelledby="split-button">
+          <ul
+            class="dropdown-menu"
+            role="menu"
+            aria-labelledby="consoleRequestOptions"
+          >
             <li role="menuitem">
               <a class="link" id="copy_as_curl">Copy as cURL</a>
             </li>

diff --git a/src/core_plugins/console/public/src/directives/history.html b/src/core_plugins/console/public/src/directives/history.html
@@ -9,7 +9,7 @@
       ng-mouseenter="history.viewingReq = req"
       ng-mouseleave="history.viewingReq = history.selectedReq"
       ng-dblclick="history.restore(req)"
-      title="{{ req.description }}"
+      aria-label="{{:: 'Request: ' + history.describeReq(req) }}"
       class="list-group-item history-req"
     >
       {{ history.describeReq(req) }}
@@ -25,7 +25,8 @@
   <button
     class="kuiButton kuiButton--primary"
     ng-disabled="!history.selectedReq"
-    ng-click="history.restore()">
+    ng-click="history.restore()"
+  >
     Apply
   </button>
 </div>