diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8a8df73537f..eb4e6c0545c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`main`](https://github.com/elastic/eui/tree/main)
 
+- Updated `EuiComboBox` to WAI-ARIA 1.2 pattern and improved keyboard navigation ([#5636](https://github.com/elastic/eui/pull/5636))
 - Added `readOnly` prop to `EuiMarkdownEditor` ([#5627](https://github.com/elastic/eui/pull/5627))
 
 ## [`49.0.0`](https://github.com/elastic/eui/tree/v49.0.0)
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..4e4912eca9c 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"
@@ -24,11 +21,13 @@ 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"
             data-test-subj="comboBoxSearchInput"
             id="generated-id__eui-combobox-id"
-            role="textbox"
+            role="combobox"
             style="box-sizing:content-box;width:1px"
             value=""
           />
@@ -44,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
@@ -60,11 +60,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 +93,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 +126,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 +167,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 +208,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 +249,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 +287,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 +318,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 +358,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 +396,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"
@@ -445,10 +415,12 @@ 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"
             id="generated-id__eui-combobox-id"
-            role="textbox"
+            role="combobox"
             style="box-sizing: content-box; width: 2px;"
             value=""
           />
@@ -464,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
@@ -487,8 +460,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 +719,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 +760,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 +798,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"
@@ -863,109 +828,20 @@ exports[`props singleSelection prepend and append is rendered 1`] = `
     value=""
   />
   <EuiPortal>
-    <EuiComboBoxOptionsList
-      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}
-    />
+    <EuiI18n
+      default="Choose from the following options"
+      token="euiComboBox.listboxAriaLabel"
+    >
+      <Component />
+    </EuiI18n>
   </EuiPortal>
 </div>
 `;
 
 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]}
@@ -998,104 +874,12 @@ exports[`props singleSelection selects existing option when opened 1`] = `
     value="Mimas"
   />
   <EuiPortal>
-    <EuiComboBoxOptionsList
-      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}
-    />
+    <EuiI18n
+      default="Choose from the following options"
+      token="euiComboBox.listboxAriaLabel"
+    >
+      <Component />
+    </EuiI18n>
   </EuiPortal>
 </div>
 `;
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..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,
@@ -23,6 +21,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 {
@@ -981,61 +980,64 @@ export class EuiComboBox<T> extends Component<
 
       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}
-          />
+          <EuiI18n
+            token="euiComboBox.listboxAriaLabel"
+            default="Choose from the following options"
+          >
+            {(listboxAriaLabel: string) => (
+              <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}
+              />
+            )}
+          </EuiI18n>
         </EuiPortal>
       );
     }
 
     return (
       /**
-       * Re: jsx-a11y/interactive-supports-focus
-       * Focus is managed and is placed on the textbox element (`EuiComboBoxInput`)
-       *
-       * Re: jsx-a11y/role-has-required-aria-props
-       * Expansion is managed and required `aria-controls` prop is placed on the textbox element (`EuiComboBoxInput`)
+       * 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.
        *
-       * 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}
-        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..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
@@ -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>
@@ -251,6 +251,7 @@ export class EuiComboBoxInput<T> extends Component<
         onClick: isListOpen && !isDisabled ? onCloseListClick : onOpenListClick,
         ref: toggleButtonRef,
         side: 'right',
+        tabIndex: -1,
         type: 'arrowDown',
       };
     }
@@ -284,10 +285,12 @@ export class EuiComboBoxInput<T> extends Component<
           {!singleSelection || !searchValue ? pills : null}
           {placeholderMessage}
           <AutosizeInput
-            aria-label={ariaLabel}
-            aria-labelledby={ariaLabelledby}
             aria-activedescendant={focusedOptionId}
+            aria-autocomplete="list"
             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 +300,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..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,6 +49,7 @@ export type EuiComboBoxOptionsListProps<T> = CommonProps &
     'data-test-subj': string;
     activeOptionIndex?: number;
     areAllOptionsSelected?: boolean;
+    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.
@@ -194,8 +195,9 @@ export class EuiComboBoxOptionsList<T> extends Component<
     this.listBoxRef = ref;
 
     if (ref) {
+      ref.setAttribute('aria-label', this.props.listboxAriaLabel);
       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,
+      listboxAriaLabel,
       ...rest
     } = this.props;