diff --git a/src-docs/src/views/accordion/accordion.js b/src-docs/src/views/accordion/accordion.js
index c1aeba08ff5..c4d75a96e03 100644
--- a/src-docs/src/views/accordion/accordion.js
+++ b/src-docs/src/views/accordion/accordion.js
@@ -1,13 +1,18 @@
 import React from 'react';
 
 import { EuiAccordion, EuiPanel } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
-export default () => (
-  <div>
-    <EuiAccordion id="accordion1" buttonContent="Click me to toggle">
-      <EuiPanel color="subdued">
-        Any content inside of <strong>EuiAccordion</strong> will appear here.
-      </EuiPanel>
-    </EuiAccordion>
-  </div>
-);
+export default () => {
+  const simpleAccordionId = useGeneratedHtmlId({ prefix: 'simpleAccordion' });
+
+  return (
+    <div>
+      <EuiAccordion id={simpleAccordionId} buttonContent="Click me to toggle">
+        <EuiPanel color="subdued">
+          Any content inside of <strong>EuiAccordion</strong> will appear here.
+        </EuiPanel>
+      </EuiAccordion>
+    </div>
+  );
+};
diff --git a/src-docs/src/views/accordion/accordion_arrow.js b/src-docs/src/views/accordion/accordion_arrow.js
index 4a1348ce062..afbee5f3d7d 100644
--- a/src-docs/src/views/accordion/accordion_arrow.js
+++ b/src-docs/src/views/accordion/accordion_arrow.js
@@ -1,15 +1,20 @@
 import React from 'react';
 
 import { EuiAccordion, EuiPanel } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
-export default () => (
-  <EuiAccordion
-    id="accordion11"
-    arrowDisplay="none"
-    buttonContent="This one has it removed entirely"
-  >
-    <EuiPanel color="subdued">
-      Any content inside of <strong>EuiAccordion</strong> will appear here.
-    </EuiPanel>
-  </EuiAccordion>
-);
+export default () => {
+  const noArrowAccordionId = useGeneratedHtmlId({ prefix: 'noArrowAccordion' });
+
+  return (
+    <EuiAccordion
+      id={noArrowAccordionId}
+      arrowDisplay="none"
+      buttonContent="This one has it removed entirely"
+    >
+      <EuiPanel color="subdued">
+        Any content inside of <strong>EuiAccordion</strong> will appear here.
+      </EuiPanel>
+    </EuiAccordion>
+  );
+};
diff --git a/src-docs/src/views/accordion/accordion_arrow_right.js b/src-docs/src/views/accordion/accordion_arrow_right.js
index 09cab3b0a18..55928f2abbc 100644
--- a/src-docs/src/views/accordion/accordion_arrow_right.js
+++ b/src-docs/src/views/accordion/accordion_arrow_right.js
@@ -1,15 +1,22 @@
 import React from 'react';
 
 import { EuiAccordion, EuiPanel } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
-export default () => (
-  <EuiAccordion
-    id="accordion10"
-    arrowDisplay="right"
-    buttonContent="This accordion has the arrow on the right"
-  >
-    <EuiPanel color="subdued">
-      Any content inside of <strong>EuiAccordion</strong> will appear here.
-    </EuiPanel>
-  </EuiAccordion>
-);
+export default () => {
+  const rightArrowAccordionId = useGeneratedHtmlId({
+    prefix: 'rightArrowAccordion',
+  });
+
+  return (
+    <EuiAccordion
+      id={rightArrowAccordionId}
+      arrowDisplay="right"
+      buttonContent="This accordion has the arrow on the right"
+    >
+      <EuiPanel color="subdued">
+        Any content inside of <strong>EuiAccordion</strong> will appear here.
+      </EuiPanel>
+    </EuiAccordion>
+  );
+};
diff --git a/src-docs/src/views/accordion/accordion_example.js b/src-docs/src/views/accordion/accordion_example.js
index 4ed9ad196ae..61d79ab3d58 100644
--- a/src-docs/src/views/accordion/accordion_example.js
+++ b/src-docs/src/views/accordion/accordion_example.js
@@ -18,14 +18,14 @@ const accordionArrowRightSource = require('!!raw-loader!./accordion_arrow_right'
 import AccordionMultiple from './accordion_multiple';
 const accordionMultipleSource = require('!!raw-loader!./accordion_multiple');
 const accordionMultipleSnippet = `<EuiAccordion
-  id={accordionId}
+  id={accordionId1}
   buttonContent="Clickable title for first item"
   paddingSize="l">
     <!-- Content to show when expanded -->
 </EuiAccordion>
 <EuiSpacer />
 <EuiAccordion
-  id={accordionId}
+  id={accordionId2}
   buttonContent="Clickable title for second item"
   paddingSize="l">
     <!-- Content to show when expanded -->
@@ -73,13 +73,13 @@ import AccordionIsLoading from './accordion_isLoading';
 const accordionIsLoadingSource = require('!!raw-loader!./accordion_isLoading');
 const accordionIsLoadingSnippet = [
   `<EuiAccordion
-  id={accordionId}
+  id={accordionId1}
   isLoading>
     <!-- Content to show when expanded -->
 </EuiAccordion>
 `,
   `<EuiAccordion
-  id={accordionId}
+  id={accordionId2}
   isLoading
   isLoadingMessage={customMessage}>
   <!-- Content that will be replaced by isLoadingMessage -->
@@ -135,7 +135,7 @@ export const AccordionExample = {
       playground: accordionConfig,
       props: { EuiAccordion },
       snippet: `<EuiAccordion
-  id={accordionId}
+  id={accordionId1}
   buttonContent="Clickable title"
   >
     <!-- Content to show when expanded -->
@@ -163,7 +163,7 @@ export const AccordionExample = {
       ],
       demo: <AccordionArrowRight />,
       snippet: `<EuiAccordion
-  id={accordionId}
+  id={accordionId2}
   buttonContent="Clickable title"
   arrowDisplay="right"
   >
@@ -180,7 +180,7 @@ export const AccordionExample = {
       ],
       demo: <AccordionArrow />,
       snippet: `<EuiAccordion
-  id={accordionId}
+  id={accordionId3}
   buttonContent="Clickable title"
   arrowDisplay="none"
   >
@@ -362,7 +362,7 @@ export const AccordionExample = {
       ),
       demo: <AccordionForm />,
       snippet: `<EuiAccordion
-  id={accordionId}
+  id={accordionId4}
   className="euiAccordionForm"
   buttonClassName="euiAccordionForm__button"
   buttonContent={buttonContent}
diff --git a/src-docs/src/views/accordion/accordion_extra.js b/src-docs/src/views/accordion/accordion_extra.js
index 63d22b0c849..cb1c34b170b 100644
--- a/src-docs/src/views/accordion/accordion_extra.js
+++ b/src-docs/src/views/accordion/accordion_extra.js
@@ -1,14 +1,21 @@
 import React from 'react';
 
 import { EuiAccordion, EuiButton } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
-export default () => (
-  <EuiAccordion
-    id="accordionExtraWithLeftArrow"
-    buttonContent="Click to open"
-    extraAction={<EuiButton size="s">Extra action!</EuiButton>}
-    paddingSize="l"
-  >
-    <strong>Opened content.</strong>
-  </EuiAccordion>
-);
+export default () => {
+  const extraActionAccordionId = useGeneratedHtmlId({
+    prefix: 'extraActionAccordion',
+  });
+
+  return (
+    <EuiAccordion
+      id={extraActionAccordionId}
+      buttonContent="Click to open"
+      extraAction={<EuiButton size="s">Extra action!</EuiButton>}
+      paddingSize="l"
+    >
+      <strong>Opened content.</strong>
+    </EuiAccordion>
+  );
+};
diff --git a/src-docs/src/views/accordion/accordion_forceState.js b/src-docs/src/views/accordion/accordion_forceState.js
index ca470d2fb1d..8e221e30637 100644
--- a/src-docs/src/views/accordion/accordion_forceState.js
+++ b/src-docs/src/views/accordion/accordion_forceState.js
@@ -6,11 +6,14 @@ import {
   EuiButtonGroup,
   EuiSpacer,
 } from '../../../../src/components';
-import { htmlIdGenerator } from '../../../../src/services';
+import { htmlIdGenerator, useGeneratedHtmlId } from '../../../../src/services';
 
 const idPrefix = htmlIdGenerator()();
 
 export default () => {
+  const forcedStateAccordionId = useGeneratedHtmlId({
+    prefix: 'forcedStateAccordion',
+  });
   const [trigger, setTrigger] = useState('closed');
   const [toggleIdSelected, setID] = useState(`${idPrefix}--closed`);
   const toggleButtons = [
@@ -45,7 +48,7 @@ export default () => {
       />
       <EuiSpacer />
       <EuiAccordion
-        id={htmlIdGenerator()()}
+        id={forcedStateAccordionId}
         forceState={trigger}
         onToggle={onToggle}
         buttonContent="I am a controlled accordion"
diff --git a/src-docs/src/views/accordion/accordion_form.js b/src-docs/src/views/accordion/accordion_form.js
index d676b39c967..8b5f9a5e1ec 100644
--- a/src-docs/src/views/accordion/accordion_form.js
+++ b/src-docs/src/views/accordion/accordion_form.js
@@ -16,6 +16,7 @@ import {
   EuiTitle,
   EuiButtonIcon,
 } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 const repeatableForm = (
   <EuiForm component="form">
@@ -77,28 +78,39 @@ const extraAction = (
   />
 );
 
-export default () => (
-  <div>
-    <EuiAccordion
-      id="accordionForm1"
-      className="euiAccordionForm"
-      buttonClassName="euiAccordionForm__button"
-      buttonContent={buttonContent}
-      extraAction={extraAction}
-      paddingSize="l"
-    >
-      {repeatableForm}
-    </EuiAccordion>
+export default () => {
+  const formAccordionId__1 = useGeneratedHtmlId({
+    prefix: 'formAccordion',
+    suffix: 'first',
+  });
+  const formAccordionId__2 = useGeneratedHtmlId({
+    prefix: 'formAccordion',
+    suffix: 'second',
+  });
 
-    <EuiAccordion
-      id="accordionForm2"
-      className="euiAccordionForm"
-      buttonClassName="euiAccordionForm__button"
-      buttonContent={buttonContent}
-      extraAction={extraAction}
-      paddingSize="l"
-    >
-      {repeatableForm}
-    </EuiAccordion>
-  </div>
-);
+  return (
+    <div>
+      <EuiAccordion
+        id={formAccordionId__1}
+        className="euiAccordionForm"
+        buttonClassName="euiAccordionForm__button"
+        buttonContent={buttonContent}
+        extraAction={extraAction}
+        paddingSize="l"
+      >
+        {repeatableForm}
+      </EuiAccordion>
+
+      <EuiAccordion
+        id={formAccordionId__2}
+        className="euiAccordionForm"
+        buttonClassName="euiAccordionForm__button"
+        buttonContent={buttonContent}
+        extraAction={extraAction}
+        paddingSize="l"
+      >
+        {repeatableForm}
+      </EuiAccordion>
+    </div>
+  );
+};
diff --git a/src-docs/src/views/accordion/accordion_grow.js b/src-docs/src/views/accordion/accordion_grow.js
index 473eba0d2a0..6e8a990a4d3 100644
--- a/src-docs/src/views/accordion/accordion_grow.js
+++ b/src-docs/src/views/accordion/accordion_grow.js
@@ -8,7 +8,7 @@ import {
   EuiScreenReaderOnly,
 } from '../../../../src/components';
 import { EuiPanel } from '../../../../src/components/panel';
-import { htmlIdGenerator } from '../../../../src/services';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 const Rows = () => {
   const [counter, setCounter] = useState(1);
@@ -16,8 +16,10 @@ const Rows = () => {
   for (let i = 1; i <= counter; i++) {
     rows.push(<li key={i}>Row {i}</li>);
   }
-  const growingAccordianDescriptionId = htmlIdGenerator()();
-  const listId = htmlIdGenerator()();
+  const growingAccordianDescriptionId = useGeneratedHtmlId({
+    prefix: 'growingAccordianDescription',
+  });
+  const listId = useGeneratedHtmlId({ prefix: 'list' });
   return (
     <EuiText size="s">
       <EuiScreenReaderOnly>
@@ -52,15 +54,19 @@ const Rows = () => {
   );
 };
 
-export default () => (
-  <EuiAccordion
-    id={htmlIdGenerator()()}
-    buttonContent="Click me to toggle close / open"
-    initialIsOpen={true}
-    paddingSize="s"
-  >
-    <EuiPanel color="subdued">
-      <Rows />
-    </EuiPanel>
-  </EuiAccordion>
-);
+export default () => {
+  const dynamicAccordionId = useGeneratedHtmlId({ prefix: 'dynamicAccordion' });
+
+  return (
+    <EuiAccordion
+      id={dynamicAccordionId}
+      buttonContent="Click me to toggle close / open"
+      initialIsOpen={true}
+      paddingSize="s"
+    >
+      <EuiPanel color="subdued">
+        <Rows />
+      </EuiPanel>
+    </EuiAccordion>
+  );
+};
diff --git a/src-docs/src/views/accordion/accordion_isLoading.js b/src-docs/src/views/accordion/accordion_isLoading.js
index d9e8a76c2bd..b5474e99588 100644
--- a/src-docs/src/views/accordion/accordion_isLoading.js
+++ b/src-docs/src/views/accordion/accordion_isLoading.js
@@ -9,7 +9,7 @@ import {
 } from '../../../../src/components';
 import { EuiFormRow } from '../../../../src/components/form';
 
-import { htmlIdGenerator } from '../../../../src/services';
+import { htmlIdGenerator, useGeneratedHtmlId } from '../../../../src/services';
 
 const idPrefix = htmlIdGenerator()();
 
@@ -31,6 +31,9 @@ const toggleButtons = [
 export default () => {
   const [label, setLabel] = useState('False');
   const [toggleIdSelected, setToggleIdSelected] = useState(`${idPrefix}0`);
+  const isLoadingAccordionId = useGeneratedHtmlId({
+    prefix: 'isLoadingAccordion',
+  });
 
   const onChange = (optionId) => {
     setToggleIdSelected(optionId);
@@ -64,7 +67,7 @@ export default () => {
       </EuiFormRow>
       <EuiSpacer size="m" />
       <EuiAccordion
-        id={htmlIdGenerator()()}
+        id={isLoadingAccordionId}
         initialIsOpen={true}
         paddingSize={isLoadingMessage ? 'm' : 'none'}
         buttonContent="Accordion is loading, click to toggle"
diff --git a/src-docs/src/views/accordion/accordion_multiple.js b/src-docs/src/views/accordion/accordion_multiple.js
index 0c688c623a2..92138ab7fd4 100644
--- a/src-docs/src/views/accordion/accordion_multiple.js
+++ b/src-docs/src/views/accordion/accordion_multiple.js
@@ -6,58 +6,82 @@ import {
   EuiSpacer,
   EuiPanel,
 } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
-export default () => (
-  <div>
-    <EuiAccordion
-      id="accordion3"
-      buttonContent="An accordion with padding applied through props"
-      paddingSize="l"
-    >
-      <EuiText size="s">
-        <p>The content inside can be of any height.</p>
-        <p>The content inside can be of any height.</p>
-        <p>The content inside can be of any height.</p>
-      </EuiText>
-    </EuiAccordion>
+export default () => {
+  const multipleAccordionsId__1 = useGeneratedHtmlId({
+    prefix: 'multipleAccordions',
+    suffix: 'first',
+  });
+  const multipleAccordionsId__2 = useGeneratedHtmlId({
+    prefix: 'multipleAccordions',
+    suffix: 'second',
+  });
+  const multipleAccordionsId__3 = useGeneratedHtmlId({
+    prefix: 'multipleAccordions',
+    suffix: 'third',
+  });
+  const multipleAccordionsId__4 = useGeneratedHtmlId({
+    prefix: 'multipleAccordions',
+    suffix: 'fourth',
+  });
 
-    <EuiSpacer />
+  return (
+    <div>
+      <EuiAccordion
+        id={multipleAccordionsId__1}
+        buttonContent="An accordion with padding applied through props"
+        paddingSize="l"
+      >
+        <EuiText size="s">
+          <p>The content inside can be of any height.</p>
+          <p>The content inside can be of any height.</p>
+          <p>The content inside can be of any height.</p>
+        </EuiText>
+      </EuiAccordion>
 
-    <EuiAccordion
-      id="accordion4"
-      buttonContent="A second accordion with padding and a very long title that should truncate because of eui-textTruncate"
-      buttonContentClassName="eui-textTruncate"
-      paddingSize="l"
-    >
-      <EuiText size="s">
-        <p>The content inside can be of any height.</p>
-        <p>The content inside can be of any height.</p>
-        <p>The content inside can be of any height.</p>
-        <p>The content inside can be of any height.</p>
-        <p>The content inside can be of any height.</p>
-        <p>The content inside can be of any height.</p>
-      </EuiText>
-    </EuiAccordion>
+      <EuiSpacer />
 
-    <EuiSpacer />
+      <EuiAccordion
+        id={multipleAccordionsId__2}
+        buttonContent="A second accordion with padding and a very long title that should truncate because of eui-textTruncate"
+        buttonContentClassName="eui-textTruncate"
+        paddingSize="l"
+      >
+        <EuiText size="s">
+          <p>The content inside can be of any height.</p>
+          <p>The content inside can be of any height.</p>
+          <p>The content inside can be of any height.</p>
+          <p>The content inside can be of any height.</p>
+          <p>The content inside can be of any height.</p>
+          <p>The content inside can be of any height.</p>
+        </EuiText>
+      </EuiAccordion>
 
-    <EuiAccordion
-      id="accordion5"
-      buttonContent="A third accordion with a nested accordion"
-      paddingSize="m"
-    >
-      <EuiText size="s">
-        <p>
-          This content area will grow to accommodate when the accordion below
-          opens
-        </p>
-      </EuiText>
       <EuiSpacer />
-      <EuiAccordion id="accordion6" buttonContent="A fourth nested accordion">
-        <EuiPanel color="subdued">
-          Any content inside of <strong>EuiAccordion</strong> will appear here.
-        </EuiPanel>
+
+      <EuiAccordion
+        id={multipleAccordionsId__3}
+        buttonContent="A third accordion with a nested accordion"
+        paddingSize="m"
+      >
+        <EuiText size="s">
+          <p>
+            This content area will grow to accommodate when the accordion below
+            opens
+          </p>
+        </EuiText>
+        <EuiSpacer />
+        <EuiAccordion
+          id={multipleAccordionsId__4}
+          buttonContent="A fourth nested accordion"
+        >
+          <EuiPanel color="subdued">
+            Any content inside of <strong>EuiAccordion</strong> will appear
+            here.
+          </EuiPanel>
+        </EuiAccordion>
       </EuiAccordion>
-    </EuiAccordion>
-  </div>
-);
+    </div>
+  );
+};
diff --git a/src-docs/src/views/accordion/accordion_open.js b/src-docs/src/views/accordion/accordion_open.js
index 8177e895a61..b41f74c6f37 100644
--- a/src-docs/src/views/accordion/accordion_open.js
+++ b/src-docs/src/views/accordion/accordion_open.js
@@ -1,18 +1,22 @@
 import React from 'react';
 
 import { EuiAccordion, EuiPanel } from '../../../../src/components';
-import { htmlIdGenerator } from '../../../../src/services';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
-export default () => (
-  <div>
-    <EuiAccordion
-      id={htmlIdGenerator()()}
-      buttonContent="I am opened by default. Click me to toggle close / open"
-      initialIsOpen={true}
-    >
-      <EuiPanel color="subdued">
-        Any content inside of <strong>EuiAccordion</strong> will appear here.
-      </EuiPanel>
-    </EuiAccordion>
-  </div>
-);
+export default () => {
+  const openAccordionId = useGeneratedHtmlId({ prefix: 'openAccordion' });
+
+  return (
+    <div>
+      <EuiAccordion
+        id={openAccordionId}
+        buttonContent="I am opened by default. Click me to toggle close / open"
+        initialIsOpen={true}
+      >
+        <EuiPanel color="subdued">
+          Any content inside of <strong>EuiAccordion</strong> will appear here.
+        </EuiPanel>
+      </EuiAccordion>
+    </div>
+  );
+};
diff --git a/src-docs/src/views/flyout/flyout.js b/src-docs/src/views/flyout/flyout.js
index 596b41594dd..2c1d0241801 100644
--- a/src-docs/src/views/flyout/flyout.js
+++ b/src-docs/src/views/flyout/flyout.js
@@ -10,8 +10,13 @@ import {
   EuiCodeBlock,
 } from '../../../../src/components';
 
+import { useGeneratedHtmlId } from '../../../../src/services';
+
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+  const simpleFlyoutTitleId = useGeneratedHtmlId({
+    prefix: 'simpleFlyoutTitle',
+  });
 
   let flyout;
 
@@ -32,11 +37,11 @@ export default () => {
       <EuiFlyout
         ownFocus
         onClose={() => setIsFlyoutVisible(false)}
-        aria-labelledby="flyoutTitle"
+        aria-labelledby={simpleFlyoutTitleId}
       >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="flyoutTitle">A typical flyout</h2>
+            <h2 id={simpleFlyoutTitleId}>A typical flyout</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
diff --git a/src-docs/src/views/flyout/flyout_banner.js b/src-docs/src/views/flyout/flyout_banner.js
index 5874a43706d..18933e4fa7e 100644
--- a/src-docs/src/views/flyout/flyout_banner.js
+++ b/src-docs/src/views/flyout/flyout_banner.js
@@ -11,9 +11,13 @@ import {
   EuiTitle,
 } from '../../../../src/components';
 
+import { useGeneratedHtmlId } from '../../../../src/services';
+
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
-
+  const bannerFlyoutTitleId = useGeneratedHtmlId({
+    prefix: 'bannerFlyoutTitle',
+  });
   const closeFlyout = () => setIsFlyoutVisible(false);
 
   const showFlyout = () => setIsFlyoutVisible(true);
@@ -34,11 +38,11 @@ export default () => {
       <EuiFlyout
         ownFocus
         onClose={closeFlyout}
-        aria-labelledby="flyoutWithBannerTitle"
+        aria-labelledby={bannerFlyoutTitleId}
       >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="flyoutWithBannerTitle">A flyout with a banner</h2>
+            <h2 id={bannerFlyoutTitleId}>A flyout with a banner</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody banner={callOut}>
diff --git a/src-docs/src/views/flyout/flyout_complicated.js b/src-docs/src/views/flyout/flyout_complicated.js
index de76084edb5..441da9a8010 100644
--- a/src-docs/src/views/flyout/flyout_complicated.js
+++ b/src-docs/src/views/flyout/flyout_complicated.js
@@ -24,12 +24,17 @@ import {
   EuiSuperSelect,
 } from '../../../../src/components';
 
+import { useGeneratedHtmlId } from '../../../../src/services';
+
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const [selectedTabId, setSelectedTabId] = useState('1');
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [superSelectvalue, setSuperSelectValue] = useState('option_one');
   const [isExpressionOpen, setIsExpressionOpen] = useState(false);
+  const complicatedFlyoutTitleId = useGeneratedHtmlId({
+    prefix: 'complicatedFlyoutTitle',
+  });
 
   const tabs = [
     {
@@ -184,11 +189,11 @@ export default () => {
         ownFocus
         onClose={closeFlyout}
         hideCloseButton
-        aria-labelledby="flyoutComplicatedTitle"
+        aria-labelledby={complicatedFlyoutTitleId}
       >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="flyoutComplicatedTitle">Flyout header</h2>
+            <h2 id={complicatedFlyoutTitleId}>Flyout header</h2>
           </EuiTitle>
           <EuiSpacer size="s" />
           <EuiText color="subdued">
diff --git a/src-docs/src/views/flyout/flyout_large.js b/src-docs/src/views/flyout/flyout_large.js
index f9d2fc007d3..d6bd1bdbf25 100644
--- a/src-docs/src/views/flyout/flyout_large.js
+++ b/src-docs/src/views/flyout/flyout_large.js
@@ -10,10 +10,13 @@ import {
   EuiButtonGroup,
 } from '../../../../src/components';
 
+import { useGeneratedHtmlId } from '../../../../src/services';
+
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const [size, setSize] = useState('l');
   const [sizeName, setSizeName] = useState('large');
+  const largeFlyoutTitleId = useGeneratedHtmlId({ prefix: 'largeFlyoutTitle' });
 
   const sizes = [
     {
@@ -45,11 +48,11 @@ export default () => {
         ownFocus
         onClose={closeFlyout}
         size={size}
-        aria-labelledby="flyoutLargeTitle"
+        aria-labelledby={largeFlyoutTitleId}
       >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="flyoutLargeTitle">A {sizeName.toLowerCase()} flyout</h2>
+            <h2 id={largeFlyoutTitleId}>A {sizeName.toLowerCase()} flyout</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
diff --git a/src-docs/src/views/flyout/flyout_max_width.js b/src-docs/src/views/flyout/flyout_max_width.js
index be304813d87..80db2a0c417 100644
--- a/src-docs/src/views/flyout/flyout_max_width.js
+++ b/src-docs/src/views/flyout/flyout_max_width.js
@@ -15,11 +15,18 @@ import {
   EuiSelect,
   EuiSpacer,
 } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const [flyoutSize, setFlyoutSize] = useState('m');
   const [flyoutMaxWidth, setFlyoutMaxWidth] = useState(false);
+  const maxWidthFlyoutTitleId = useGeneratedHtmlId({
+    prefix: 'maxWidthFlyoutTitle',
+  });
+  const maxWidthFlyoutRangeId = useGeneratedHtmlId({
+    prefix: 'maxWidthFlyoutRange',
+  });
 
   const closeFlyout = () => setIsFlyoutVisible(false);
 
@@ -49,13 +56,13 @@ export default () => {
       <EuiFlyout
         ownFocus
         onClose={closeFlyout}
-        aria-labelledby="flyoutMaxWidthTitle"
+        aria-labelledby={maxWidthFlyoutTitleId}
         size={flyoutSize}
         maxWidth={flyoutMaxWidth}
       >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="flyoutMaxWidthTitle">{maxWidthTitle} maxWidth</h2>
+            <h2 id={maxWidthFlyoutTitleId}>{maxWidthTitle} maxWidth</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
@@ -93,7 +100,12 @@ export default () => {
             </EuiFormRow>
 
             <EuiFormRow label="Range">
-              <EuiRange min={0} max={100} name="range" id="range" />
+              <EuiRange
+                min={0}
+                max={100}
+                name="range"
+                id={maxWidthFlyoutRangeId}
+              />
             </EuiFormRow>
           </EuiForm>
         </EuiFlyoutBody>
diff --git a/src-docs/src/views/flyout/flyout_padding_medium.js b/src-docs/src/views/flyout/flyout_padding_medium.js
index a422475702f..7c7d1561925 100644
--- a/src-docs/src/views/flyout/flyout_padding_medium.js
+++ b/src-docs/src/views/flyout/flyout_padding_medium.js
@@ -15,10 +15,18 @@ import {
   EuiTitle,
 } from '../../../../src/components';
 
+import { useGeneratedHtmlId } from '../../../../src/services';
+
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const [paddingSize, setPaddingSize] = useState('l');
   const [paddingSizeName, setPaddingSizeName] = useState('large');
+  const mediumPaddingFlyoutTitleId = useGeneratedHtmlId({
+    prefix: 'mediumPaddingFlyoutTitle',
+  });
+  const mediumPaddingFlyoutId = useGeneratedHtmlId({
+    prefix: 'mediumPaddingFlyout',
+  });
 
   const sizes = [
     {
@@ -56,12 +64,12 @@ export default () => {
         ownFocus
         onClose={closeFlyout}
         paddingSize={paddingSize}
-        id="flyoutMediumPadding"
-        aria-labelledby="flyoutMediumPaddingTitle"
+        id={mediumPaddingFlyoutId}
+        aria-labelledby={mediumPaddingFlyoutTitleId}
       >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="flyoutMediumPaddingTitle">
+            <h2 id={mediumPaddingFlyoutTitleId}>
               A flyout with a {paddingSizeName} padding
             </h2>
           </EuiTitle>
diff --git a/src-docs/src/views/flyout/flyout_push.js b/src-docs/src/views/flyout/flyout_push.js
index 2a715b909b9..3e6896e4915 100644
--- a/src-docs/src/views/flyout/flyout_push.js
+++ b/src-docs/src/views/flyout/flyout_push.js
@@ -9,10 +9,13 @@ import {
   EuiTitle,
   EuiFlyoutFooter,
 } from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
-
+  const pushedFlyoutTitleId = useGeneratedHtmlId({
+    prefix: 'pushedFlyoutTitle',
+  });
   let flyout;
 
   if (isFlyoutVisible) {
@@ -21,11 +24,11 @@ export default () => {
         type="push"
         size="s"
         onClose={() => setIsFlyoutVisible(false)}
-        aria-labelledby="pushedFlyoutTitle"
+        aria-labelledby={pushedFlyoutTitleId}
       >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 id="pushedFlyoutTitle">A pushed flyout</h2>
+            <h2 id={pushedFlyoutTitleId}>A pushed flyout</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
diff --git a/src-docs/src/views/flyout/flyout_small.js b/src-docs/src/views/flyout/flyout_small.js
index 16f5813d0f7..f170752727d 100644
--- a/src-docs/src/views/flyout/flyout_small.js
+++ b/src-docs/src/views/flyout/flyout_small.js
@@ -8,7 +8,7 @@ import {
   EuiText,
   EuiTitle,
 } from '../../../../src/components';
-import { htmlIdGenerator } from '../../../../src/services';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
@@ -17,7 +17,9 @@ export default () => {
 
   const toggleFlyout = () => setIsFlyoutVisible((isVisible) => !isVisible);
 
-  const flyoutTitleId = htmlIdGenerator('flyout')();
+  const withoutFocusFlyoutTitleId = useGeneratedHtmlId({
+    prefix: 'withoutFocusFlyoutTitle',
+  });
 
   let flyout;
   if (isFlyoutVisible) {
@@ -25,11 +27,11 @@ export default () => {
       <EuiFlyout
         ownFocus={false}
         onClose={closeFlyout}
-        aria-labelledby={flyoutTitleId}
+        aria-labelledby={withoutFocusFlyoutTitleId}
       >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="s">
-            <h2 id={flyoutTitleId}>A flyout without ownFocus</h2>
+            <h2 id={withoutFocusFlyoutTitleId}>A flyout without ownFocus</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
diff --git a/src-docs/src/views/header/header.js b/src-docs/src/views/header/header.js
index 58c5b2d38d8..391887eda30 100644
--- a/src-docs/src/views/header/header.js
+++ b/src-docs/src/views/header/header.js
@@ -25,7 +25,7 @@ import {
   EuiSpacer,
   EuiText,
 } from '../../../../src/components';
-import { htmlIdGenerator } from '../../../../src/services';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
   const renderLogo = () => (
@@ -136,7 +136,9 @@ export default () => {
 };
 
 const HeaderUserMenu = () => {
-  const id = htmlIdGenerator()();
+  const headerUserPopoverId = useGeneratedHtmlId({
+    prefix: 'headerUserPopover',
+  });
   const [isOpen, setIsOpen] = useState(false);
 
   const onMenuButtonClick = () => {
@@ -149,7 +151,7 @@ const HeaderUserMenu = () => {
 
   const button = (
     <EuiHeaderSectionItemButton
-      aria-controls={id}
+      aria-controls={headerUserPopoverId}
       aria-expanded={isOpen}
       aria-haspopup="true"
       aria-label="Account menu"
@@ -161,7 +163,7 @@ const HeaderUserMenu = () => {
 
   return (
     <EuiPopover
-      id={id}
+      id={headerUserPopoverId}
       button={button}
       isOpen={isOpen}
       anchorPosition="downRight"
@@ -206,7 +208,9 @@ const HeaderUserMenu = () => {
 };
 
 const HeaderSpacesMenu = () => {
-  const id = htmlIdGenerator()();
+  const headerSpacesPopoverId = useGeneratedHtmlId({
+    prefix: 'headerSpacesPopover',
+  });
   const spacesValues = [
     {
       label: 'Sales team',
@@ -276,7 +280,7 @@ const HeaderSpacesMenu = () => {
 
   const button = (
     <EuiHeaderSectionItemButton
-      aria-controls={id}
+      aria-controls={headerSpacesPopoverId}
       aria-expanded={isOpen}
       aria-haspopup="true"
       aria-label="Spaces menu"
@@ -288,7 +292,7 @@ const HeaderSpacesMenu = () => {
 
   return (
     <EuiPopover
-      id={id}
+      id={headerSpacesPopoverId}
       button={button}
       isOpen={isOpen}
       anchorPosition="downLeft"
@@ -334,9 +338,10 @@ const HeaderSpacesMenu = () => {
 };
 
 const HeaderAppMenu = () => {
-  const idGenerator = htmlIdGenerator();
-  const popoverId = idGenerator('popover');
-  const keypadId = idGenerator('keypad');
+  const headerAppPopoverId = useGeneratedHtmlId({ prefix: 'headerAppPopover' });
+  const headerAppKeyPadMenuId = useGeneratedHtmlId({
+    prefix: 'headerAppKeyPadMenu',
+  });
 
   const [isOpen, setIsOpen] = useState(false);
 
@@ -350,7 +355,7 @@ const HeaderAppMenu = () => {
 
   const button = (
     <EuiHeaderSectionItemButton
-      aria-controls={keypadId}
+      aria-controls={headerAppKeyPadMenuId}
       aria-expanded={isOpen}
       aria-haspopup="true"
       aria-label="Apps menu with 1 new app"
@@ -363,13 +368,13 @@ const HeaderAppMenu = () => {
 
   return (
     <EuiPopover
-      id={popoverId}
+      id={headerAppPopoverId}
       button={button}
       isOpen={isOpen}
       anchorPosition="downRight"
       closePopover={closeMenu}
     >
-      <EuiKeyPadMenu id={keypadId} style={{ width: 288 }}>
+      <EuiKeyPadMenu id={headerAppKeyPadMenuId} style={{ width: 288 }}>
         <EuiKeyPadMenuItem label="Discover">
           <EuiIcon type="discoverApp" size="l" />
         </EuiKeyPadMenuItem>
diff --git a/src-docs/src/views/header/header_alert.js b/src-docs/src/views/header/header_alert.js
index 1aeb121b41c..e64a022dca3 100644
--- a/src-docs/src/views/header/header_alert.js
+++ b/src-docs/src/views/header/header_alert.js
@@ -27,11 +27,16 @@ import {
   EuiText,
   EuiTitle,
 } from '../../../../src/components';
-import { htmlIdGenerator } from '../../../../src/services';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 const HeaderUpdates = () => {
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
   const [isPopoverVisible, setIsPopoverVisible] = useState(false);
+  const newsFeedFlyoutId = useGeneratedHtmlId({ prefix: 'newsFeedFlyout' });
+  const newsFeedFlyoutTitleId = useGeneratedHtmlId({
+    prefix: 'newsFeedFlyoutTitle',
+  });
+  const newsFeedPopoverId = useGeneratedHtmlId({ prefix: 'newsFeedPopover' });
 
   const alerts = [
     {
@@ -160,12 +165,12 @@ const HeaderUpdates = () => {
       <EuiFlyout
         onClose={closeFlyout}
         size="s"
-        id="headerFlyoutNewsFeed"
-        aria-labelledby="flyoutSmallTitle"
+        id={newsFeedFlyoutId}
+        aria-labelledby={newsFeedFlyoutTitleId}
       >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="s">
-            <h2 id="flyoutSmallTitle">What&apos;s new</h2>
+            <h2 id={newsFeedFlyoutTitleId}>What&apos;s new</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
@@ -204,7 +209,7 @@ const HeaderUpdates = () => {
 
   const popover = (
     <EuiPopover
-      id="headerPopoverNewsFeed"
+      id={newsFeedPopoverId}
       ownFocus
       repositionOnScroll
       button={cheerButton}
@@ -244,7 +249,7 @@ const HeaderUpdates = () => {
 };
 
 const HeaderUserMenu = () => {
-  const id = htmlIdGenerator()();
+  const userPopoverId = useGeneratedHtmlId({ prefix: 'userPopover' });
   const [isOpen, setIsOpen] = useState(false);
 
   const onMenuButtonClick = () => {
@@ -257,7 +262,7 @@ const HeaderUserMenu = () => {
 
   const button = (
     <EuiHeaderSectionItemButton
-      aria-controls={id}
+      aria-controls={userPopoverId}
       aria-expanded={isOpen}
       aria-haspopup="true"
       aria-label="Account menu"
@@ -269,7 +274,7 @@ const HeaderUserMenu = () => {
 
   return (
     <EuiPopover
-      id={id}
+      id={userPopoverId}
       repositionOnScroll
       button={button}
       isOpen={isOpen}
diff --git a/src-docs/src/views/header/header_elastic_pattern.js b/src-docs/src/views/header/header_elastic_pattern.js
index 3fee5f91584..bc4589b961c 100644
--- a/src-docs/src/views/header/header_elastic_pattern.js
+++ b/src-docs/src/views/header/header_elastic_pattern.js
@@ -30,8 +30,28 @@ import {
   EuiSelectableMessage,
 } from '../../../../src/components';
 import { ExampleContext } from '../../services';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default ({ theme }) => {
+  const guideHeaderCollapsibleNavId = useGeneratedHtmlId({
+    prefix: 'guideHeaderCollapsibleNav',
+  });
+  const guideHeaderAlertFlyoutId = useGeneratedHtmlId({
+    prefix: 'guideHeaderAlertFlyout',
+  });
+  const guideHeaderAlertFlyoutTitleId = useGeneratedHtmlId({
+    prefix: 'guideHeaderAlertFlyoutTitle',
+  });
+  const guideHeaderUserPopoverId = useGeneratedHtmlId({
+    prefix: 'guideHeaderUserPopover',
+  });
+  const guideHeaderSpacesPopoverId = useGeneratedHtmlId({
+    prefix: 'guideHeaderSpacesPopover',
+  });
+  const guideHeaderDeploymentPopoverId = useGeneratedHtmlId({
+    prefix: 'guideHeaderDeploymentPopover',
+  });
+
   useEffect(() => {
     document.body.classList.add('euiBody--headerIsFixed--double');
 
@@ -51,7 +71,7 @@ export default ({ theme }) => {
   );
   const collapsibleNav = (
     <EuiCollapsibleNav
-      id="guideHeaderCollapsibleNavExample"
+      id={guideHeaderCollapsibleNavId}
       aria-label="Main navigation"
       isOpen={navIsOpen}
       isDocked={navIsDocked}
@@ -111,12 +131,12 @@ export default ({ theme }) => {
       <EuiFlyout
         onClose={() => setIsAlertFlyoutVisible(false)}
         size="s"
-        id="guideHeaderAlertExample"
-        aria-labelledby="guideHeaderAlertExampleTitle"
+        id={guideHeaderAlertFlyoutId}
+        aria-labelledby={guideHeaderAlertFlyoutTitleId}
       >
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="s">
-            <h2 id="guideHeaderAlertExampleTitle">EuiHeaderAlert</h2>
+            <h2 id={guideHeaderAlertFlyoutTitleId}>EuiHeaderAlert</h2>
           </EuiTitle>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
@@ -140,11 +160,11 @@ export default ({ theme }) => {
   const [isUserMenuVisible, setIsUserMenuVisible] = useState(false);
   const userMenu = (
     <EuiPopover
-      id="guideHeaderUserMenuExample"
+      id={guideHeaderUserPopoverId}
       repositionOnScroll
       button={
         <EuiHeaderSectionItemButton
-          aria-controls="guideHeaderUserMenuExample"
+          aria-controls={guideHeaderUserPopoverId}
           aria-expanded={isUserMenuVisible}
           aria-haspopup="true"
           aria-label="User menu"
@@ -177,11 +197,11 @@ export default ({ theme }) => {
   const [isSpacesMenuVisible, setIsSpacesMenuVisible] = useState(false);
   const spacesMenu = (
     <EuiPopover
-      id="guideHeaderSpacesMenuExample"
+      id={guideHeaderSpacesPopoverId}
       repositionOnScroll
       button={
         <EuiHeaderSectionItemButton
-          aria-controls="guideHeaderSpacesMenuExample"
+          aria-controls={guideHeaderSpacesPopoverId}
           aria-expanded={isSpacesMenuVisible}
           aria-haspopup="true"
           aria-label="Spaces menu"
@@ -214,14 +234,14 @@ export default ({ theme }) => {
   const [isDeploymentMenuVisible, setIsDeploymentMenuVisible] = useState(false);
   const deploymentMenu = (
     <EuiPopover
-      id="guideHeaderDeploymentMenuExample"
+      id={guideHeaderDeploymentPopoverId}
       repositionOnScroll
       button={
         <EuiBadge
           color={theme.euiColorDarkestShade.rgba}
           iconType="arrowDown"
           iconSide="right"
-          aria-controls="guideHeaderDeploymentMenuExample"
+          aria-controls={guideHeaderDeploymentPopoverId}
           aria-expanded={isDeploymentMenuVisible}
           aria-haspopup="true"
           onClickAriaLabel="Current deployment: Production logs. Click to open deployment menu."
diff --git a/src-docs/src/views/modal/modal_form.js b/src-docs/src/views/modal/modal_form.js
index bbd0ca93e1d..f713b9139cb 100644
--- a/src-docs/src/views/modal/modal_form.js
+++ b/src-docs/src/views/modal/modal_form.js
@@ -17,13 +17,16 @@ import {
   EuiText,
 } from '../../../../src/components';
 
-import { htmlIdGenerator } from '../../../../src/services';
+import { useGeneratedHtmlId } from '../../../../src/services';
 
 export default () => {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [isSwitchChecked, setIsSwitchChecked] = useState(true);
   const [superSelectvalue, setSuperSelectValue] = useState('option_one');
 
+  const modalFormId = useGeneratedHtmlId({ prefix: 'modalForm' });
+  const modalFormSwitchId = useGeneratedHtmlId({ prefix: 'modalFormSwitch' });
+
   const onSwitchChange = () =>
     setIsSwitchChecked((isSwitchChecked) => !isSwitchChecked);
 
@@ -77,10 +80,10 @@ export default () => {
   ];
 
   const formSample = (
-    <EuiForm id="modalFormId" component="form">
+    <EuiForm id={modalFormId} component="form">
       <EuiFormRow>
         <EuiSwitch
-          id={htmlIdGenerator()()}
+          id={modalFormSwitchId}
           name="popswitch"
           label="Isn't this modal form cool?"
           checked={isSwitchChecked}
@@ -128,7 +131,7 @@ export default () => {
         <EuiModalFooter>
           <EuiButtonEmpty onClick={closeModal}>Cancel</EuiButtonEmpty>
 
-          <EuiButton type="submit" form="modalFormId" onClick={closeModal} fill>
+          <EuiButton type="submit" form={modalFormId} onClick={closeModal} fill>
             Save
           </EuiButton>
         </EuiModalFooter>
diff --git a/src-docs/src/views/popover/trap_focus.js b/src-docs/src/views/popover/trap_focus.js
index 96e913868d4..ed6da6d9a92 100644
--- a/src-docs/src/views/popover/trap_focus.js
+++ b/src-docs/src/views/popover/trap_focus.js
@@ -8,9 +8,20 @@ import {
   EuiSwitch,
 } from '../../../../src/components';
 
+import { useGeneratedHtmlId } from '../../../../src/services';
+
 export default () => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
+  const trapFocusFormRowId__1 = useGeneratedHtmlId({
+    prefix: 'trapFocusFormRow',
+    suffix: 'first',
+  });
+  const trapFocusFormRowId__2 = useGeneratedHtmlId({
+    prefix: 'trapFocusFormRow',
+    suffix: 'second',
+  });
+
   const onButtonClick = () =>
     setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
   const closePopover = () => setIsPopoverOpen(false);
@@ -27,11 +38,11 @@ export default () => {
       button={button}
       isOpen={isPopoverOpen}
       closePopover={closePopover}
-      initialFocus="[id=asdf2]"
+      initialFocus={`[id=${trapFocusFormRowId__1}]`}
     >
       <EuiFormRow
         label="Generate a public snapshot?"
-        id="asdf"
+        id={trapFocusFormRowId__1}
         hasChildLabel={false}
       >
         <EuiSwitch
@@ -42,7 +53,10 @@ export default () => {
         />
       </EuiFormRow>
 
-      <EuiFormRow label="Include the following in the embed" id="asdf2">
+      <EuiFormRow
+        label="Include the following in the embed"
+        id={trapFocusFormRowId__2}
+      >
         <EuiSwitch
           name="switch"
           label="Current time range"
diff --git a/src-docs/src/views/resizable_container/resizable_container_reset_values.js b/src-docs/src/views/resizable_container/resizable_container_reset_values.js
index d8c3bb12c03..0d688f57bdc 100644
--- a/src-docs/src/views/resizable_container/resizable_container_reset_values.js
+++ b/src-docs/src/views/resizable_container/resizable_container_reset_values.js
@@ -10,6 +10,8 @@ import {
 } from '../../../../src/components';
 import { fake } from 'faker';
 
+import { htmlIdGenerator } from '../../../../src/services';
+
 const text = (
   <>
     <p>{fake('{{lorem.paragraphs}}')}</p>
@@ -18,8 +20,8 @@ const text = (
   </>
 );
 
-const firstPanelId = 'resizable-panel__1';
-const secondPanelId = 'resizable-panel__2';
+const firstPanelId = htmlIdGenerator('firstPanel')();
+const secondPanelId = htmlIdGenerator('secondPanel')();
 const stored = localStorage.getItem('resizableContainer');
 const storedSizes = stored && JSON.parse(stored);
 const defaultSizes = storedSizes || {