Fixing a11y errors in querybar and suggestion_component (#26892) (#26974

) * correcting a11y errors so that we can add a11y rules to tslint * updating the jest snapshot * updating the jest snapshot
elastic · Dec 11, 2018 · ce4ce99 · ce4ce99
1 parent 71a2478
commit ce4ce99
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 0 deletions.
diff --git a/src/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap b/src/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap
@@ -18,6 +18,7 @@ exports[`QueryBar Should disable autoFocus on EuiFieldText when disableAutoFocus
       onOutsideClick={[Function]}
     >
       <div
+        aria-controls="typeahead-items"
         aria-expanded={false}
         aria-haspopup="true"
         aria-owns="typeahead-items"
@@ -126,6 +127,7 @@ exports[`QueryBar Should pass the query language to the language switcher 1`] =
       onOutsideClick={[Function]}
     >
       <div
+        aria-controls="typeahead-items"
         aria-expanded={false}
         aria-haspopup="true"
         aria-owns="typeahead-items"
@@ -234,6 +236,7 @@ exports[`QueryBar Should render the given query 1`] = `
       onOutsideClick={[Function]}
     >
       <div
+        aria-controls="typeahead-items"
         aria-expanded={false}
         aria-haspopup="true"
         aria-owns="typeahead-items"

diff --git a/src/ui/public/query_bar/components/query_bar.tsx b/src/ui/public/query_bar/components/query_bar.tsx
@@ -472,6 +472,7 @@ export class QueryBarUI extends Component<Props, State> {
               aria-haspopup="true"
               aria-expanded={this.state.isSuggestionsVisible}
               aria-owns="typeahead-items"
+              aria-controls="typeahead-items"
             >
               <form role="form" name="queryBarForm">
                 <div className="kuiLocalSearch" role="search">

diff --git a/...ui/public/query_bar/components/typeahead/__snapshots__/suggestion_component.test.tsx.snap b/...ui/public/query_bar/components/typeahead/__snapshots__/suggestion_component.test.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`SuggestionComponent Should display the suggestion and use the provided ariaId 1`] = `
 <div
+  aria-selected={false}
   className="typeahead-item"
   id="suggestion-1"
   onClick={[Function]}
@@ -38,6 +39,7 @@ exports[`SuggestionComponent Should display the suggestion and use the provided
 
 exports[`SuggestionComponent Should make the element active if the selected prop is true 1`] = `
 <div
+  aria-selected={true}
   className="typeahead-item active"
   id="suggestion-1"
   onClick={[Function]}

diff --git a/src/ui/public/query_bar/components/typeahead/suggestion_component.tsx b/src/ui/public/query_bar/components/typeahead/suggestion_component.tsx
@@ -60,6 +60,7 @@ export const SuggestionComponent: SFC<Props> = props => {
       onMouseEnter={props.onMouseEnter}
       ref={props.innerRef}
       id={props.ariaId}
+      aria-selected={props.selected}
     >
       <div className={'suggestionItem suggestionItem--' + props.suggestion.type}>
         <div className="suggestionItem__type">