diff --git a/package.json b/package.json
index 93fea19f631e3..efce6ede0db7f 100644
--- a/package.json
+++ b/package.json
@@ -125,7 +125,7 @@
     "@babel/register": "^7.10.5",
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "7.9.0-rc.2",
-    "@elastic/eui": "28.2.0",
+    "@elastic/eui": "28.4.0",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "^2.5.0",
     "@elastic/request-crypto": "1.1.4",
diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json
index 95fe2090d65d5..c1487446173d4 100644
--- a/packages/kbn-ui-shared-deps/package.json
+++ b/packages/kbn-ui-shared-deps/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@elastic/charts": "21.1.2",
-    "@elastic/eui": "28.2.0",
+    "@elastic/eui": "28.4.0",
     "@elastic/numeral": "^2.5.0",
     "@kbn/i18n": "1.0.0",
     "@kbn/monaco": "1.0.0",
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
index 1bff6cd9301ed..699fe2c4c4d4d 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
@@ -658,6 +658,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                     aria-controls="mockId"
                     aria-expanded={true}
                     className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                    id="mockId"
                     onClick={[Function]}
                     type="button"
                   >
@@ -911,6 +912,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                         aria-controls="mockId"
                         aria-expanded={true}
                         className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                        id="mockId"
                         onClick={[Function]}
                         type="button"
                       >
@@ -1200,6 +1202,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                         aria-controls="mockId"
                         aria-expanded={true}
                         className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                        id="mockId"
                         onClick={[Function]}
                         type="button"
                       >
@@ -1450,6 +1453,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                         aria-controls="mockId"
                         aria-expanded={true}
                         className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                        id="mockId"
                         onClick={[Function]}
                         type="button"
                       >
@@ -1652,6 +1656,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                         aria-controls="mockId"
                         aria-expanded={true}
                         className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                        id="mockId"
                         onClick={[Function]}
                         type="button"
                       >
@@ -2875,6 +2880,7 @@ exports[`CollapsibleNav renders the default nav 3`] = `
                     aria-controls="mockId"
                     aria-expanded={true}
                     className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                    id="mockId"
                     onClick={[Function]}
                     type="button"
                   >
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index d90d0824a1237..b5c1f3ca843e4 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -5734,6 +5734,7 @@ exports[`Header renders 1`] = `
                         aria-controls="mockId"
                         aria-expanded={true}
                         className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                        id="mockId"
                         onClick={[Function]}
                         type="button"
                       >
diff --git a/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap b/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap
index 3c4c983efa9fa..0925d1c7cc0c9 100644
--- a/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap
+++ b/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap
@@ -196,7 +196,7 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                             >
                               <input
                                 aria-label="Filter for a visualization type"
-                                class="euiFieldSearch euiFieldSearch--fullWidth"
+                                class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
                                 data-test-subj="filterVisType"
                                 placeholder="Filter"
                                 type="search"
@@ -517,7 +517,7 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
                                             <EuiValidatableControl>
                                               <input
                                                 aria-label="Filter for a visualization type"
-                                                className="euiFieldSearch euiFieldSearch--fullWidth"
+                                                className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
                                                 data-test-subj="filterVisType"
                                                 onChange={[Function]}
                                                 onKeyUp={[Function]}
@@ -1109,7 +1109,7 @@ exports[`NewVisModal should render as expected 1`] = `
                             >
                               <input
                                 aria-label="Filter for a visualization type"
-                                class="euiFieldSearch euiFieldSearch--fullWidth"
+                                class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
                                 data-test-subj="filterVisType"
                                 placeholder="Filter"
                                 type="search"
@@ -1408,7 +1408,7 @@ exports[`NewVisModal should render as expected 1`] = `
                                             <EuiValidatableControl>
                                               <input
                                                 aria-label="Filter for a visualization type"
-                                                className="euiFieldSearch euiFieldSearch--fullWidth"
+                                                className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
                                                 data-test-subj="filterVisType"
                                                 onChange={[Function]}
                                                 onKeyUp={[Function]}
diff --git a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
index 7f3744c16397a..ace6a48ed8ff5 100644
--- a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
+++ b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
@@ -12,7 +12,7 @@
     "build": "rm -rf './target' && tsc"
   },
   "devDependencies": {
-    "@elastic/eui": "28.2.0",
+    "@elastic/eui": "28.4.0",
     "@kbn/plugin-helpers": "1.0.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
diff --git a/test/plugin_functional/plugins/kbn_sample_panel_action/package.json b/test/plugin_functional/plugins/kbn_sample_panel_action/package.json
index acb0cf67ac5c7..d98fa468bd6d1 100644
--- a/test/plugin_functional/plugins/kbn_sample_panel_action/package.json
+++ b/test/plugin_functional/plugins/kbn_sample_panel_action/package.json
@@ -12,7 +12,7 @@
     "build": "rm -rf './target' && tsc"
   },
   "devDependencies": {
-    "@elastic/eui": "28.2.0",
+    "@elastic/eui": "28.4.0",
     "react": "^16.12.0",
     "typescript": "4.0.2"
   }
diff --git a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
index ff84c25400af0..3ac03b444deaf 100644
--- a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
@@ -12,7 +12,7 @@
     "build": "rm -rf './target' && tsc"
   },
   "devDependencies": {
-    "@elastic/eui": "28.2.0",
+    "@elastic/eui": "28.4.0",
     "@kbn/plugin-helpers": "1.0.0",
     "react": "^16.12.0",
     "typescript": "4.0.2"
diff --git a/x-pack/package.json b/x-pack/package.json
index 20dd06305ab87..7b45167f08efd 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -275,7 +275,7 @@
     "@babel/runtime": "^7.11.2",
     "@elastic/datemath": "5.0.3",
     "@elastic/ems-client": "7.9.3",
-    "@elastic/eui": "28.2.0",
+    "@elastic/eui": "28.4.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.0",
diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/Stackframe.test.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/Stackframe.test.tsx
index c502237235578..589b2dd27fbc4 100644
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/Stackframe.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/Stackframe.test.tsx
@@ -11,6 +11,12 @@ import { mountWithTheme } from '../../../../utils/testHelpers';
 import { Stackframe as StackframeComponent } from '../Stackframe';
 import stacktracesMock from './stacktraces.json';
 
+jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => {
+  return {
+    htmlIdGenerator: () => () => `generated-id`,
+  };
+});
+
 describe('Stackframe', () => {
   describe('when stackframe has source lines', () => {
     let wrapper: ReactWrapper;
diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap b/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap
index f87cc62d7809d..a5f8c40876540 100644
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap
@@ -177,6 +177,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
           aria-controls="test"
           aria-expanded={false}
           className="euiAccordion__button"
+          id="generated-id"
           onClick={[Function]}
           type="button"
         >
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__stories__/__snapshots__/palette.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__stories__/__snapshots__/palette.stories.storyshot
index 385b16d3d8e8e..c0d3256eb9eb7 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__stories__/__snapshots__/palette.stories.storyshot
+++ b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__stories__/__snapshots__/palette.stories.storyshot
@@ -48,12 +48,10 @@ exports[`Storyshots arguments/Palette default 1`] = `
           <button
             aria-haspopup="true"
             aria-labelledby="undefined generated-id"
-            aria-selected={true}
             className="euiSuperSelectControl euiSuperSelectControl--compressed"
             onClick={[Function]}
             onKeyDown={[Function]}
             readOnly={false}
-            role="option"
             type="button"
           >
             <div
diff --git a/x-pack/plugins/canvas/public/components/font_picker/__stories__/__snapshots__/font_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/font_picker/__stories__/__snapshots__/font_picker.stories.storyshot
index 856d4b12f164a..f4b3b9ed8546a 100644
--- a/x-pack/plugins/canvas/public/components/font_picker/__stories__/__snapshots__/font_picker.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/font_picker/__stories__/__snapshots__/font_picker.stories.storyshot
@@ -32,11 +32,9 @@ exports[`Storyshots components/FontPicker default 1`] = `
         <button
           aria-haspopup="true"
           aria-labelledby="undefined generated-id"
-          aria-selected={true}
           className="euiSuperSelectControl euiSuperSelectControl--compressed"
           onClick={[Function]}
           onKeyDown={[Function]}
-          role="option"
           type="button"
         />
         <div
@@ -99,11 +97,9 @@ exports[`Storyshots components/FontPicker with value 1`] = `
         <button
           aria-haspopup="true"
           aria-labelledby="undefined generated-id"
-          aria-selected={true}
           className="euiSuperSelectControl euiSuperSelectControl--compressed"
           onClick={[Function]}
           onKeyDown={[Function]}
-          role="option"
           type="button"
         >
           <div
diff --git a/x-pack/plugins/canvas/public/components/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot
index d3809b4c3979f..978256e761db4 100644
--- a/x-pack/plugins/canvas/public/components/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot
@@ -38,12 +38,10 @@ exports[`Storyshots components/Color/PalettePicker clearable 1`] = `
           <button
             aria-haspopup="true"
             aria-labelledby="undefined generated-id"
-            aria-selected={true}
             className="euiSuperSelectControl euiSuperSelectControl--compressed"
             onClick={[Function]}
             onKeyDown={[Function]}
             readOnly={false}
-            role="option"
             type="button"
           >
             None
@@ -115,12 +113,10 @@ exports[`Storyshots components/Color/PalettePicker default 1`] = `
           <button
             aria-haspopup="true"
             aria-labelledby="undefined generated-id"
-            aria-selected={true}
             className="euiSuperSelectControl euiSuperSelectControl--compressed"
             onClick={[Function]}
             onKeyDown={[Function]}
             readOnly={false}
-            role="option"
             type="button"
           >
             <div
@@ -199,12 +195,10 @@ exports[`Storyshots components/Color/PalettePicker interactive 1`] = `
           <button
             aria-haspopup="true"
             aria-labelledby="undefined generated-id"
-            aria-selected={true}
             className="euiSuperSelectControl euiSuperSelectControl--compressed"
             onClick={[Function]}
             onKeyDown={[Function]}
             readOnly={false}
-            role="option"
             type="button"
           >
             <div
diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot b/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot
index 0b345849b0a9a..77e897e163618 100644
--- a/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot
@@ -57,7 +57,7 @@ exports[`Storyshots components/SavedElementsModal no custom elements 1`] = `
               className="euiFormControlLayout__childrenWrapper"
             >
               <input
-                className="euiFieldSearch euiFieldSearch--fullWidth"
+                className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
                 onChange={[Function]}
                 onKeyUp={[Function]}
                 placeholder="Find element"
@@ -197,7 +197,7 @@ exports[`Storyshots components/SavedElementsModal with custom elements 1`] = `
               className="euiFormControlLayout__childrenWrapper"
             >
               <input
-                className="euiFieldSearch euiFieldSearch--fullWidth"
+                className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
                 onChange={[Function]}
                 onKeyUp={[Function]}
                 placeholder="Find element"
@@ -628,7 +628,7 @@ exports[`Storyshots components/SavedElementsModal with text filter 1`] = `
               className="euiFormControlLayout__childrenWrapper"
             >
               <input
-                className="euiFieldSearch euiFieldSearch--fullWidth"
+                className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
                 onChange={[Function]}
                 onKeyUp={[Function]}
                 placeholder="Find element"
diff --git a/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot
index 3d688acbf7d76..59b9989030459 100644
--- a/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot
@@ -48,11 +48,9 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
                 <button
                   aria-haspopup="true"
                   aria-labelledby="undefined generated-id"
-                  aria-selected={true}
                   className="euiSuperSelectControl euiSuperSelectControl--compressed"
                   onClick={[Function]}
                   onKeyDown={[Function]}
-                  role="option"
                   type="button"
                 />
                 <div
@@ -529,11 +527,9 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
                 <button
                   aria-haspopup="true"
                   aria-labelledby="undefined generated-id"
-                  aria-selected={true}
                   className="euiSuperSelectControl euiSuperSelectControl--compressed"
                   onClick={[Function]}
                   onKeyDown={[Function]}
-                  role="option"
                   type="button"
                 />
                 <div
diff --git a/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot b/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot
index ce3084ea4fbb4..841d7612b4c27 100644
--- a/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot
@@ -127,13 +127,11 @@ Array [
                   <button
                     aria-haspopup="true"
                     aria-labelledby="generated-id generated-id"
-                    aria-selected={true}
                     className="euiSuperSelectControl euiSuperSelectControl--compressed"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
                     onKeyDown={[Function]}
-                    role="option"
                     type="button"
                   >
                     <div
@@ -479,13 +477,11 @@ Array [
                   <button
                     aria-haspopup="true"
                     aria-labelledby="generated-id generated-id"
-                    aria-selected={true}
                     className="euiSuperSelectControl euiSuperSelectControl--compressed"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
                     onKeyDown={[Function]}
-                    role="option"
                     type="button"
                   >
                     <div
@@ -780,13 +776,11 @@ Array [
                   <button
                     aria-haspopup="true"
                     aria-labelledby="generated-id generated-id"
-                    aria-selected={true}
                     className="euiSuperSelectControl euiSuperSelectControl--compressed"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
                     onKeyDown={[Function]}
-                    role="option"
                     type="button"
                   >
                     <div
@@ -1057,13 +1051,11 @@ Array [
                   <button
                     aria-haspopup="true"
                     aria-labelledby="generated-id generated-id"
-                    aria-selected={true}
                     className="euiSuperSelectControl euiSuperSelectControl--compressed"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
                     onKeyDown={[Function]}
-                    role="option"
                     type="button"
                   >
                     <div
diff --git a/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/var_config.stories.storyshot b/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/var_config.stories.storyshot
index 146f07a9d0118..b4996328b04e7 100644
--- a/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/var_config.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/var_config.stories.storyshot
@@ -17,6 +17,7 @@ exports[`Storyshots components/Variables/VarConfig default 1`] = `
           aria-controls="accordion-variables"
           aria-expanded={false}
           className="euiAccordion__button"
+          id="generated-id"
           onClick={[Function]}
           type="button"
         >
diff --git a/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot
index 4941215def43b..52a009f1d5cbf 100644
--- a/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot
@@ -22,7 +22,7 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
         >
           <input
             aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-            className="euiFieldSearch euiFieldSearch--fullWidth"
+            className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
             defaultValue=""
             onKeyUp={[Function]}
             placeholder="Find template"
diff --git a/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot b/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot
index 298c2482e6093..997f8a24050f6 100644
--- a/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot
+++ b/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot
@@ -332,13 +332,11 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
                     <button
                       aria-haspopup="true"
                       aria-labelledby="generated-id generated-id"
-                      aria-selected={true}
                       className="euiSuperSelectControl euiSuperSelectControl--compressed"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
                       onKeyDown={[Function]}
-                      role="option"
                       type="button"
                     >
                       <div
@@ -804,13 +802,11 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
                   <button
                     aria-haspopup="true"
                     aria-labelledby="generated-id generated-id"
-                    aria-selected={true}
                     className="euiSuperSelectControl euiSuperSelectControl--compressed"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
                     onKeyDown={[Function]}
-                    role="option"
                     type="button"
                   >
                     <div
@@ -1288,13 +1284,11 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
                     <button
                       aria-haspopup="true"
                       aria-labelledby="generated-id generated-id"
-                      aria-selected={true}
                       className="euiSuperSelectControl euiSuperSelectControl--compressed"
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
                       onKeyDown={[Function]}
-                      role="option"
                       type="button"
                     >
                       <div
diff --git a/x-pack/plugins/canvas/storybook/addon/src/components/action_list.tsx b/x-pack/plugins/canvas/storybook/addon/src/components/action_list.tsx
index 9c29a44a67318..36b08f99fffe2 100644
--- a/x-pack/plugins/canvas/storybook/addon/src/components/action_list.tsx
+++ b/x-pack/plugins/canvas/storybook/addon/src/components/action_list.tsx
@@ -51,7 +51,6 @@ export const ActionList: FC<{
   }, [recordedActions]);
 
   const options: EuiSelectableOption[] = Object.values(recordedActions).map((recordedAction) => ({
-    id: recordedAction.id,
     key: recordedAction.id,
     label: recordedAction.action.type,
     checked: recordedAction.id === selectedAction?.id ? 'on' : undefined,
@@ -59,8 +58,8 @@ export const ActionList: FC<{
 
   const onChange: (selectedOptions: EuiSelectableOption[]) => void = (selectedOptions) => {
     selectedOptions.forEach((option) => {
-      if (option && option.checked && option.id) {
-        const selected = recordedActions[option.id];
+      if (option && option.checked && option.key) {
+        const selected = recordedActions[option.key];
 
         if (selected) {
           setSelectedAction(selected);
diff --git a/x-pack/plugins/global_search_bar/public/components/__snapshots__/search_bar.test.tsx.snap b/x-pack/plugins/global_search_bar/public/components/__snapshots__/search_bar.test.tsx.snap
index f7e4bfd1c961c..0217f039e08ba 100644
--- a/x-pack/plugins/global_search_bar/public/components/__snapshots__/search_bar.test.tsx.snap
+++ b/x-pack/plugins/global_search_bar/public/components/__snapshots__/search_bar.test.tsx.snap
@@ -66,7 +66,7 @@ exports[`SearchBar supports keyboard shortcuts 1`] = `
   aria-haspopup="listbox"
   aria-label="Filter options"
   autocomplete="off"
-  class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiSelectableSearch euiSelectableTemplateSitewide__search"
+  class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiFieldSearch-isClearable euiSelectableSearch euiSelectableTemplateSitewide__search"
   data-test-subj="header-search"
   placeholder="Search Elastic"
   type="search"
diff --git a/x-pack/plugins/maps/public/components/tooltip_selector/add_tooltip_field_popover.tsx b/x-pack/plugins/maps/public/components/tooltip_selector/add_tooltip_field_popover.tsx
index 7e18088444129..3aed5af5c5c25 100644
--- a/x-pack/plugins/maps/public/components/tooltip_selector/add_tooltip_field_popover.tsx
+++ b/x-pack/plugins/maps/public/components/tooltip_selector/add_tooltip_field_popover.tsx
@@ -27,7 +27,7 @@ export type FieldProps = {
   name: string;
 };
 
-type FieldOptions = Array<EuiSelectableOption<{ value: string }>>;
+type FieldOption = EuiSelectableOption<{ value: string }>;
 
 function sortByLabel(a: EuiSelectableOption, b: EuiSelectableOption): number {
   return a.label.localeCompare(b.label);
@@ -68,7 +68,7 @@ interface Props {
 interface State {
   isPopoverOpen: boolean;
   checkedFields: string[];
-  options?: FieldOptions;
+  options?: FieldOption[];
   prevFields?: FieldProps[];
   prevSelectedFields?: FieldProps[];
 }
@@ -107,15 +107,13 @@ export class AddTooltipFieldPopover extends Component<Props, State> {
     });
   };
 
-  _onSelect = (selectableOptions: EuiSelectableOption[]) => {
-    // EUI team to remove casting: https://github.com/elastic/eui/issues/3966
-    const options = selectableOptions as FieldOptions;
+  _onSelect = (options: FieldOption[]) => {
     const checkedFields: string[] = options
       .filter((option) => {
         return option.checked === 'on';
       })
       .map((option) => {
-        return option.value!;
+        return option.value;
       });
 
     this.setState({
@@ -156,7 +154,7 @@ export class AddTooltipFieldPopover extends Component<Props, State> {
 
     return (
       <Fragment>
-        <EuiSelectable
+        <EuiSelectable<FieldOption>
           searchable
           searchProps={{ compressed: true }}
           options={this.state.options}
diff --git a/x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap
index 9724e36f045e4..af022fc3d525d 100644
--- a/x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap
@@ -122,6 +122,7 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         },
         "euiCardSpacing": "16px",
         "euiCheckBoxSize": "16px",
+        "euiCheckboxBorderRadius": "4px",
         "euiCodeBlockAdditionColor": "#54b399",
         "euiCodeBlockAttributeColor": "inherit",
         "euiCodeBlockBackgroundColor": "#25262e",
@@ -267,6 +268,7 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         "euiFormBorderColor": "rgba(255, 255, 255, 0.09999999999999998)",
         "euiFormBorderDisabledColor": "rgba(255, 255, 255, 0.09999999999999998)",
         "euiFormBorderOpaqueColor": "#ffffff",
+        "euiFormControlBorderRadius": 0,
         "euiFormControlBoxShadow": "0 1px 1px -1px rgba(0, 0, 0, 0.19999999999999996) 0 3px 2px -2px rgba(0, 0, 0, 0.19999999999999996)",
         "euiFormControlCompressedBorderRadius": "2px",
         "euiFormControlCompressedHeight": "32px",
diff --git a/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
index 9c0a9b26f5332..4eb320571a75b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
@@ -122,6 +122,7 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         },
         "euiCardSpacing": "16px",
         "euiCheckBoxSize": "16px",
+        "euiCheckboxBorderRadius": "4px",
         "euiCodeBlockAdditionColor": "#54b399",
         "euiCodeBlockAttributeColor": "inherit",
         "euiCodeBlockBackgroundColor": "#25262e",
@@ -267,6 +268,7 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         "euiFormBorderColor": "rgba(255, 255, 255, 0.09999999999999998)",
         "euiFormBorderDisabledColor": "rgba(255, 255, 255, 0.09999999999999998)",
         "euiFormBorderOpaqueColor": "#ffffff",
+        "euiFormControlBorderRadius": 0,
         "euiFormControlBoxShadow": "0 1px 1px -1px rgba(0, 0, 0, 0.19999999999999996) 0 3px 2px -2px rgba(0, 0, 0, 0.19999999999999996)",
         "euiFormControlCompressedBorderRadius": "2px",
         "euiFormControlCompressedHeight": "32px",
diff --git a/x-pack/plugins/uptime/public/components/certificates/__tests__/__snapshots__/cert_search.test.tsx.snap b/x-pack/plugins/uptime/public/components/certificates/__tests__/__snapshots__/cert_search.test.tsx.snap
index 97f476a56135a..f16ef6b5548b8 100644
--- a/x-pack/plugins/uptime/public/components/certificates/__tests__/__snapshots__/cert_search.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/certificates/__tests__/__snapshots__/cert_search.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`CertificatesSearch renders expected elements for valid props 1`] = `
     >
       <input
         aria-label="Search certificates"
-        class="euiFieldSearch euiFieldSearch--fullWidth"
+        class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
         data-test-subj="uptimeCertSearch"
         placeholder="Search certificates"
         type="search"
diff --git a/yarn.lock b/yarn.lock
index 761654c68ec07..2b9aca5c1329a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1253,25 +1253,23 @@
     tabbable "^1.1.0"
     uuid "^3.1.0"
 
-"@elastic/eui@28.2.0":
-  version "28.2.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-28.2.0.tgz#0c89c7adc27d4ac918191af8237a2634a26d0637"
-  integrity sha512-ovVkwbwcJLs87ycaof5pyTGjpuPH2sN38k2e+c3IiZjoeGAqWZJouptQguoKYglCyayxoBUV3TAE82m+qyxCnA==
+"@elastic/eui@28.4.0":
+  version "28.4.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-28.4.0.tgz#6b3b6b5e8b602d009410a97c26e22093846f708a"
+  integrity sha512-4iXo5fNx4qqeI+Tj5EJ0qHRhyi8KTLaqeQJCWg9Vy7N83ap6kp6s7X6D6qYUHqdmOdJH9QZYuYIpRUi3TQEJNg==
   dependencies:
     "@types/chroma-js" "^2.0.0"
-    "@types/lodash" "^4.14.116"
-    "@types/numeral" "^0.0.25"
-    "@types/react-beautiful-dnd" "^12.1.2"
-    "@types/react-input-autosize" "^2.0.2"
+    "@types/lodash" "^4.14.160"
+    "@types/numeral" "^0.0.28"
+    "@types/react-beautiful-dnd" "^13.0.0"
+    "@types/react-input-autosize" "^2.2.0"
     "@types/react-virtualized-auto-sizer" "^1.0.0"
-    "@types/react-window" "^1.8.1"
+    "@types/react-window" "^1.8.2"
     "@types/vfile-message" "^2.0.0"
-    chroma-js "^2.0.4"
-    classnames "^2.2.5"
+    chroma-js "^2.1.0"
+    classnames "^2.2.6"
     highlight.js "^9.12.0"
-    html "^1.0.0"
-    keymirror "^0.1.1"
-    lodash "^4.17.11"
+    lodash "^4.17.20"
     numeral "^2.0.6"
     prop-types "^15.6.0"
     react-ace "^7.0.5"
@@ -1289,12 +1287,11 @@
     remark-highlight.js "^5.2.0"
     remark-parse "^7.0.2"
     remark-rehype "^7.0.0"
-    resize-observer-polyfill "^1.5.0"
     tabbable "^3.0.0"
     text-diff "^1.0.1"
     unified "^8.4.2"
-    uuid "^3.1.0"
-    vfile "^4.1.1"
+    uuid "^8.3.0"
+    vfile "^4.2.0"
 
 "@elastic/filesaver@1.1.2":
   version "1.1.2"
@@ -4157,11 +4154,16 @@
     "@types/node" "*"
     "@types/webpack" "*"
 
-"@types/lodash@^4.14.116", "@types/lodash@^4.14.159":
+"@types/lodash@^4.14.159":
   version "4.14.159"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.159.tgz#61089719dc6fdd9c5cb46efc827f2571d1517065"
   integrity sha512-gF7A72f7WQN33DpqOWw9geApQPh4M3PxluMtaHxWHXEGSN12/WbcEk/eNSqWNQcQhF66VSZ06vCF94CrHwXJDg==
 
+"@types/lodash@^4.14.160":
+  version "4.14.161"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.161.tgz#a21ca0777dabc6e4f44f3d07f37b765f54188b18"
+  integrity sha512-EP6O3Jkr7bXvZZSZYlsgt5DIjiGr0dXP1/jVEwVLTFgg0d+3lWVQkRavYVQszV7dYUwvg0B8R0MBDpcmXg7XIA==
+
 "@types/log-symbols@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/log-symbols/-/log-symbols-2.0.0.tgz#7919e2ec3c8d13879bfdcab310dd7a3f7fc9466d"
@@ -4335,10 +4337,10 @@
   resolved "https://registry.yarnpkg.com/@types/npmlog/-/npmlog-4.1.2.tgz#d070fe6a6b78755d1092a3dc492d34c3d8f871c4"
   integrity sha512-4QQmOF5KlwfxJ5IGXFIudkeLCdMABz03RcUXu+LCb24zmln8QW6aDjuGl4d4XPVLf2j+FnjelHTP7dvceAFbhA==
 
-"@types/numeral@^0.0.25":
-  version "0.0.25"
-  resolved "https://registry.yarnpkg.com/@types/numeral/-/numeral-0.0.25.tgz#b6f55062827a4787fe4ab151cf3412a468e65271"
-  integrity sha512-ShHzHkYD+Ldw3eyttptCpUhF1/mkInWwasQkCNXZHOsJMJ/UMa8wXrxSrTJaVk0r4pLK/VnESVM0wFsfQzNEKQ==
+"@types/numeral@^0.0.28":
+  version "0.0.28"
+  resolved "https://registry.yarnpkg.com/@types/numeral/-/numeral-0.0.28.tgz#e43928f0bda10b169b6f7ecf99e3ddf836b8ebe4"
+  integrity sha512-Sjsy10w6XFHDktJJdXzBJmoondAKW+LcGpRFH+9+zXEDj0cOH8BxJuZA9vUDSMAzU1YRJlsPKmZEEiTYDlICLw==
 
 "@types/object-hash@^1.3.0":
   version "1.3.0"
@@ -4469,10 +4471,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-beautiful-dnd@^12.1.2":
-  version "12.1.2"
-  resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-12.1.2.tgz#dfd1bdb072e92c1363e5f7a4c1842eaf95f77b21"
-  integrity sha512-h+0mA4cHmzL4BhyCniB6ZSSZhfO9LpXXbnhdAfa2k7klS03woiOT+Dh5AchY6eoQXk3vQVtqn40YY3u+MwFs8A==
+"@types/react-beautiful-dnd@^13.0.0":
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.0.0.tgz#e60d3d965312fcf1516894af92dc3e9249587db4"
+  integrity sha512-by80tJ8aTTDXT256Gl+RfLRtFjYbUWOnZuEigJgNsJrSEGxvFe5eY6k3g4VIvf0M/6+xoLgfYWoWonlOo6Wqdg==
   dependencies:
     "@types/react" "*"
 
@@ -4497,10 +4499,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-input-autosize@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@types/react-input-autosize/-/react-input-autosize-2.0.2.tgz#6ccdfb100c21b6096c1a04c3c3fac196b0ce61c1"
-  integrity sha512-QzewaD5kog7c6w5e3dretb+50oM8RDdDvVumQKCtPjI6VHyR8lA/HxCiTrv5l9Vgbi4NCitYuix/NorOevlrng==
+"@types/react-input-autosize@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@types/react-input-autosize/-/react-input-autosize-2.2.0.tgz#d62b07567088e547500f4693ae25dce0639c1b4e"
+  integrity sha512-8NO64XLmdRKUHeteXnweVnXuuSQr5HMSa4vRyNBUKOeZlimvgHPMtRchFHVHO9k7VpDoufCFYMJ6XHJ44qMTBQ==
   dependencies:
     "@types/react" "*"
 
@@ -4594,7 +4596,7 @@
     "@types/prop-types" "*"
     "@types/react" "*"
 
-"@types/react-window@^1.8.1":
+"@types/react-window@^1.8.2":
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.2.tgz#a5a6b2762ce73ffaab7911ee1397cf645f2459fe"
   integrity sha512-gP1xam68Wc4ZTAee++zx6pTdDAH08rAkQrWm4B4F/y6hhmlT9Mgx2q8lTCXnrPHXsr15XjRN9+K2DLKcz44qEQ==
@@ -8520,7 +8522,7 @@ chroma-js@^1.4.1:
   resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-1.4.1.tgz#eb2d9c4d1ff24616be84b35119f4d26f8205f134"
   integrity sha512-jTwQiT859RTFN/vIf7s+Vl/Z2LcMrvMv3WUFmd/4u76AdlFC0NTNgqEEFPcRiHmAswPsMiQEDZLM8vX8qXpZNQ==
 
-chroma-js@^2.0.4, chroma-js@^2.1.0:
+chroma-js@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/chroma-js/-/chroma-js-2.1.0.tgz#c0be48a21fe797ef8965608c1c4f911ef2da49d5"
   integrity sha512-uiRdh4ZZy+UTPSrAdp8hqEdVb1EllLtTHOt5TMaOjJUvi+O54/83Fc5K2ld1P+TJX+dw5B+8/sCgzI6eaur/lg==
@@ -29204,6 +29206,11 @@ uuid@^3.0.0, uuid@^3.1.0, uuid@^3.3.2, uuid@^3.4.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+uuid@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.0.tgz#ab738085ca22dc9a8c92725e459b1d507df5d6ea"
+  integrity sha512-fX6Z5o4m6XsXBdli9g7DtWgAx+osMsRRZFKma1mIUsLCz6vRvv+pz5VNbyu9UEDzpMWulZfvpgb/cmDXVulYFQ==
+
 v8-compile-cache@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz#00f7494d2ae2b688cfe2899df6ed2c54bef91dbe"
@@ -29709,7 +29716,7 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
-vfile@^4.1.1:
+vfile@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/vfile/-/vfile-4.2.0.tgz#26c78ac92eb70816b01d4565e003b7e65a2a0e01"
   integrity sha512-a/alcwCvtuc8OX92rqqo7PflxiCgXRFjdyoGVuYV+qbgCb0GgZJRvIgCD4+U/Kl1yhaRsaTwksF88xbPyGsgpw==