diff --git a/package.json b/package.json
index 177b70efd4cc7..d9dd4912481b9 100644
--- a/package.json
+++ b/package.json
@@ -102,7 +102,7 @@
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.21",
     "@elastic/ems-client": "7.16.0",
-    "@elastic/eui": "39.1.1",
+    "@elastic/eui": "40.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/maki": "6.3.0",
     "@elastic/node-crypto": "1.2.1",
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 6987b779d5d45..571b564f90329 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
@@ -644,6 +644,11 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
         >
           <EuiAccordion
             arrowDisplay="right"
+            arrowProps={
+              Object {
+                "color": "text",
+              }
+            }
             buttonClassName="euiCollapsibleNavGroup__heading"
             buttonContent={
               <EuiFlexGroup
@@ -665,8 +670,10 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                 </EuiFlexItem>
               </EuiFlexGroup>
             }
+            buttonElement="button"
             className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
             data-test-subj="collapsibleNavGroup-recentlyViewed"
+            element="div"
             id="generated-id"
             initialIsOpen={true}
             isLoading={false}
@@ -685,28 +692,13 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                 <button
                   aria-controls="generated-id"
                   aria-expanded={true}
-                  className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                  className="euiAccordion__button euiCollapsibleNavGroup__heading"
                   id="generated-id"
                   onClick={[Function]}
                   type="button"
                 >
                   <span
-                    className="euiAccordion__iconWrapper"
-                  >
-                    <EuiIcon
-                      className="euiAccordion__icon euiAccordion__icon-isOpen"
-                      size="m"
-                      type="arrowRight"
-                    >
-                      <span
-                        className="euiAccordion__icon euiAccordion__icon-isOpen"
-                        data-euiicon-type="arrowRight"
-                        size="m"
-                      />
-                    </EuiIcon>
-                  </span>
-                  <span
-                    className="euiIEFlexWrapFix"
+                    className="euiAccordion__buttonContent"
                   >
                     <EuiFlexGroup
                       alignItems="center"
@@ -736,6 +728,43 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                     </EuiFlexGroup>
                   </span>
                 </button>
+                <EuiButtonIcon
+                  aria-controls="generated-id"
+                  aria-expanded={true}
+                  aria-labelledby="generated-id"
+                  className="euiAccordion__iconButton euiAccordion__iconButton-isOpen euiAccordion__iconButton--right"
+                  color="text"
+                  iconType="arrowRight"
+                  onClick={[Function]}
+                  tabIndex={-1}
+                >
+                  <button
+                    aria-controls="generated-id"
+                    aria-expanded={true}
+                    aria-labelledby="generated-id"
+                    className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen euiAccordion__iconButton--right"
+                    disabled={false}
+                    onClick={[Function]}
+                    tabIndex={-1}
+                    type="button"
+                  >
+                    <EuiIcon
+                      aria-hidden="true"
+                      className="euiButtonIcon__icon"
+                      color="inherit"
+                      size="m"
+                      type="arrowRight"
+                    >
+                      <span
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        color="inherit"
+                        data-euiicon-type="arrowRight"
+                        size="m"
+                      />
+                    </EuiIcon>
+                  </button>
+                </EuiButtonIcon>
               </div>
               <div
                 aria-labelledby="generated-id"
@@ -892,6 +921,11 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
             >
               <EuiAccordion
                 arrowDisplay="right"
+                arrowProps={
+                  Object {
+                    "color": "text",
+                  }
+                }
                 buttonClassName="euiCollapsibleNavGroup__heading"
                 buttonContent={
                   <EuiFlexGroup
@@ -921,8 +955,10 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                     </EuiFlexItem>
                   </EuiFlexGroup>
                 }
+                buttonElement="button"
                 className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
                 data-test-subj="collapsibleNavGroup-kibana"
+                element="div"
                 id="generated-id"
                 initialIsOpen={true}
                 isLoading={false}
@@ -941,28 +977,13 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                     <button
                       aria-controls="generated-id"
                       aria-expanded={true}
-                      className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                      className="euiAccordion__button euiCollapsibleNavGroup__heading"
                       id="generated-id"
                       onClick={[Function]}
                       type="button"
                     >
                       <span
-                        className="euiAccordion__iconWrapper"
-                      >
-                        <EuiIcon
-                          className="euiAccordion__icon euiAccordion__icon-isOpen"
-                          size="m"
-                          type="arrowRight"
-                        >
-                          <span
-                            className="euiAccordion__icon euiAccordion__icon-isOpen"
-                            data-euiicon-type="arrowRight"
-                            size="m"
-                          />
-                        </EuiIcon>
-                      </span>
-                      <span
-                        className="euiIEFlexWrapFix"
+                        className="euiAccordion__buttonContent"
                       >
                         <EuiFlexGroup
                           alignItems="center"
@@ -1009,6 +1030,43 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                         </EuiFlexGroup>
                       </span>
                     </button>
+                    <EuiButtonIcon
+                      aria-controls="generated-id"
+                      aria-expanded={true}
+                      aria-labelledby="generated-id"
+                      className="euiAccordion__iconButton euiAccordion__iconButton-isOpen euiAccordion__iconButton--right"
+                      color="text"
+                      iconType="arrowRight"
+                      onClick={[Function]}
+                      tabIndex={-1}
+                    >
+                      <button
+                        aria-controls="generated-id"
+                        aria-expanded={true}
+                        aria-labelledby="generated-id"
+                        className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen euiAccordion__iconButton--right"
+                        disabled={false}
+                        onClick={[Function]}
+                        tabIndex={-1}
+                        type="button"
+                      >
+                        <EuiIcon
+                          aria-hidden="true"
+                          className="euiButtonIcon__icon"
+                          color="inherit"
+                          size="m"
+                          type="arrowRight"
+                        >
+                          <span
+                            aria-hidden="true"
+                            className="euiButtonIcon__icon"
+                            color="inherit"
+                            data-euiicon-type="arrowRight"
+                            size="m"
+                          />
+                        </EuiIcon>
+                      </button>
+                    </EuiButtonIcon>
                   </div>
                   <div
                     aria-labelledby="generated-id"
@@ -1184,6 +1242,11 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
             >
               <EuiAccordion
                 arrowDisplay="right"
+                arrowProps={
+                  Object {
+                    "color": "text",
+                  }
+                }
                 buttonClassName="euiCollapsibleNavGroup__heading"
                 buttonContent={
                   <EuiFlexGroup
@@ -1213,8 +1276,10 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                     </EuiFlexItem>
                   </EuiFlexGroup>
                 }
+                buttonElement="button"
                 className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
                 data-test-subj="collapsibleNavGroup-observability"
+                element="div"
                 id="generated-id"
                 initialIsOpen={true}
                 isLoading={false}
@@ -1233,28 +1298,13 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                     <button
                       aria-controls="generated-id"
                       aria-expanded={true}
-                      className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                      className="euiAccordion__button euiCollapsibleNavGroup__heading"
                       id="generated-id"
                       onClick={[Function]}
                       type="button"
                     >
                       <span
-                        className="euiAccordion__iconWrapper"
-                      >
-                        <EuiIcon
-                          className="euiAccordion__icon euiAccordion__icon-isOpen"
-                          size="m"
-                          type="arrowRight"
-                        >
-                          <span
-                            className="euiAccordion__icon euiAccordion__icon-isOpen"
-                            data-euiicon-type="arrowRight"
-                            size="m"
-                          />
-                        </EuiIcon>
-                      </span>
-                      <span
-                        className="euiIEFlexWrapFix"
+                        className="euiAccordion__buttonContent"
                       >
                         <EuiFlexGroup
                           alignItems="center"
@@ -1301,6 +1351,43 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                         </EuiFlexGroup>
                       </span>
                     </button>
+                    <EuiButtonIcon
+                      aria-controls="generated-id"
+                      aria-expanded={true}
+                      aria-labelledby="generated-id"
+                      className="euiAccordion__iconButton euiAccordion__iconButton-isOpen euiAccordion__iconButton--right"
+                      color="text"
+                      iconType="arrowRight"
+                      onClick={[Function]}
+                      tabIndex={-1}
+                    >
+                      <button
+                        aria-controls="generated-id"
+                        aria-expanded={true}
+                        aria-labelledby="generated-id"
+                        className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen euiAccordion__iconButton--right"
+                        disabled={false}
+                        onClick={[Function]}
+                        tabIndex={-1}
+                        type="button"
+                      >
+                        <EuiIcon
+                          aria-hidden="true"
+                          className="euiButtonIcon__icon"
+                          color="inherit"
+                          size="m"
+                          type="arrowRight"
+                        >
+                          <span
+                            aria-hidden="true"
+                            className="euiButtonIcon__icon"
+                            color="inherit"
+                            data-euiicon-type="arrowRight"
+                            size="m"
+                          />
+                        </EuiIcon>
+                      </button>
+                    </EuiButtonIcon>
                   </div>
                   <div
                     aria-labelledby="generated-id"
@@ -1437,6 +1524,11 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
             >
               <EuiAccordion
                 arrowDisplay="right"
+                arrowProps={
+                  Object {
+                    "color": "text",
+                  }
+                }
                 buttonClassName="euiCollapsibleNavGroup__heading"
                 buttonContent={
                   <EuiFlexGroup
@@ -1466,8 +1558,10 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                     </EuiFlexItem>
                   </EuiFlexGroup>
                 }
+                buttonElement="button"
                 className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
                 data-test-subj="collapsibleNavGroup-securitySolution"
+                element="div"
                 id="generated-id"
                 initialIsOpen={true}
                 isLoading={false}
@@ -1486,28 +1580,13 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                     <button
                       aria-controls="generated-id"
                       aria-expanded={true}
-                      className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                      className="euiAccordion__button euiCollapsibleNavGroup__heading"
                       id="generated-id"
                       onClick={[Function]}
                       type="button"
                     >
                       <span
-                        className="euiAccordion__iconWrapper"
-                      >
-                        <EuiIcon
-                          className="euiAccordion__icon euiAccordion__icon-isOpen"
-                          size="m"
-                          type="arrowRight"
-                        >
-                          <span
-                            className="euiAccordion__icon euiAccordion__icon-isOpen"
-                            data-euiicon-type="arrowRight"
-                            size="m"
-                          />
-                        </EuiIcon>
-                      </span>
-                      <span
-                        className="euiIEFlexWrapFix"
+                        className="euiAccordion__buttonContent"
                       >
                         <EuiFlexGroup
                           alignItems="center"
@@ -1554,6 +1633,43 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                         </EuiFlexGroup>
                       </span>
                     </button>
+                    <EuiButtonIcon
+                      aria-controls="generated-id"
+                      aria-expanded={true}
+                      aria-labelledby="generated-id"
+                      className="euiAccordion__iconButton euiAccordion__iconButton-isOpen euiAccordion__iconButton--right"
+                      color="text"
+                      iconType="arrowRight"
+                      onClick={[Function]}
+                      tabIndex={-1}
+                    >
+                      <button
+                        aria-controls="generated-id"
+                        aria-expanded={true}
+                        aria-labelledby="generated-id"
+                        className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen euiAccordion__iconButton--right"
+                        disabled={false}
+                        onClick={[Function]}
+                        tabIndex={-1}
+                        type="button"
+                      >
+                        <EuiIcon
+                          aria-hidden="true"
+                          className="euiButtonIcon__icon"
+                          color="inherit"
+                          size="m"
+                          type="arrowRight"
+                        >
+                          <span
+                            aria-hidden="true"
+                            className="euiButtonIcon__icon"
+                            color="inherit"
+                            data-euiicon-type="arrowRight"
+                            size="m"
+                          />
+                        </EuiIcon>
+                      </button>
+                    </EuiButtonIcon>
                   </div>
                   <div
                     aria-labelledby="generated-id"
@@ -1651,6 +1767,11 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
             >
               <EuiAccordion
                 arrowDisplay="right"
+                arrowProps={
+                  Object {
+                    "color": "text",
+                  }
+                }
                 buttonClassName="euiCollapsibleNavGroup__heading"
                 buttonContent={
                   <EuiFlexGroup
@@ -1680,8 +1801,10 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                     </EuiFlexItem>
                   </EuiFlexGroup>
                 }
+                buttonElement="button"
                 className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
                 data-test-subj="collapsibleNavGroup-management"
+                element="div"
                 id="generated-id"
                 initialIsOpen={true}
                 isLoading={false}
@@ -1700,28 +1823,13 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                     <button
                       aria-controls="generated-id"
                       aria-expanded={true}
-                      className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                      className="euiAccordion__button euiCollapsibleNavGroup__heading"
                       id="generated-id"
                       onClick={[Function]}
                       type="button"
                     >
                       <span
-                        className="euiAccordion__iconWrapper"
-                      >
-                        <EuiIcon
-                          className="euiAccordion__icon euiAccordion__icon-isOpen"
-                          size="m"
-                          type="arrowRight"
-                        >
-                          <span
-                            className="euiAccordion__icon euiAccordion__icon-isOpen"
-                            data-euiicon-type="arrowRight"
-                            size="m"
-                          />
-                        </EuiIcon>
-                      </span>
-                      <span
-                        className="euiIEFlexWrapFix"
+                        className="euiAccordion__buttonContent"
                       >
                         <EuiFlexGroup
                           alignItems="center"
@@ -1768,6 +1876,43 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
                         </EuiFlexGroup>
                       </span>
                     </button>
+                    <EuiButtonIcon
+                      aria-controls="generated-id"
+                      aria-expanded={true}
+                      aria-labelledby="generated-id"
+                      className="euiAccordion__iconButton euiAccordion__iconButton-isOpen euiAccordion__iconButton--right"
+                      color="text"
+                      iconType="arrowRight"
+                      onClick={[Function]}
+                      tabIndex={-1}
+                    >
+                      <button
+                        aria-controls="generated-id"
+                        aria-expanded={true}
+                        aria-labelledby="generated-id"
+                        className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen euiAccordion__iconButton--right"
+                        disabled={false}
+                        onClick={[Function]}
+                        tabIndex={-1}
+                        type="button"
+                      >
+                        <EuiIcon
+                          aria-hidden="true"
+                          className="euiButtonIcon__icon"
+                          color="inherit"
+                          size="m"
+                          type="arrowRight"
+                        >
+                          <span
+                            aria-hidden="true"
+                            className="euiButtonIcon__icon"
+                            color="inherit"
+                            data-euiicon-type="arrowRight"
+                            size="m"
+                          />
+                        </EuiIcon>
+                      </button>
+                    </EuiButtonIcon>
                   </div>
                   <div
                     aria-labelledby="generated-id"
diff --git a/src/core/public/chrome/ui/header/collapsible_nav.test.tsx b/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
index 019a3c7820324..abc2fb5cc3356 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav.test.tsx
@@ -71,7 +71,10 @@ function expectNavIsClosed(component: ReactWrapper) {
 }
 
 function clickGroup(component: ReactWrapper, group: string) {
-  component.find(`[data-test-subj="collapsibleNavGroup-${group}"] button`).simulate('click');
+  component
+    .find(`[data-test-subj="collapsibleNavGroup-${group}"] button`)
+    .first()
+    .simulate('click');
 }
 
 describe('CollapsibleNav', () => {
diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
index efa54e74fdf2f..305eeb9a6a358 100644
--- a/src/dev/license_checker/config.ts
+++ b/src/dev/license_checker/config.ts
@@ -75,6 +75,6 @@ export const LICENSE_OVERRIDES = {
   'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/ems-client@7.16.0': ['Elastic License 2.0'],
-  '@elastic/eui@39.1.1': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@40.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
   'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
 };
diff --git a/src/plugins/vis_default_editor/public/components/__snapshots__/agg.test.tsx.snap b/src/plugins/vis_default_editor/public/components/__snapshots__/agg.test.tsx.snap
index bc6d28bd5c1c4..b25444d16c46a 100644
--- a/src/plugins/vis_default_editor/public/components/__snapshots__/agg.test.tsx.snap
+++ b/src/plugins/vis_default_editor/public/components/__snapshots__/agg.test.tsx.snap
@@ -12,8 +12,10 @@ exports[`DefaultEditorAgg component should init with the default set of props 1`
     </React.Fragment>
   }
   buttonContentClassName="visEditorSidebar__aggGroupAccordionButtonContent eui-textTruncate"
+  buttonElement="button"
   className="visEditorSidebar__section visEditorSidebar__collapsible visEditorSidebar__collapsible--marginBottom"
   data-test-subj="visEditorAggAccordion1"
+  element="div"
   extraAction={
     <div>
       <EuiToolTip
diff --git a/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap b/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap
index f50836e6ca8af..1dd916f827fe6 100644
--- a/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap
+++ b/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/__snapshots__/value_axes_panel.test.tsx.snap
@@ -66,8 +66,10 @@ exports[`ValueAxesPanel component should init with the default set of props 1`]
       </React.Fragment>
     }
     buttonContentClassName="visEditorSidebar__aggGroupAccordionButtonContent eui-textTruncate"
+    buttonElement="button"
     className="visEditorSidebar__section visEditorSidebar__collapsible"
     data-test-subj="toggleYAxisOptions-ValueAxis-1"
+    element="div"
     extraAction={
       <EuiToolTip
         content="Remove Y-axis"
@@ -176,8 +178,10 @@ exports[`ValueAxesPanel component should init with the default set of props 1`]
       </React.Fragment>
     }
     buttonContentClassName="visEditorSidebar__aggGroupAccordionButtonContent eui-textTruncate"
+    buttonElement="button"
     className="visEditorSidebar__section visEditorSidebar__collapsible"
     data-test-subj="toggleYAxisOptions-ValueAxis-2"
+    element="div"
     extraAction={
       <EuiToolTip
         content="Remove Y-axis"
diff --git a/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap b/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap
index d8da56f0a260f..b036cd93d300b 100644
--- a/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap
+++ b/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/__snapshots__/value_axis_options.test.tsx.snap
@@ -117,7 +117,9 @@ exports[`ValueAxisOptions component should init with the default set of props 1`
     arrowDisplay="left"
     buttonContent="Custom extents"
     buttonContentClassName="euiText euiText--small"
+    buttonElement="button"
     className="visEditorSidebar__section visEditorSidebar__collapsible"
+    element="div"
     id="yAxisOptionsAccordionValueAxis-1"
     initialIsOpen={false}
     isLoading={false}
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 8ca3dc2a94d4e..47c536cd1e2ef 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
@@ -13,6 +13,24 @@ exports[`Storyshots components/Variables/VarConfig default 1`] = `
       <div
         className="euiAccordion__triggerWrapper"
       >
+        <button
+          aria-controls="accordion-variables"
+          aria-expanded={false}
+          aria-labelledby="generated-id"
+          className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiAccordion__iconButton"
+          disabled={false}
+          onClick={[Function]}
+          tabIndex={-1}
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            className="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="arrowRight"
+            size="m"
+          />
+        </button>
         <button
           aria-controls="accordion-variables"
           aria-expanded={false}
@@ -22,16 +40,7 @@ exports[`Storyshots components/Variables/VarConfig default 1`] = `
           type="button"
         >
           <span
-            className="euiAccordion__iconWrapper"
-          >
-            <span
-              className="euiAccordion__icon"
-              data-euiicon-type="arrowRight"
-              size="m"
-            />
-          </span>
-          <span
-            className="euiIEFlexWrapFix"
+            className="euiAccordion__buttonContent"
           >
             <span
               className="euiToolTipAnchor"
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/components/curations_table.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/components/curations_table.tsx
index 183d2b9cb7107..e851a594bc5a2 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/components/curations_table.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/components/curations_table.tsx
@@ -73,11 +73,8 @@ export const CurationsTable: React.FC = () => {
       truncateText: true,
       mobileOptions: {
         header: true,
-        // Note: the below props are valid props per https://elastic.github.io/eui/#/tabular-content/tables (Responsive tables), but EUI's types have a bug reporting it as an error
-        // @ts-ignore
         enlarge: true,
         width: '100%',
-        truncateText: false,
       },
     },
     {
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/tables/shared_columns.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/tables/shared_columns.tsx
index 3375b25cdcd6c..2c8fcfdbc54cd 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/tables/shared_columns.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/engines/components/tables/shared_columns.tsx
@@ -36,11 +36,8 @@ export const NAME_COLUMN: EuiTableFieldDataColumnType<EngineDetails> = {
   truncateText: true,
   mobileOptions: {
     header: true,
-    // Note: the below props are valid props per https://elastic.github.io/eui/#/tabular-content/tables (Responsive tables), but EUI's types have a bug reporting it as an error
-    // @ts-ignore
     enlarge: true,
     width: '100%',
-    truncateText: false,
   },
 };
 
diff --git a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/__snapshots__/edit_layer_panel.test.tsx.snap b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/__snapshots__/edit_layer_panel.test.tsx.snap
index 1a3e97ee4fae1..03e8b4a90c0ca 100644
--- a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/__snapshots__/edit_layer_panel.test.tsx.snap
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/__snapshots__/edit_layer_panel.test.tsx.snap
@@ -55,6 +55,8 @@ exports[`EditLayerPanel is rendered 1`] = `
         <EuiAccordion
           arrowDisplay="left"
           buttonContent="Source details"
+          buttonElement="button"
+          element="div"
           id="accordion1"
           initialIsOpen={false}
           isLoading={false}
diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/__snapshots__/ccr_shard.test.js.snap b/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/__snapshots__/ccr_shard.test.js.snap
index faaf0762dbc7a..3647945c094cb 100644
--- a/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/__snapshots__/ccr_shard.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/elasticsearch/ccr_shard/__snapshots__/ccr_shard.test.js.snap
@@ -136,6 +136,8 @@ exports[`CcrShard that it renders normally 1`] = `
           </h2>
         </EuiTitle>
       }
+      buttonElement="button"
+      element="div"
       id="ccrLatestStat"
       initialIsOpen={false}
       isLoading={false}
diff --git a/x-pack/plugins/reporting/public/share_context_menu/__snapshots__/screen_capture_panel_content.test.tsx.snap b/x-pack/plugins/reporting/public/share_context_menu/__snapshots__/screen_capture_panel_content.test.tsx.snap
index c5d87410f596f..40cf48555a8c0 100644
--- a/x-pack/plugins/reporting/public/share_context_menu/__snapshots__/screen_capture_panel_content.test.tsx.snap
+++ b/x-pack/plugins/reporting/public/share_context_menu/__snapshots__/screen_capture_panel_content.test.tsx.snap
@@ -259,6 +259,8 @@ exports[`ScreenCapturePanelContent properly renders a view with "canvas" layout
     <EuiAccordion
       arrowDisplay="left"
       buttonContent="Advanced options"
+      buttonElement="button"
+      element="div"
       id="advanced-options"
       initialIsOpen={false}
       isLoading={false}
@@ -271,31 +273,53 @@ exports[`ScreenCapturePanelContent properly renders a view with "canvas" layout
         <div
           className="euiAccordion__triggerWrapper"
         >
-          <button
+          <EuiButtonIcon
             aria-controls="advanced-options"
             aria-expanded={false}
-            className="euiAccordion__button"
-            id="generated-id"
+            aria-labelledby="generated-id"
+            className="euiAccordion__iconButton"
+            color="text"
+            iconType="arrowRight"
             onClick={[Function]}
-            type="button"
+            tabIndex={-1}
           >
-            <span
-              className="euiAccordion__iconWrapper"
+            <button
+              aria-controls="advanced-options"
+              aria-expanded={false}
+              aria-labelledby="generated-id"
+              className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiAccordion__iconButton"
+              disabled={false}
+              onClick={[Function]}
+              tabIndex={-1}
+              type="button"
             >
               <EuiIcon
-                className="euiAccordion__icon"
+                aria-hidden="true"
+                className="euiButtonIcon__icon"
+                color="inherit"
                 size="m"
                 type="arrowRight"
               >
                 <span
-                  className="euiAccordion__icon"
+                  aria-hidden="true"
+                  className="euiButtonIcon__icon"
+                  color="inherit"
                   data-euiicon-type="arrowRight"
                   size="m"
                 />
               </EuiIcon>
-            </span>
+            </button>
+          </EuiButtonIcon>
+          <button
+            aria-controls="advanced-options"
+            aria-expanded={false}
+            className="euiAccordion__button"
+            id="generated-id"
+            onClick={[Function]}
+            type="button"
+          >
             <span
-              className="euiIEFlexWrapFix"
+              className="euiAccordion__buttonContent"
             >
               Advanced options
             </span>
@@ -697,6 +721,8 @@ exports[`ScreenCapturePanelContent properly renders a view with "print" layout o
     <EuiAccordion
       arrowDisplay="left"
       buttonContent="Advanced options"
+      buttonElement="button"
+      element="div"
       id="advanced-options"
       initialIsOpen={false}
       isLoading={false}
@@ -709,31 +735,53 @@ exports[`ScreenCapturePanelContent properly renders a view with "print" layout o
         <div
           className="euiAccordion__triggerWrapper"
         >
-          <button
+          <EuiButtonIcon
             aria-controls="advanced-options"
             aria-expanded={false}
-            className="euiAccordion__button"
-            id="generated-id"
+            aria-labelledby="generated-id"
+            className="euiAccordion__iconButton"
+            color="text"
+            iconType="arrowRight"
             onClick={[Function]}
-            type="button"
+            tabIndex={-1}
           >
-            <span
-              className="euiAccordion__iconWrapper"
+            <button
+              aria-controls="advanced-options"
+              aria-expanded={false}
+              aria-labelledby="generated-id"
+              className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiAccordion__iconButton"
+              disabled={false}
+              onClick={[Function]}
+              tabIndex={-1}
+              type="button"
             >
               <EuiIcon
-                className="euiAccordion__icon"
+                aria-hidden="true"
+                className="euiButtonIcon__icon"
+                color="inherit"
                 size="m"
                 type="arrowRight"
               >
                 <span
-                  className="euiAccordion__icon"
+                  aria-hidden="true"
+                  className="euiButtonIcon__icon"
+                  color="inherit"
                   data-euiicon-type="arrowRight"
                   size="m"
                 />
               </EuiIcon>
-            </span>
+            </button>
+          </EuiButtonIcon>
+          <button
+            aria-controls="advanced-options"
+            aria-expanded={false}
+            className="euiAccordion__button"
+            id="generated-id"
+            onClick={[Function]}
+            type="button"
+          >
             <span
-              className="euiIEFlexWrapFix"
+              className="euiAccordion__buttonContent"
             >
               Advanced options
             </span>
@@ -1007,6 +1055,8 @@ exports[`ScreenCapturePanelContent renders the default view properly 1`] = `
     <EuiAccordion
       arrowDisplay="left"
       buttonContent="Advanced options"
+      buttonElement="button"
+      element="div"
       id="advanced-options"
       initialIsOpen={false}
       isLoading={false}
@@ -1019,31 +1069,53 @@ exports[`ScreenCapturePanelContent renders the default view properly 1`] = `
         <div
           className="euiAccordion__triggerWrapper"
         >
-          <button
+          <EuiButtonIcon
             aria-controls="advanced-options"
             aria-expanded={false}
-            className="euiAccordion__button"
-            id="generated-id"
+            aria-labelledby="generated-id"
+            className="euiAccordion__iconButton"
+            color="text"
+            iconType="arrowRight"
             onClick={[Function]}
-            type="button"
+            tabIndex={-1}
           >
-            <span
-              className="euiAccordion__iconWrapper"
+            <button
+              aria-controls="advanced-options"
+              aria-expanded={false}
+              aria-labelledby="generated-id"
+              className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiAccordion__iconButton"
+              disabled={false}
+              onClick={[Function]}
+              tabIndex={-1}
+              type="button"
             >
               <EuiIcon
-                className="euiAccordion__icon"
+                aria-hidden="true"
+                className="euiButtonIcon__icon"
+                color="inherit"
                 size="m"
                 type="arrowRight"
               >
                 <span
-                  className="euiAccordion__icon"
+                  aria-hidden="true"
+                  className="euiButtonIcon__icon"
+                  color="inherit"
                   data-euiicon-type="arrowRight"
                   size="m"
                 />
               </EuiIcon>
-            </span>
+            </button>
+          </EuiButtonIcon>
+          <button
+            aria-controls="advanced-options"
+            aria-expanded={false}
+            className="euiAccordion__button"
+            id="generated-id"
+            onClick={[Function]}
+            type="button"
+          >
             <span
-              className="euiIEFlexWrapFix"
+              className="euiAccordion__buttonContent"
             >
               Advanced options
             </span>
diff --git a/x-pack/plugins/security_solution/public/common/components/toasters/__snapshots__/modal_all_errors.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/toasters/__snapshots__/modal_all_errors.test.tsx.snap
index 5e008e28073de..ee1b371fb5178 100644
--- a/x-pack/plugins/security_solution/public/common/components/toasters/__snapshots__/modal_all_errors.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/toasters/__snapshots__/modal_all_errors.test.tsx.snap
@@ -22,7 +22,9 @@ exports[`Modal all errors rendering it renders the default all errors modal when
     <EuiAccordion
       arrowDisplay="left"
       buttonContent="Error 1, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt u ..."
+      buttonElement="button"
       data-test-subj="modal-all-errors-accordion"
+      element="div"
       id="accordion1"
       initialIsOpen={true}
       isLoading={false}
diff --git a/x-pack/plugins/security_solution/public/overview/components/overview_host_stats/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/overview/components/overview_host_stats/__snapshots__/index.test.tsx.snap
index 2e70d1a7f8a5b..4512dfd8aab2c 100644
--- a/x-pack/plugins/security_solution/public/overview/components/overview_host_stats/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/overview/components/overview_host_stats/__snapshots__/index.test.tsx.snap
@@ -38,6 +38,8 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
       </EuiFlexGroup>
     }
     buttonContentClassName="accordion-button"
+    buttonElement="button"
+    element="div"
     id="host-stat-accordion-groupauditbeat"
     initialIsOpen={false}
     isLoading={false}
@@ -273,6 +275,8 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
       </EuiFlexGroup>
     }
     buttonContentClassName="accordion-button"
+    buttonElement="button"
+    element="div"
     id="host-stat-accordion-groupendgame"
     initialIsOpen={false}
     isLoading={false}
@@ -540,6 +544,8 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
       </EuiFlexGroup>
     }
     buttonContentClassName="accordion-button"
+    buttonElement="button"
+    element="div"
     id="host-stat-accordion-groupfilebeat"
     initialIsOpen={false}
     isLoading={false}
@@ -615,6 +621,8 @@ exports[`Overview Host Stat Data rendering it renders the default OverviewHostSt
       </EuiFlexGroup>
     }
     buttonContentClassName="accordion-button"
+    buttonElement="button"
+    element="div"
     id="host-stat-accordion-groupwinlogbeat"
     initialIsOpen={false}
     isLoading={false}
diff --git a/x-pack/plugins/security_solution/public/overview/components/overview_network_stats/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/overview/components/overview_network_stats/__snapshots__/index.test.tsx.snap
index 167866ef3c606..d9a5521aed9ac 100644
--- a/x-pack/plugins/security_solution/public/overview/components/overview_network_stats/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/overview/components/overview_network_stats/__snapshots__/index.test.tsx.snap
@@ -38,6 +38,8 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
       </EuiFlexGroup>
     }
     buttonContentClassName="accordion-button"
+    buttonElement="button"
+    element="div"
     id="network-stat-accordion-groupauditbeat"
     initialIsOpen={false}
     isLoading={false}
@@ -113,6 +115,8 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
       </EuiFlexGroup>
     }
     buttonContentClassName="accordion-button"
+    buttonElement="button"
+    element="div"
     id="network-stat-accordion-groupfilebeat"
     initialIsOpen={false}
     isLoading={false}
@@ -316,6 +320,8 @@ exports[`Overview Network Stat Data rendering it renders the default OverviewNet
       </EuiFlexGroup>
     }
     buttonContentClassName="accordion-button"
+    buttonElement="button"
+    element="div"
     id="network-stat-accordion-grouppacketbeat"
     initialIsOpen={false}
     isLoading={false}
diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/__snapshots__/ping_headers.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/ping_list/__snapshots__/ping_headers.test.tsx.snap
index ef707dc3ea315..3899c27acf1d7 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ping_list/__snapshots__/ping_headers.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/__snapshots__/ping_headers.test.tsx.snap
@@ -16,6 +16,8 @@ exports[`Ping Headers shallow renders expected elements for valid props 1`] = `
         </h3>
       </EuiText>
     }
+    buttonElement="button"
+    element="div"
     id="responseHeaderAccord"
     initialIsOpen={false}
     isLoading={false}
diff --git a/yarn.lock b/yarn.lock
index 669f8321fb4fc..a36d8e9373685 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2412,10 +2412,10 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@39.1.1":
-  version "39.1.1"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-39.1.1.tgz#52e59f1dd6448b2e80047259ca60c6c87e9873f0"
-  integrity sha512-zYCNitpp6Ds7U6eaa9QkJqc20ZMo2wjpZokNtd1WalFV22vdfiVizFg7DMtDjJrCDLmoXcLOOCMasKlmmJ1cRg==
+"@elastic/eui@40.0.0":
+  version "40.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-40.0.0.tgz#9556a87fa5eb7d9061e85f71ea9d3e6a9022dc3e"
+  integrity sha512-Zsz8eczEjthMgU00YhnsNmkKA8j4hxQpWNnrgecMgpcFEIj+Nn5WBofL/TJux/latS/mB4WWmrq4FTiSIyv/+Q==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"