From e0fba828c97bfc91b8f268f2047eff33fccc989a Mon Sep 17 00:00:00 2001
From: Matt Bargar <mbargar@gmail.com>
Date: Thu, 9 Aug 2018 11:23:02 -0400
Subject: [PATCH] Make query bar autocomplete screen reader accessible (#20740)

Fixes https://github.com/elastic/kibana/issues/20099

I made the changes described by Tim at https://github.com/elastic/kibana/issues/20099 and everything seems to be working. I tried to update the typeahead in such a way that it can be made accessible anywhere it is used, even if there are multiple typeahead instances on a single page.

> (optional) an aria-label on the individual suggestions that should be read out to screen reader. By default the content will be used, and that should be fine (unless you figure out there is too much "noise" elements in it.

I did not do this bit since the text that is read seems reasonable to me, but I'm open to changing it if others feel differently.
---
 src/ui/public/query_bar/directive/query_bar.html  | 10 ++++++++++
 src/ui/public/query_bar/directive/query_bar.js    |  1 +
 src/ui/public/query_bar/directive/suggestion.html | 10 +++++-----
 src/ui/public/typeahead/typeahead.html            |  8 ++++++++
 src/ui/public/typeahead/typeahead.js              |  8 +++++++-
 5 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/ui/public/query_bar/directive/query_bar.html b/src/ui/public/query_bar/directive/query_bar.html
index bc99e881b5cc0d..19615afe77192f 100644
--- a/src/ui/public/query_bar/directive/query_bar.html
+++ b/src/ui/public/query_bar/directive/query_bar.html
@@ -6,7 +6,9 @@
   <kbn-typeahead
     items="queryBar.suggestions"
     item-template="queryBar.suggestionTemplate"
+    id="query-bar-suggestions"
     on-select="queryBar.onSuggestionSelect(item)"
+    on-focus-change="queryBar.focusedTypeaheadItemID = $focusedItemID"
     class="suggestionTypeahead"
   >
     <div
@@ -30,6 +32,10 @@
           class="kuiLocalSearchInput"
           ng-class="{'kuiLocalSearchInput-isInvalid': queryBarForm.$invalid}"
           data-test-subj="queryInput"
+          aria-autocomplete="list"
+          aria-controls="query-bar-suggestions-typeahead-items"
+          aria-activedescendant="{{queryBar.focusedTypeaheadItemID}}"
+          role="textbox"
         >
 
         <!-- kuery input -->
@@ -51,6 +57,10 @@
           class="kuiLocalSearchInput"
           ng-class="{'kuiLocalSearchInput-isInvalid': queryBarForm.$invalid}"
           data-test-subj="queryInput"
+          aria-autocomplete="list"
+          aria-controls="query-bar-suggestions-typeahead-items"
+          aria-activedescendant="{{queryBar.focusedTypeaheadItemID}}"
+          role="textbox"
         />
         <div class="kuiLocalSearchAssistedInput__assistance">
             <query-popover
diff --git a/src/ui/public/query_bar/directive/query_bar.js b/src/ui/public/query_bar/directive/query_bar.js
index e21c849e1d9ddf..97bc94ac6881c1 100644
--- a/src/ui/public/query_bar/directive/query_bar.js
+++ b/src/ui/public/query_bar/directive/query_bar.js
@@ -47,6 +47,7 @@ module.directive('queryBar', function () {
 
     controller: callAfterBindingsWorkaround(function ($scope, $element, $http, $timeout, config, PersistedLog, indexPatterns) {
       this.appName = this.appName || 'global';
+      this.focusedTypeaheadItemID = '';
 
       this.getIndexPatterns = () => {
         if (compact(this.indexPatterns).length) return Promise.resolve(this.indexPatterns);
diff --git a/src/ui/public/query_bar/directive/suggestion.html b/src/ui/public/query_bar/directive/suggestion.html
index 6dc47e86aff1cd..a68ea51767b881 100644
--- a/src/ui/public/query_bar/directive/suggestion.html
+++ b/src/ui/public/query_bar/directive/suggestion.html
@@ -1,19 +1,19 @@
 <div class="suggestionItem suggestionItem--{{item.type}}">
   <div class="suggestionItem__type">
     <div ng-switch="item.type">
-      <div ng-switch-when="field">
+      <div ng-switch-when="field" aria-label="Field">
         <icon type="'kqlField'"></icon>
       </div>
-      <div ng-switch-when="value">
+      <div ng-switch-when="value" aria-label="Value">
         <icon type="'kqlValue'"></icon>
       </div>
-      <div ng-switch-when="recentSearch">
+      <div ng-switch-when="recentSearch" aria-label="Recent search">
         <icon type="'search'"></icon>
       </div>
-      <div ng-switch-when="conjunction">
+      <div ng-switch-when="conjunction" aria-label="Conjunction">
         <icon type="'kqlSelector'"></icon>
       </div>
-      <div ng-switch-when="operator">
+      <div ng-switch-when="operator" aria-label="Operator">
         <icon type="'kqlOperand'"></icon>
       </div>
     </div>
diff --git a/src/ui/public/typeahead/typeahead.html b/src/ui/public/typeahead/typeahead.html
index c959342630c98b..39b1fa2b802a55 100644
--- a/src/ui/public/typeahead/typeahead.html
+++ b/src/ui/public/typeahead/typeahead.html
@@ -2,6 +2,10 @@
   class="typeahead"
   ng-keydown="typeahead.onKeyDown($event)"
   ng-keypress="typeahead.onKeyPress($event)"
+  role="combobox"
+  aria-haspopup="true"
+  aria-owns="{{typeahead.elementID}}-typeahead-items"
+  aria-expanded="{{typeahead.isVisible() ? true : false}}"
 >
   <ng-transclude></ng-transclude>
   <div
@@ -13,6 +17,8 @@
     <div
       class="typeahead-items"
       kbn-scroll-bottom="typeahead.increaseLimit()"
+      role="listbox"
+      id="{{typeahead.elementID}}-typeahead-items"
     >
       <div
         class="typeahead-item"
@@ -20,6 +26,8 @@
         ng-class="{active: $index === typeahead.selectedIndex}"
         ng-click="typeahead.onItemClick()"
         ng-mouseenter="typeahead.selectedIndex = $index"
+        role="option"
+        id="{{typeahead.elementID}}-typeahead-item-{{$index}}"
       >
         <kbn-typeahead-item
           item="item"
diff --git a/src/ui/public/typeahead/typeahead.js b/src/ui/public/typeahead/typeahead.js
index 2c2f1fb977d096..e2f173fee35ff1 100644
--- a/src/ui/public/typeahead/typeahead.js
+++ b/src/ui/public/typeahead/typeahead.js
@@ -36,13 +36,15 @@ typeahead.directive('kbnTypeahead', function () {
     scope: {
       items: '=',
       itemTemplate: '=',
-      onSelect: '&'
+      onSelect: '&',
+      onFocusChange: '&'
     },
     bindToController: true,
     controllerAs: 'typeahead',
     controller: function ($scope, $element) {
       this.isHidden = true;
       this.selectedIndex = null;
+      this.elementID = $element.attr('id');
 
       this.submit = () => {
         const item = this.items[this.selectedIndex];
@@ -137,6 +139,10 @@ typeahead.directive('kbnTypeahead', function () {
       this.onMouseLeave = () => {
         this.isMousedOver = false;
       };
+
+      $scope.$watch('typeahead.selectedIndex', (newIndex) => {
+        this.onFocusChange({ $focusedItemID: newIndex !== null ? `${this.elementID}-typeahead-item-${newIndex}` : '' });
+      });
     }
   };
 });