From bdcbdc9433d85c0b3f7be96938dac2f2e5d1ee98 Mon Sep 17 00:00:00 2001
From: Tim Roes <github@timroes.de>
Date: Wed, 12 Jul 2017 08:32:58 -0700
Subject: [PATCH] Fix several a11y issues in the discover app (#12681)

* Fix minor a11y issues in field filter

aria-expanded is a true/false/undefined state so we need to make sure
even if showFilter is undefined, we will print false (that's why the
double negation)

aria-haspopup doesn't really fit, since this is not a popup in the sense
the ARIA standard describes ("A popup is generally presented visually as
a group of items that appears to be on top of the main page content.")

Add aria-controls to reference the controlled element.

Fix #12638 and toggle label when filter toggles

* Add labels to magnifiers in field filter (Fix #12635)

* Add search role for discover search (Fix #12642)

* Describe the search input with the lucene query syntax link

* Make collapsible-sidebar a11y (Fix #12636)

* Fix id to use camel-case
---
 .../discover/components/field_chooser/field_chooser.html  | 8 ++++----
 .../components/field_chooser/lib/detail_views/string.html | 2 ++
 src/core_plugins/kibana/public/discover/index.html        | 6 ++++--
 src/ui/public/collapsible_sidebar/collapsible_sidebar.js  | 8 ++++++++
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html b/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html
index 87336115c7795..f4d24cf3d2f4e 100644
--- a/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html
+++ b/src/core_plugins/kibana/public/discover/components/field_chooser/field_chooser.html
@@ -55,16 +55,16 @@ <h3 class="sidebar-list-header-label" id="available_fields" tabindex="0">Availab
         ng-class="{ 'kuiButton--basic': !filter.active, 'kuiButton--primary': filter.active, 'hidden-xs': !showFields, 'hidden-sm': !showFields }"
         class="kuiButton kuiButton--small pull-right discover-field-filter-toggle"
         ng-click="showFilter = !showFilter"
-        aria-label="Show field settings"
-        aria-haspopup="true"
-        aria-expanded="{{showFilter}}"
+        aria-label="{{showFilter ? 'Hide' : 'Show'}} field settings"
+        aria-expanded="{{!!showFilter}}"
+        aria-controls="discoverFieldFilter"
       >
         <span aria-hidden="true" class="kuiIcon fa-gear"></span>
       </button>
     </h3>
   </div>
 
-  <div class="sidebar-item discover-field-details" ng-show="showFilter">
+  <div class="sidebar-item discover-field-details" ng-show="showFilter" id="discoverFieldFilter">
     <form role="form">
       <div class="form-group">
         <label for="discoverFieldChooserFilterAggregatable">
diff --git a/src/core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html b/src/core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html
index de8ded1302b70..fee3f394745ea 100644
--- a/src/core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html
+++ b/src/core_plugins/kibana/public/discover/components/field_chooser/lib/detail_views/string.html
@@ -42,6 +42,7 @@
             <button
               class="discover-field-details-item-button"
               ng-click="onAddFilter(field, bucket.value, '+')"
+              aria-label="Filter for this value"
               data-test-subj="plus-{{::field.name}}-{{::bucket.display}}"
             >
               <span
@@ -53,6 +54,7 @@
             <button
               class="discover-field-details-item-button"
               ng-click="onAddFilter(field, bucket.value, '-')"
+              aria-label="Filter out this value"
               data-test-subj="minus-{{::field.name}}-{{::bucket.display}}"
             >
               <span
diff --git a/src/core_plugins/kibana/public/discover/index.html b/src/core_plugins/kibana/public/discover/index.html
index 4bdec9573ce44..a4d4571b6a130 100644
--- a/src/core_plugins/kibana/public/discover/index.html
+++ b/src/core_plugins/kibana/public/discover/index.html
@@ -23,7 +23,7 @@ <h1 tabindex="0" id="kui_local_breadcrumb" class="kuiLocalBreadcrumb">
         name="discoverSearch"
         ng-submit="fetch()"
       >
-        <div class="typeahead" kbn-typeahead="discover" on-select="fetch()">
+        <div class="typeahead" kbn-typeahead="discover" on-select="fetch()" role="search">
           <div class="kuiLocalSearch">
             <div class="kuiLocalSearchAssistedInput">
               <input
@@ -33,6 +33,7 @@ <h1 tabindex="0" id="kui_local_breadcrumb" class="kuiLocalBreadcrumb">
                 ng-model="state.query"
                 placeholder="Search... (e.g. status:200 AND extension:PHP)"
                 aria-label="Search input"
+                aria-describedby="discover-lucene-syntax-hint"
                 type="text"
                 class="kuiLocalSearchInput kuiLocalSearchInput--lucene"
                 ng-class="{'kuiLocalSearchInput-isInvalid': discoverSearch.$invalid}"
@@ -40,6 +41,7 @@ <h1 tabindex="0" id="kui_local_breadcrumb" class="kuiLocalBreadcrumb">
               <div class="kuiLocalSearchAssistedInput__assistance">
                 <p class="kuiText">
                   <a
+                    id="discover-lucene-syntax-hint"
                     class="kuiLink"
                     ng-href="{{queryDocLinks.luceneQuerySyntax}}"
                     target="_blank"
@@ -72,7 +74,7 @@ <h1 tabindex="0" id="kui_local_breadcrumb" class="kuiLocalBreadcrumb">
       ></filter-bar>
     </div>
     <div class="row">
-      <div class="col-md-2 sidebar-container collapsible-sidebar">
+      <div class="col-md-2 sidebar-container collapsible-sidebar" id="discover-sidebar">
         <disc-field-chooser
           columns="state.columns"
           hits="rows"
diff --git a/src/ui/public/collapsible_sidebar/collapsible_sidebar.js b/src/ui/public/collapsible_sidebar/collapsible_sidebar.js
index ea95a773c6629..162b6ab0732db 100644
--- a/src/ui/public/collapsible_sidebar/collapsible_sidebar.js
+++ b/src/ui/public/collapsible_sidebar/collapsible_sidebar.js
@@ -18,9 +18,15 @@ uiModules
         `<button
           data-test-subj="collapseSideBarButton"
           type="button"
+          aria-expanded="true"
+          aria-label="Toggle sidebar"
           class="kuiCollapseButton sidebar-collapser"
         ></button>`
       );
+      // If the collapsable element has an id, also set aria-controls
+      if ($elem.attr('id')) {
+        $collapser.attr('aria-controls', $elem.attr('id'));
+      }
       const $icon = $('<span class="kuiIcon fa-chevron-circle-left"></span>');
       $collapser.append($icon);
       const $siblings = $elem.siblings();
@@ -39,11 +45,13 @@ uiModules
           $elem.removeClass('closed');
           $icon.addClass('fa-chevron-circle-left');
           $icon.removeClass('fa-chevron-circle-right');
+          $collapser.attr('aria-expanded', 'true');
         } else {
           isCollapsed = true;
           $elem.addClass('closed');
           $icon.removeClass('fa-chevron-circle-left');
           $icon.addClass('fa-chevron-circle-right');
+          $collapser.attr('aria-expanded', 'false');
         }
 
         if (hasSingleSibling) {