From b4dfddf726e243d4c97742b2d74691ee787e054a Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Mon, 14 Feb 2022 16:43:00 -0600
Subject: [PATCH 1/6] Revising EuiCombobox to WAI-ARIA 1.2 spec.

* Updated EuiCombobox to WAI-ARIA 1.2 pattern
* Fixing one unit test selector.
---
 .../__snapshots__/combo_box.test.tsx.snap     | 56 +++----------------
 src/components/combo_box/combo_box.test.tsx   |  2 +-
 src/components/combo_box/combo_box.tsx        | 10 +++-
 .../combo_box_input/combo_box_input.tsx       |  9 +--
 .../combo_box_options_list.tsx                |  5 +-
 5 files changed, 25 insertions(+), 57 deletions(-)

diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
index 51b63131c2a..761e2f04403 100644
--- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
+++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -2,11 +2,8 @@
 
 exports[`EuiComboBox is rendered 1`] = `
 <div
-  aria-expanded="false"
-  aria-haspopup="listbox"
   class="euiComboBox testClass1 testClass2"
   data-test-subj="test subject string"
-  role="combobox"
 >
   <div
     class="euiFormControlLayout"
@@ -25,10 +22,11 @@ exports[`EuiComboBox is rendered 1`] = `
         >
           <input
             aria-controls=""
+            aria-expanded="false"
             aria-label="aria-label"
             data-test-subj="comboBoxSearchInput"
             id="generated-id__eui-combobox-id"
-            role="textbox"
+            role="combobox"
             style="box-sizing:content-box;width:1px"
             value=""
           />
@@ -60,11 +58,8 @@ exports[`EuiComboBox is rendered 1`] = `
 
 exports[`props aria-label attribute is rendered 1`] = `
 <div
-  aria-expanded={false}
-  aria-haspopup="listbox"
   className="euiComboBox"
   onKeyDown={[Function]}
-  role="combobox"
 >
   <EuiComboBoxInput
     aria-label="Test label"
@@ -96,11 +91,8 @@ exports[`props aria-label attribute is rendered 1`] = `
 
 exports[`props aria-labelledby attribute is rendered 1`] = `
 <div
-  aria-expanded={false}
-  aria-haspopup="listbox"
   className="euiComboBox"
   onKeyDown={[Function]}
-  role="combobox"
 >
   <EuiComboBoxInput
     aria-labelledby="test-heading-id"
@@ -132,11 +124,8 @@ exports[`props aria-labelledby attribute is rendered 1`] = `
 
 exports[`props autoFocus is rendered 1`] = `
 <div
-  aria-expanded={false}
-  aria-haspopup="listbox"
   className="euiComboBox"
   onKeyDown={[Function]}
-  role="combobox"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
@@ -176,11 +165,8 @@ exports[`props autoFocus is rendered 1`] = `
 
 exports[`props custom ID is rendered 1`] = `
 <div
-  aria-expanded={false}
-  aria-haspopup="listbox"
   className="euiComboBox"
   onKeyDown={[Function]}
-  role="combobox"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
@@ -220,11 +206,8 @@ exports[`props custom ID is rendered 1`] = `
 
 exports[`props delimiter is rendered 1`] = `
 <div
-  aria-expanded={false}
-  aria-haspopup="listbox"
   className="euiComboBox"
   onKeyDown={[Function]}
-  role="combobox"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
@@ -264,11 +247,8 @@ exports[`props delimiter is rendered 1`] = `
 
 exports[`props full width is rendered 1`] = `
 <div
-  aria-expanded={false}
-  aria-haspopup="listbox"
   className="euiComboBox euiComboBox--fullWidth"
   onKeyDown={[Function]}
-  role="combobox"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
@@ -305,11 +285,8 @@ exports[`props full width is rendered 1`] = `
 
 exports[`props isClearable=false disallows user from clearing input when no options are selected 1`] = `
 <div
-  aria-expanded={false}
-  aria-haspopup="listbox"
   className="euiComboBox"
   onKeyDown={[Function]}
-  role="combobox"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
@@ -339,11 +316,8 @@ exports[`props isClearable=false disallows user from clearing input when no opti
 
 exports[`props isClearable=false disallows user from clearing input when options are selected 1`] = `
 <div
-  aria-expanded={false}
-  aria-haspopup="listbox"
   className="euiComboBox"
   onKeyDown={[Function]}
-  role="combobox"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
@@ -382,11 +356,8 @@ exports[`props isClearable=false disallows user from clearing input when options
 
 exports[`props isDisabled is rendered 1`] = `
 <div
-  aria-expanded={false}
-  aria-haspopup="listbox"
   className="euiComboBox euiComboBox-isDisabled"
   onKeyDown={[Function]}
-  role="combobox"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
@@ -423,11 +394,8 @@ exports[`props isDisabled is rendered 1`] = `
 
 exports[`props options list is rendered 1`] = `
 <div
-  aria-expanded="true"
-  aria-haspopup="listbox"
   class="euiComboBox euiComboBox-isOpen"
   data-test-subj="alsoGetsAppliedToOptionsList"
-  role="combobox"
 >
   <div
     class="euiFormControlLayout"
@@ -446,9 +414,10 @@ exports[`props options list is rendered 1`] = `
         >
           <input
             aria-controls="generated-id_listbox"
+            aria-expanded="true"
             data-test-subj="comboBoxSearchInput"
             id="generated-id__eui-combobox-id"
-            role="textbox"
+            role="combobox"
             style="box-sizing: content-box; width: 2px;"
             value=""
           />
@@ -487,8 +456,9 @@ exports[`props options list is rendered 1`] = `
         style="position: relative; height: 200px; width: 0px; overflow: auto; will-change: transform; direction: ltr;"
       >
         <div
+          aria-label="Choose from the following options"
           id="generated-id_listbox"
-          role="listBox"
+          role="listbox"
           style="height: 290px; width: 100%;"
           tabindex="0"
         >
@@ -745,11 +715,8 @@ exports[`props options list is rendered 1`] = `
 
 exports[`props selectedOptions are rendered 1`] = `
 <div
-  aria-expanded={false}
-  aria-haspopup="listbox"
   className="euiComboBox"
   onKeyDown={[Function]}
-  role="combobox"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
@@ -789,11 +756,8 @@ exports[`props selectedOptions are rendered 1`] = `
 
 exports[`props singleSelection is rendered 1`] = `
 <div
-  aria-expanded={false}
-  aria-haspopup="listbox"
   className="euiComboBox"
   onKeyDown={[Function]}
-  role="combobox"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
@@ -830,11 +794,8 @@ exports[`props singleSelection is rendered 1`] = `
 
 exports[`props singleSelection prepend and append is rendered 1`] = `
 <div
-  aria-expanded={true}
-  aria-haspopup="listbox"
   className="euiComboBox euiComboBox--prepended euiComboBox--appended euiComboBox-isOpen"
   onKeyDown={[Function]}
-  role="combobox"
 >
   <EuiComboBoxInput
     append="String"
@@ -864,6 +825,7 @@ exports[`props singleSelection prepend and append is rendered 1`] = `
   />
   <EuiPortal>
     <EuiComboBoxOptionsList
+      accessibleListboxLabel="Choose from the following options"
       activeOptionIndex={-1}
       areAllOptionsSelected={false}
       data-test-subj=""
@@ -961,11 +923,8 @@ exports[`props singleSelection prepend and append is rendered 1`] = `
 
 exports[`props singleSelection selects existing option when opened 1`] = `
 <div
-  aria-expanded={true}
-  aria-haspopup="listbox"
   className="euiComboBox euiComboBox-isOpen"
   onKeyDown={[Function]}
-  role="combobox"
 >
   <EuiComboBoxInput
     autoSizeInputRef={[Function]}
@@ -999,6 +958,7 @@ exports[`props singleSelection selects existing option when opened 1`] = `
   />
   <EuiPortal>
     <EuiComboBoxOptionsList
+      accessibleListboxLabel="Choose from the following options"
       activeOptionIndex={-1}
       areAllOptionsSelected={false}
       data-test-subj=""
diff --git a/src/components/combo_box/combo_box.test.tsx b/src/components/combo_box/combo_box.test.tsx
index 6825b82389a..f5801c64379 100644
--- a/src/components/combo_box/combo_box.test.tsx
+++ b/src/components/combo_box/combo_box.test.tsx
@@ -459,7 +459,7 @@ describe('behavior', () => {
     >(<EuiComboBox options={options} inputRef={inputRefCallback} />);
 
     expect(inputRefCallback).toHaveBeenCalledTimes(1);
-    expect(component.find('input[role="textbox"]').getDOMNode()).toBe(
+    expect(component.find('input[role="combobox"]').getDOMNode()).toBe(
       inputRefCallback.mock.calls[0][0]
     );
   });
diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index d7c591d41d8..5b22a0d344f 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/src/components/combo_box/combo_box.tsx
@@ -151,6 +151,10 @@ export interface _EuiComboBoxProps<T>
    * supplied by `aria-label` or from [EuiFormRow](/#/forms/form-layouts).
    */
   'aria-labelledby'?: string;
+  /**
+   * Autocomplete `role="listbox"` elements require an accessible label
+   */
+  accessibleListboxLabel: string;
 }
 
 /**
@@ -193,6 +197,7 @@ export class EuiComboBox<T> extends Component<
   EuiComboBoxState<T>
 > {
   static defaultProps = {
+    accessibleListboxLabel: 'Choose from the following options',
     async: false,
     compressed: false,
     fullWidth: false,
@@ -936,6 +941,7 @@ export class EuiComboBox<T> extends Component<
       autoFocus,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledby,
+      accessibleListboxLabel,
       ...rest
     } = this.props;
     const {
@@ -1010,6 +1016,7 @@ export class EuiComboBox<T> extends Component<
             width={width}
             delimiter={delimiter}
             getSelectedOptionForSearchValue={getSelectedOptionForSearchValue}
+            accessibleListboxLabel={accessibleListboxLabel}
           />
         </EuiPortal>
       );
@@ -1029,13 +1036,10 @@ export class EuiComboBox<T> extends Component<
       // eslint-disable-next-line jsx-a11y/interactive-supports-focus
       <div
         {...rest}
-        aria-expanded={isListOpen}
-        aria-haspopup="listbox"
         className={classes}
         data-test-subj={dataTestSubj}
         onKeyDown={this.onKeyDown}
         ref={this.comboBoxRefCallback}
-        role="combobox"
       >
         <EuiComboBoxInput
           autoSizeInputRef={this.autoSizeInputRefCallback}
diff --git a/src/components/combo_box/combo_box_input/combo_box_input.tsx b/src/components/combo_box/combo_box_input/combo_box_input.tsx
index ced2837ae44..35397fa0ea6 100644
--- a/src/components/combo_box/combo_box_input/combo_box_input.tsx
+++ b/src/components/combo_box/combo_box_input/combo_box_input.tsx
@@ -212,7 +212,7 @@ export class EuiComboBoxInput<T> extends Component<
       // reader.
       removeOptionMessage = (
         <EuiScreenReaderOnly>
-          <span aria-live="assertive" id={removeOptionMessageId}>
+          <span aria-live="polite" id={removeOptionMessageId}>
             {removeOptionMessageContent}
           </span>
         </EuiScreenReaderOnly>
@@ -284,10 +284,11 @@ export class EuiComboBoxInput<T> extends Component<
           {!singleSelection || !searchValue ? pills : null}
           {placeholderMessage}
           <AutosizeInput
-            aria-label={ariaLabel}
-            aria-labelledby={ariaLabelledby}
             aria-activedescendant={focusedOptionId}
             aria-controls={isListOpen ? rootId('listbox') : ''}
+            aria-expanded={isListOpen}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledby}
             className="euiComboBox__input"
             data-test-subj="comboBoxSearchInput"
             disabled={isDisabled}
@@ -297,7 +298,7 @@ export class EuiComboBoxInput<T> extends Component<
             onChange={this.inputOnChange}
             onFocus={this.onFocus}
             ref={this.inputRefCallback}
-            role="textbox"
+            role="combobox"
             style={{ fontSize: 14 }}
             value={searchValue}
             autoFocus={autoFocus}
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
index ed8082a2aea..c50e8e3fe73 100644
--- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
+++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
@@ -49,6 +49,7 @@ export type EuiComboBoxOptionsListProps<T> = CommonProps &
     'data-test-subj': string;
     activeOptionIndex?: number;
     areAllOptionsSelected?: boolean;
+    accessibleListboxLabel: string;
     /**
      * Creates a custom text option. You can use `{searchValue}` inside your string to better customize your text.
      * It won't show if there's no onCreateOption.
@@ -194,8 +195,9 @@ export class EuiComboBoxOptionsList<T> extends Component<
     this.listBoxRef = ref;
 
     if (ref) {
+      ref.setAttribute('aria-label', this.props.accessibleListboxLabel);
       ref.setAttribute('id', this.props.rootId('listbox'));
-      ref.setAttribute('role', 'listBox');
+      ref.setAttribute('role', 'listbox');
       ref.setAttribute('tabIndex', '0');
     }
   };
@@ -307,6 +309,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
       delimiter,
       zIndex,
       style,
+      accessibleListboxLabel,
       ...rest
     } = this.props;
 

From 10ac7b5d1ef3eb337f07406f32857fc51056de59 Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Thu, 17 Feb 2022 09:08:37 -0600
Subject: [PATCH 2/6] Added aria-autocomplete, aria-label to combo box."

* Removing open/close button from tab order, updating snapshots.
* Adding i18n to the listbox aria-label.
---
 .../__snapshots__/combo_box.test.tsx.snap     | 212 ++----------------
 src/components/combo_box/combo_box.tsx        |  82 +++----
 .../combo_box_input/combo_box_input.tsx       |   2 +
 .../combo_box_options_list.tsx                |   6 +-
 4 files changed, 64 insertions(+), 238 deletions(-)

diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
index 761e2f04403..99d1c6dc7c5 100644
--- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
+++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -21,6 +21,7 @@ exports[`EuiComboBox is rendered 1`] = `
           style="font-size:14px;display:inline-block"
         >
           <input
+            aria-autocomplete="list"
             aria-controls=""
             aria-expanded="false"
             aria-label="aria-label"
@@ -42,6 +43,7 @@ exports[`EuiComboBox is rendered 1`] = `
           aria-label="Open list of options"
           class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
           data-test-subj="comboBoxToggleListButton"
+          tabindex="-1"
           type="button"
         >
           <span
@@ -413,6 +415,7 @@ exports[`props options list is rendered 1`] = `
           style="font-size: 14px; display: inline-block;"
         >
           <input
+            aria-autocomplete="list"
             aria-controls="generated-id_listbox"
             aria-expanded="true"
             data-test-subj="comboBoxSearchInput"
@@ -433,6 +436,7 @@ exports[`props options list is rendered 1`] = `
           aria-label="Close list of options"
           class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
           data-test-subj="comboBoxToggleListButton"
+          tabindex="-1"
           type="button"
         >
           <span
@@ -823,101 +827,12 @@ exports[`props singleSelection prepend and append is rendered 1`] = `
     updatePosition={[Function]}
     value=""
   />
-  <EuiPortal>
-    <EuiComboBoxOptionsList
-      accessibleListboxLabel="Choose from the following options"
-      activeOptionIndex={-1}
-      areAllOptionsSelected={false}
-      data-test-subj=""
-      fullWidth={false}
-      getSelectedOptionForSearchValue={[Function]}
-      listRef={[Function]}
-      matchingOptions={
-        Array [
-          Object {
-            "data-test-subj": "titanOption",
-            "label": "Titan",
-          },
-          Object {
-            "label": "Enceladus",
-          },
-          Object {
-            "label": "Mimas",
-          },
-          Object {
-            "label": "Dione",
-          },
-          Object {
-            "label": "Iapetus",
-          },
-          Object {
-            "label": "Phoebe",
-          },
-          Object {
-            "label": "Rhea",
-          },
-          Object {
-            "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
-          },
-          Object {
-            "label": "Tethys",
-          },
-          Object {
-            "label": "Hyperion",
-          },
-        ]
-      }
-      onCloseList={[Function]}
-      onOptionClick={[Function]}
-      onOptionEnterKey={[Function]}
-      onScroll={[Function]}
-      optionRef={[Function]}
-      options={
-        Array [
-          Object {
-            "data-test-subj": "titanOption",
-            "label": "Titan",
-          },
-          Object {
-            "label": "Enceladus",
-          },
-          Object {
-            "label": "Mimas",
-          },
-          Object {
-            "label": "Dione",
-          },
-          Object {
-            "label": "Iapetus",
-          },
-          Object {
-            "label": "Phoebe",
-          },
-          Object {
-            "label": "Rhea",
-          },
-          Object {
-            "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
-          },
-          Object {
-            "label": "Tethys",
-          },
-          Object {
-            "label": "Hyperion",
-          },
-        ]
-      }
-      position="bottom"
-      rootId={[Function]}
-      rowHeight={29}
-      scrollToIndex={-1}
-      searchValue=""
-      selectedOptions={Array []}
-      singleSelection={true}
-      updatePosition={[Function]}
-      width={0}
-    />
-  </EuiPortal>
+  <EuiI18n
+    default="Choose from the following options"
+    token="euiComboBox.listboxAriaLabel"
+  >
+    <Component />
+  </EuiI18n>
 </div>
 `;
 
@@ -956,106 +871,11 @@ exports[`props singleSelection selects existing option when opened 1`] = `
     updatePosition={[Function]}
     value="Mimas"
   />
-  <EuiPortal>
-    <EuiComboBoxOptionsList
-      accessibleListboxLabel="Choose from the following options"
-      activeOptionIndex={-1}
-      areAllOptionsSelected={false}
-      data-test-subj=""
-      fullWidth={false}
-      getSelectedOptionForSearchValue={[Function]}
-      listRef={[Function]}
-      matchingOptions={
-        Array [
-          Object {
-            "data-test-subj": "titanOption",
-            "label": "Titan",
-          },
-          Object {
-            "label": "Enceladus",
-          },
-          Object {
-            "label": "Mimas",
-          },
-          Object {
-            "label": "Dione",
-          },
-          Object {
-            "label": "Iapetus",
-          },
-          Object {
-            "label": "Phoebe",
-          },
-          Object {
-            "label": "Rhea",
-          },
-          Object {
-            "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
-          },
-          Object {
-            "label": "Tethys",
-          },
-          Object {
-            "label": "Hyperion",
-          },
-        ]
-      }
-      onCloseList={[Function]}
-      onOptionClick={[Function]}
-      onOptionEnterKey={[Function]}
-      onScroll={[Function]}
-      optionRef={[Function]}
-      options={
-        Array [
-          Object {
-            "data-test-subj": "titanOption",
-            "label": "Titan",
-          },
-          Object {
-            "label": "Enceladus",
-          },
-          Object {
-            "label": "Mimas",
-          },
-          Object {
-            "label": "Dione",
-          },
-          Object {
-            "label": "Iapetus",
-          },
-          Object {
-            "label": "Phoebe",
-          },
-          Object {
-            "label": "Rhea",
-          },
-          Object {
-            "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
-          },
-          Object {
-            "label": "Tethys",
-          },
-          Object {
-            "label": "Hyperion",
-          },
-        ]
-      }
-      position="bottom"
-      rootId={[Function]}
-      rowHeight={29}
-      scrollToIndex={-1}
-      searchValue=""
-      selectedOptions={
-        Array [
-          Object {
-            "label": "Mimas",
-          },
-        ]
-      }
-      singleSelection={true}
-      updatePosition={[Function]}
-      width={0}
-    />
-  </EuiPortal>
+  <EuiI18n
+    default="Choose from the following options"
+    token="euiComboBox.listboxAriaLabel"
+  >
+    <Component />
+  </EuiI18n>
 </div>
 `;
diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index 5b22a0d344f..22372c9fe22 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/src/components/combo_box/combo_box.tsx
@@ -23,6 +23,7 @@ import classNames from 'classnames';
 
 import { findPopoverPosition, htmlIdGenerator, keys } from '../../services';
 import { EuiPortal } from '../portal';
+import { EuiI18n } from '../i18n';
 import { EuiComboBoxOptionsList } from './combo_box_options_list';
 
 import {
@@ -151,10 +152,6 @@ export interface _EuiComboBoxProps<T>
    * supplied by `aria-label` or from [EuiFormRow](/#/forms/form-layouts).
    */
   'aria-labelledby'?: string;
-  /**
-   * Autocomplete `role="listbox"` elements require an accessible label
-   */
-  accessibleListboxLabel: string;
 }
 
 /**
@@ -197,7 +194,6 @@ export class EuiComboBox<T> extends Component<
   EuiComboBoxState<T>
 > {
   static defaultProps = {
-    accessibleListboxLabel: 'Choose from the following options',
     async: false,
     compressed: false,
     fullWidth: false,
@@ -941,7 +937,6 @@ export class EuiComboBox<T> extends Component<
       autoFocus,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledby,
-      accessibleListboxLabel,
       ...rest
     } = this.props;
     const {
@@ -986,39 +981,48 @@ export class EuiComboBox<T> extends Component<
         : undefined;
 
       optionsList = (
-        <EuiPortal>
-          <EuiComboBoxOptionsList
-            zIndex={this.state.listZIndex}
-            activeOptionIndex={this.state.activeOptionIndex}
-            areAllOptionsSelected={this.areAllOptionsSelected()}
-            customOptionText={customOptionText}
-            data-test-subj={optionsListDataTestSubj}
-            fullWidth={fullWidth}
-            isLoading={isLoading}
-            listRef={this.listRefCallback}
-            matchingOptions={matchingOptions}
-            onCloseList={this.closeList}
-            onCreateOption={onCreateOption}
-            onOptionClick={this.onOptionClick}
-            onOptionEnterKey={this.onOptionEnterKey}
-            onScroll={this.onOptionListScroll}
-            optionRef={this.optionRefCallback}
-            options={options}
-            position={listPosition}
-            singleSelection={singleSelection}
-            renderOption={renderOption}
-            rootId={this.rootId}
-            rowHeight={rowHeight}
-            scrollToIndex={activeOptionIndex}
-            searchValue={searchValue}
-            selectedOptions={selectedOptions}
-            updatePosition={this.updatePosition}
-            width={width}
-            delimiter={delimiter}
-            getSelectedOptionForSearchValue={getSelectedOptionForSearchValue}
-            accessibleListboxLabel={accessibleListboxLabel}
-          />
-        </EuiPortal>
+        <EuiI18n
+          token="euiComboBox.listboxAriaLabel"
+          default="Choose from the following options"
+        >
+          {(listboxAriaLabel: string) => (
+            <EuiPortal>
+              <EuiComboBoxOptionsList
+                zIndex={this.state.listZIndex}
+                activeOptionIndex={this.state.activeOptionIndex}
+                areAllOptionsSelected={this.areAllOptionsSelected()}
+                customOptionText={customOptionText}
+                data-test-subj={optionsListDataTestSubj}
+                fullWidth={fullWidth}
+                isLoading={isLoading}
+                listRef={this.listRefCallback}
+                matchingOptions={matchingOptions}
+                onCloseList={this.closeList}
+                onCreateOption={onCreateOption}
+                onOptionClick={this.onOptionClick}
+                onOptionEnterKey={this.onOptionEnterKey}
+                onScroll={this.onOptionListScroll}
+                optionRef={this.optionRefCallback}
+                options={options}
+                position={listPosition}
+                singleSelection={singleSelection}
+                renderOption={renderOption}
+                rootId={this.rootId}
+                rowHeight={rowHeight}
+                scrollToIndex={activeOptionIndex}
+                searchValue={searchValue}
+                selectedOptions={selectedOptions}
+                updatePosition={this.updatePosition}
+                width={width}
+                delimiter={delimiter}
+                getSelectedOptionForSearchValue={
+                  getSelectedOptionForSearchValue
+                }
+                listboxAriaLabel={listboxAriaLabel}
+              />
+            </EuiPortal>
+          )}
+        </EuiI18n>
       );
     }
 
diff --git a/src/components/combo_box/combo_box_input/combo_box_input.tsx b/src/components/combo_box/combo_box_input/combo_box_input.tsx
index 35397fa0ea6..263f82a61ea 100644
--- a/src/components/combo_box/combo_box_input/combo_box_input.tsx
+++ b/src/components/combo_box/combo_box_input/combo_box_input.tsx
@@ -251,6 +251,7 @@ export class EuiComboBoxInput<T> extends Component<
         onClick: isListOpen && !isDisabled ? onCloseListClick : onOpenListClick,
         ref: toggleButtonRef,
         side: 'right',
+        tabIndex: -1,
         type: 'arrowDown',
       };
     }
@@ -285,6 +286,7 @@ export class EuiComboBoxInput<T> extends Component<
           {placeholderMessage}
           <AutosizeInput
             aria-activedescendant={focusedOptionId}
+            aria-autocomplete="list"
             aria-controls={isListOpen ? rootId('listbox') : ''}
             aria-expanded={isListOpen}
             aria-label={ariaLabel}
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
index c50e8e3fe73..63a401a862d 100644
--- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
+++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
@@ -49,7 +49,7 @@ export type EuiComboBoxOptionsListProps<T> = CommonProps &
     'data-test-subj': string;
     activeOptionIndex?: number;
     areAllOptionsSelected?: boolean;
-    accessibleListboxLabel: string;
+    listboxAriaLabel: string;
     /**
      * Creates a custom text option. You can use `{searchValue}` inside your string to better customize your text.
      * It won't show if there's no onCreateOption.
@@ -195,7 +195,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
     this.listBoxRef = ref;
 
     if (ref) {
-      ref.setAttribute('aria-label', this.props.accessibleListboxLabel);
+      ref.setAttribute('aria-label', this.props.listboxAriaLabel);
       ref.setAttribute('id', this.props.rootId('listbox'));
       ref.setAttribute('role', 'listbox');
       ref.setAttribute('tabIndex', '0');
@@ -309,7 +309,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
       delimiter,
       zIndex,
       style,
-      accessibleListboxLabel,
+      listboxAriaLabel,
       ...rest
     } = this.props;
 

From 016613d01e9ad6132aa935c7348a27c899dca81d Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Thu, 17 Feb 2022 22:12:36 -0600
Subject: [PATCH 3/6] Adding changelog entry for PR 5636.

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1f06b5888e2..7dfc3ae273d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Improved `EuiSelectable` keypress scenarios ([#5613](https://github.com/elastic/eui/pull/5613))
 - Converted `FieldValueSelectionFilter` in `EuiSearchBar` to use `EuiSelectable` ([#5387](https://github.com/elastic/eui/issues/5387))
+- Updated `EuiComboBox` to WAI-ARIA 1.2 pattern and improved keyboard navigation ([#5636](https://github.com/elastic/eui/pull/5636))
 
 ## [`48.0.0`](https://github.com/elastic/eui/tree/v48.0.0)
 

From d3f25dfdc2587657b8c57ce8ef6d9337c93fc761 Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Tue, 22 Feb 2022 13:20:05 -0600
Subject: [PATCH 4/6] Refactoring the i18n to a smaller footprint.

---
 .../__snapshots__/combo_box.test.tsx.snap     | 28 +++++++++--------
 src/components/combo_box/combo_box.tsx        | 30 +++++++++----------
 2 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
index 99d1c6dc7c5..4e4912eca9c 100644
--- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
+++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -827,12 +827,14 @@ exports[`props singleSelection prepend and append is rendered 1`] = `
     updatePosition={[Function]}
     value=""
   />
-  <EuiI18n
-    default="Choose from the following options"
-    token="euiComboBox.listboxAriaLabel"
-  >
-    <Component />
-  </EuiI18n>
+  <EuiPortal>
+    <EuiI18n
+      default="Choose from the following options"
+      token="euiComboBox.listboxAriaLabel"
+    >
+      <Component />
+    </EuiI18n>
+  </EuiPortal>
 </div>
 `;
 
@@ -871,11 +873,13 @@ exports[`props singleSelection selects existing option when opened 1`] = `
     updatePosition={[Function]}
     value="Mimas"
   />
-  <EuiI18n
-    default="Choose from the following options"
-    token="euiComboBox.listboxAriaLabel"
-  >
-    <Component />
-  </EuiI18n>
+  <EuiPortal>
+    <EuiI18n
+      default="Choose from the following options"
+      token="euiComboBox.listboxAriaLabel"
+    >
+      <Component />
+    </EuiI18n>
+  </EuiPortal>
 </div>
 `;
diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index 22372c9fe22..6af40c941ad 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/src/components/combo_box/combo_box.tsx
@@ -981,12 +981,12 @@ export class EuiComboBox<T> extends Component<
         : undefined;
 
       optionsList = (
-        <EuiI18n
-          token="euiComboBox.listboxAriaLabel"
-          default="Choose from the following options"
-        >
-          {(listboxAriaLabel: string) => (
-            <EuiPortal>
+        <EuiPortal>
+          <EuiI18n
+            token="euiComboBox.listboxAriaLabel"
+            default="Choose from the following options"
+          >
+            {(listboxAriaLabel: string) => (
               <EuiComboBoxOptionsList
                 zIndex={this.state.listZIndex}
                 activeOptionIndex={this.state.activeOptionIndex}
@@ -1020,24 +1020,22 @@ export class EuiComboBox<T> extends Component<
                 }
                 listboxAriaLabel={listboxAriaLabel}
               />
-            </EuiPortal>
-          )}
-        </EuiI18n>
+            )}
+          </EuiI18n>
+        </EuiPortal>
       );
     }
 
     return (
       /**
-       * Re: jsx-a11y/interactive-supports-focus
-       * Focus is managed and is placed on the textbox element (`EuiComboBoxInput`)
+       * February 2022
        *
-       * Re: jsx-a11y/role-has-required-aria-props
-       * Expansion is managed and required `aria-controls` prop is placed on the textbox element (`EuiComboBoxInput`)
+       * Component has been refactored to the WAI-ARIA 1.2 spec for
+       * editable combobox with list autocomplete. This pattern is an improvement
+       * on the user experience for screen readers over the WAI-ARIA 1.1 pattern.
        *
-       * Reference for both: https://www.w3.org/TR/2017/REC-wai-aria-1.1-20171214/#combobox,
-       * which verifies that this implementation follows the spec.
+       * https://www.w3.org/TR/wai-aria-practices-1.2/examples/combobox/combobox-autocomplete-list.html
        */
-      // eslint-disable-next-line jsx-a11y/interactive-supports-focus
       <div
         {...rest}
         className={classes}

From 0386cdc5a7d127972dd16399dab5c0be7ad72b2e Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Tue, 22 Feb 2022 15:38:39 -0600
Subject: [PATCH 5/6] Adjusting comments for better clarity.

---
 src/components/combo_box/combo_box.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index 6af40c941ad..719ec8dddeb 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/src/components/combo_box/combo_box.tsx
@@ -10,8 +10,6 @@
  * Elements within EuiComboBox which would normally be tabbable (inputs, buttons) have been removed
  * from the tab order with tabindex={-1} so that we can control the keyboard navigation interface.
  */
-/* eslint-disable jsx-a11y/role-has-required-aria-props */
-
 import React, {
   Component,
   FocusEventHandler,
@@ -1028,11 +1026,9 @@ export class EuiComboBox<T> extends Component<
 
     return (
       /**
-       * February 2022
-       *
-       * Component has been refactored to the WAI-ARIA 1.2 spec for
-       * editable combobox with list autocomplete. This pattern is an improvement
-       * on the user experience for screen readers over the WAI-ARIA 1.1 pattern.
+       * EuiComboBox follows the WAI-ARIA 1.2 spec for editable comboboxes
+       * with list autocomplete. This pattern is an improvement on the user
+       * experience for screen readers over the WAI-ARIA 1.1 pattern.
        *
        * https://www.w3.org/TR/wai-aria-practices-1.2/examples/combobox/combobox-autocomplete-list.html
        */

From 2e858b5cea693915b0ac006d9dfbddb0d5a48dc1 Mon Sep 17 00:00:00 2001
From: 1Copenut <trevor.pierce@elastic.co>
Date: Wed, 23 Feb 2022 08:56:30 -0600
Subject: [PATCH 6/6] Pulling latest and moving entry to main group.

---
 CHANGELOG.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0a43920cc2b..9c0508d68e1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,13 +1,12 @@
 ## [`main`](https://github.com/elastic/eui/tree/main)
 
-No public interface changes since `49.0.0`.
+- Updated `EuiComboBox` to WAI-ARIA 1.2 pattern and improved keyboard navigation ([#5636](https://github.com/elastic/eui/pull/5636))
 
 ## [`49.0.0`](https://github.com/elastic/eui/tree/v49.0.0)
 
 - Added new `renderCellPopover` prop to `EuiDataGrid` ([#5640](https://github.com/elastic/eui/pull/5640))
 - Added cell `schema` info to `EuiDataGrid`'s `renderCellValue` props ([#5640](https://github.com/elastic/eui/pull/5640))
 - Added `isLoading` prop to `EuiDualRange` ([#5648](https://github.com/elastic/eui/pull/5648))
-- Updated `EuiComboBox` to WAI-ARIA 1.2 pattern and improved keyboard navigation ([#5636](https://github.com/elastic/eui/pull/5636))
 - Added an `'all'` option to `EuiTablePagination.itemsPerPage` and `itemsPerPageOptions` to render a "Show all" option and updated `EuiBasicTable` and `EuiDataGrid` usages ([#5547](https://github.com/elastic/eui/issues/5547))
 
 **Bug fixes**