diff --git a/CHANGELOG.md b/CHANGELOG.md
index e78260e1c82..954c8545127 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Updated makeId to DEPRECATED, shifted all the calls to htmlIdGenerator ([#3129](https://github.com/elastic/eui/pull/3129))
+
+**Bug Fixes**
+
 - Fixed the `img` element in `EuiIcon` using custom SVGs to have an `alt` attribute with an empty string, rather than no `alt` attribute at all ([#3245](https://github.com/elastic/eui/pull/3245))
 
 ## [`22.3.0`](https://github.com/elastic/eui/tree/v22.3.0)
diff --git a/src-docs/src/views/button/button_group.js b/src-docs/src/views/button/button_group.js
index 97978761e66..b7025a92d83 100644
--- a/src-docs/src/views/button/button_group.js
+++ b/src-docs/src/views/button/button_group.js
@@ -6,16 +6,16 @@ import {
   EuiTitle,
 } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 import { EuiPanel } from '../../../../src/components/panel/panel';
 
 export default class extends Component {
   constructor(props) {
     super(props);
 
-    const idPrefix = makeId();
-    const idPrefix2 = makeId();
-    const idPrefix3 = makeId();
+    const idPrefix = htmlIdGenerator()();
+    const idPrefix2 = htmlIdGenerator()();
+    const idPrefix3 = htmlIdGenerator()();
 
     this.toggleButtons = [
       {
diff --git a/src-docs/src/views/form_compressed/complex_example.js b/src-docs/src/views/form_compressed/complex_example.js
index 7bac014313f..d5fbfce4638 100644
--- a/src-docs/src/views/form_compressed/complex_example.js
+++ b/src-docs/src/views/form_compressed/complex_example.js
@@ -22,14 +22,14 @@ import {
   EuiSuperSelect,
   EuiToolTip,
 } from '../../../../src/components';
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default class extends Component {
   constructor(props) {
     super(props);
-    const idPrefix = makeId;
-    const idPrefix2 = makeId;
-    const idPrefix3 = makeId;
+    const idPrefix = htmlIdGenerator();
+    const idPrefix2 = htmlIdGenerator();
+    const idPrefix3 = htmlIdGenerator();
 
     this.toggleButtons = [
       {
diff --git a/src-docs/src/views/form_compressed/form_compressed.js b/src-docs/src/views/form_compressed/form_compressed.js
index 512075c8388..b9f96bd6cdd 100644
--- a/src-docs/src/views/form_compressed/form_compressed.js
+++ b/src-docs/src/views/form_compressed/form_compressed.js
@@ -13,13 +13,13 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default class extends Component {
   constructor(props) {
     super(props);
 
-    const idPrefix = makeId();
+    const idPrefix = htmlIdGenerator()();
 
     this.state = {
       isSwitchChecked: false,
diff --git a/src-docs/src/views/form_controls/checkbox_group.js b/src-docs/src/views/form_controls/checkbox_group.js
index 4aabaac80a7..b6c7cef6b5a 100644
--- a/src-docs/src/views/form_controls/checkbox_group.js
+++ b/src-docs/src/views/form_controls/checkbox_group.js
@@ -3,13 +3,13 @@ import React, { Component } from 'react';
 import { EuiCheckboxGroup } from '../../../../src/components';
 import { DisplayToggles } from './display_toggles';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default class extends Component {
   constructor(props) {
     super(props);
 
-    const idPrefix = makeId();
+    const idPrefix = htmlIdGenerator()();
 
     this.checkboxes = [
       {
diff --git a/src-docs/src/views/form_controls/radio_group.js b/src-docs/src/views/form_controls/radio_group.js
index b22e8e88728..0e04f1c7e50 100644
--- a/src-docs/src/views/form_controls/radio_group.js
+++ b/src-docs/src/views/form_controls/radio_group.js
@@ -2,14 +2,14 @@ import React, { Component } from 'react';
 
 import { EuiRadioGroup } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 import { DisplayToggles } from './display_toggles';
 
 export default class extends Component {
   constructor(props) {
     super(props);
 
-    const idPrefix = makeId();
+    const idPrefix = htmlIdGenerator()();
 
     this.radios = [
       {
diff --git a/src-docs/src/views/form_layouts/described_form_group.js b/src-docs/src/views/form_layouts/described_form_group.js
index 9eba2bbf0bd..5899e79945e 100644
--- a/src-docs/src/views/form_layouts/described_form_group.js
+++ b/src-docs/src/views/form_layouts/described_form_group.js
@@ -13,13 +13,13 @@ import {
   EuiLink,
 } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default class extends Component {
   constructor(props) {
     super(props);
 
-    const idPrefix = makeId();
+    const idPrefix = htmlIdGenerator()();
 
     this.state = {
       isSwitchChecked: false,
diff --git a/src-docs/src/views/form_layouts/form_rows.js b/src-docs/src/views/form_layouts/form_rows.js
index c47cf321f6c..10ef44f199c 100644
--- a/src-docs/src/views/form_layouts/form_rows.js
+++ b/src-docs/src/views/form_layouts/form_rows.js
@@ -15,13 +15,13 @@ import {
   EuiText,
 } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services/accessibility';
 
 export default class extends Component {
   constructor(props) {
     super(props);
 
-    const idPrefix = makeId();
+    const idPrefix = htmlIdGenerator()();
 
     this.state = {
       isSwitchChecked: false,
diff --git a/src-docs/src/views/form_layouts/inline_popover.js b/src-docs/src/views/form_layouts/inline_popover.js
index c9af9fa01d7..05845fa9854 100644
--- a/src-docs/src/views/form_layouts/inline_popover.js
+++ b/src-docs/src/views/form_layouts/inline_popover.js
@@ -14,7 +14,7 @@ import {
   EuiSwitch,
 } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default class extends Component {
   constructor(props) {
@@ -111,7 +111,7 @@ export default class extends Component {
       <EuiForm>
         <EuiFormRow>
           <EuiSwitch
-            id={makeId()}
+            id={htmlIdGenerator()()}
             name="popswitch"
             label="Isn't this popover form cool?"
             checked={this.state.isSwitch2Checked}
diff --git a/src-docs/src/views/guidelines/writing.js b/src-docs/src/views/guidelines/writing.js
index b6035036ce3..072ad92834b 100644
--- a/src-docs/src/views/guidelines/writing.js
+++ b/src-docs/src/views/guidelines/writing.js
@@ -30,7 +30,7 @@ import {
   EuiTab,
 } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 const GuideRuleWriting = ({ children, className, ...rest }) => {
   const classes = classNames(className);
@@ -615,7 +615,7 @@ export default () => (
         <EuiFormRow>
           <EuiCheckbox
             onChange={() => {}}
-            id={makeId()}
+            id={htmlIdGenerator()()}
             label="Combine values in other bucket"
           />
         </EuiFormRow>
@@ -627,7 +627,7 @@ export default () => (
         <EuiFormRow>
           <EuiCheckbox
             onChange={() => {}}
-            id={makeId()}
+            id={htmlIdGenerator()()}
             label="Combine other"
           />
         </EuiFormRow>
diff --git a/src-docs/src/views/range/levels.js b/src-docs/src/views/range/levels.js
index 8da77b87fab..632e4312873 100644
--- a/src-docs/src/views/range/levels.js
+++ b/src-docs/src/views/range/levels.js
@@ -7,7 +7,7 @@ import {
   EuiDualRange,
 } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default class extends Component {
   constructor(props) {
@@ -48,7 +48,7 @@ export default class extends Component {
     return (
       <Fragment>
         <EuiRange
-          id={makeId()}
+          id={htmlIdGenerator()()}
           value={this.state.value}
           onChange={this.onChange}
           showTicks
@@ -64,7 +64,7 @@ export default class extends Component {
         <EuiSpacer size="xl" />
 
         <EuiDualRange
-          id={makeId()}
+          id={htmlIdGenerator()()}
           value={this.state.dualValue}
           onChange={this.onDualChange}
           showTicks
diff --git a/src-docs/src/views/tables/auto/auto.js b/src-docs/src/views/tables/auto/auto.js
index 77e459b03c1..c673fce129f 100644
--- a/src-docs/src/views/tables/auto/auto.js
+++ b/src-docs/src/views/tables/auto/auto.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 
 import { createDataStore } from '../data_store';
 
-import makeId from '../../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../../src/services';
 
 import {
   EuiBasicTable,
@@ -138,7 +138,7 @@ const getCellProps = (item, column) => {
   };
 };
 
-const idPrefix = makeId();
+const idPrefix = htmlIdGenerator()();
 
 const toggleButtons = [
   {
diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx
index b39f2126469..52f0882c110 100644
--- a/src/components/basic_table/basic_table.tsx
+++ b/src/components/basic_table/basic_table.tsx
@@ -42,7 +42,8 @@ import { EuiIcon } from '../icon';
 import { EuiKeyboardAccessible, EuiScreenReaderOnly } from '../accessibility';
 import { EuiI18n } from '../i18n';
 import { EuiDelayRender } from '../delay_render';
-import makeId from '../form/form_row/make_id';
+
+import { htmlIdGenerator } from '../../services/accessibility';
 import { Action } from './action_types';
 import {
   EuiTableActionsColumnType,
@@ -617,7 +618,7 @@ export class EuiBasicTable<T = any> extends Component<
       <EuiI18n token="euiBasicTable.selectAllRows" default="Select all rows">
         {(selectAllRows: string) => (
           <EuiCheckbox
-            id={`_selection_column-checkbox_${makeId()}`}
+            id={`_selection_column-checkbox_${htmlIdGenerator()()}`}
             type={isMobile ? undefined : 'inList'}
             checked={checked}
             disabled={disabled}
diff --git a/src/components/card/card.test.tsx b/src/components/card/card.test.tsx
index aa9c7bb653c..574aed510ba 100644
--- a/src/components/card/card.test.tsx
+++ b/src/components/card/card.test.tsx
@@ -6,7 +6,9 @@ import { EuiCard } from './card';
 
 import { EuiIcon } from '../icon';
 
-jest.mock('./../form/form_row/make_id', () => () => 'generated-id');
+jest.mock('./../../services/accessibility', () => ({
+  htmlIdGenerator: () => () => 'generated-id',
+}));
 
 describe('EuiCard', () => {
   test('is rendered', () => {
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index f1a807d9ce5..732ff512cfe 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -12,7 +12,7 @@ import {
   EuiCardSelectProps,
   euiCardSelectableColor,
 } from './card_select';
-import makeId from '../form/form_row/make_id';
+import { htmlIdGenerator } from '../../services/accessibility';
 
 type CardAlignment = 'left' | 'center' | 'right';
 
@@ -202,7 +202,7 @@ export const EuiCard: FunctionComponent<EuiCardProps> = ({
     className
   );
 
-  const ariaId = makeId();
+  const ariaId = htmlIdGenerator()();
 
   /**
    * Top area containing image, icon or both
diff --git a/src/components/combo_box/combo_box_input/combo_box_input.tsx b/src/components/combo_box/combo_box_input/combo_box_input.tsx
index df31fad0183..deb17243356 100644
--- a/src/components/combo_box/combo_box_input/combo_box_input.tsx
+++ b/src/components/combo_box/combo_box_input/combo_box_input.tsx
@@ -23,8 +23,6 @@ import {
 } from '../types';
 import { CommonProps } from '../../common';
 
-const makeId = htmlIdGenerator();
-
 export interface EuiComboBoxInputProps<T> extends CommonProps {
   autoSizeInputRef?: RefCallback<AutosizeInput & HTMLInputElement>;
   compressed: boolean;
@@ -189,7 +187,7 @@ export class EuiComboBoxInput<T> extends Component<
         }Combo box input. ${readPlaceholder} Type some text or, to display a list of choices, press Down Arrow. ` +
         'To exit the list of choices, press Escape.';
 
-      removeOptionMessageId = makeId();
+      removeOptionMessageId = htmlIdGenerator()();
 
       // aria-live="assertive" will read this message aloud immediately once it enters the DOM.
       // We'll render to the DOM when the input gains focus and remove it when the input loses focus.
diff --git a/src/components/form/described_form_group/described_form_group.test.tsx b/src/components/form/described_form_group/described_form_group.test.tsx
index 0d3888edb17..de7df6a241f 100644
--- a/src/components/form/described_form_group/described_form_group.test.tsx
+++ b/src/components/form/described_form_group/described_form_group.test.tsx
@@ -5,7 +5,9 @@ import { requiredProps } from '../../../test';
 import { EuiFormRow } from '../form_row';
 import { EuiDescribedFormGroup } from './described_form_group';
 
-jest.mock('../form_row/make_id', () => () => 'generated-id');
+jest.mock('./../../../services/accessibility', () => ({
+  htmlIdGenerator: () => () => 'generated-id',
+}));
 
 describe('EuiDescribedFormGroup', () => {
   const props = {
diff --git a/src/components/form/form_row/form_row.test.tsx b/src/components/form/form_row/form_row.test.tsx
index 94edb3db718..50eea80cafc 100644
--- a/src/components/form/form_row/form_row.test.tsx
+++ b/src/components/form/form_row/form_row.test.tsx
@@ -4,7 +4,9 @@ import { requiredProps } from '../../../test';
 
 import { EuiFormRow, DISPLAYS } from './form_row';
 
-jest.mock('./make_id', () => () => 'generated-id');
+jest.mock('./../../../services/accessibility', () => ({
+  htmlIdGenerator: () => () => 'generated-id',
+}));
 
 describe('EuiFormRow', () => {
   test('is rendered', () => {
diff --git a/src/components/form/form_row/form_row.tsx b/src/components/form/form_row/form_row.tsx
index 472b25b4ac6..c050a78fbef 100644
--- a/src/components/form/form_row/form_row.tsx
+++ b/src/components/form/form_row/form_row.tsx
@@ -15,7 +15,7 @@ import { EuiFormHelpText } from '../form_help_text';
 import { EuiFormErrorText } from '../form_error_text';
 import { EuiFormLabel } from '../form_label';
 
-import makeId from './make_id';
+import { htmlIdGenerator } from '../../../services/accessibility';
 
 const displayToClassNameMap = {
   row: null,
@@ -110,7 +110,7 @@ export class EuiFormRow extends Component<EuiFormRowProps, EuiFormRowState> {
 
   state: EuiFormRowState = {
     isFocused: false,
-    id: this.props.id || makeId(),
+    id: this.props.id || htmlIdGenerator()(),
   };
 
   onFocus = (...args: any[]) => {
diff --git a/src/components/form/form_row/make_id.test.ts b/src/components/form/form_row/make_id.test.ts
index e8dd3640043..0e18f0282ad 100644
--- a/src/components/form/form_row/make_id.test.ts
+++ b/src/components/form/form_row/make_id.test.ts
@@ -1,6 +1,24 @@
 import makeId from './make_id';
 
 describe('makeId', () => {
+  const _consoleLog = console.log;
+  beforeAll(() => {
+    const _consoleLog = console.log;
+    console.log = (...args: any[]) => {
+      // swallow the deprecation warning
+      if (
+        args[0] ===
+        'WARNING: makeId is deprecated. Use htmlIdGenerator from @elastic/eui instead.'
+      )
+        return;
+      _consoleLog.call(console, args);
+    };
+  });
+
+  afterAll(() => {
+    console.log = _consoleLog;
+  });
+
   let ids: Map<string, boolean>;
   beforeEach(() => {
     ids = new Map<string, boolean>();
diff --git a/src/components/form/form_row/make_id.ts b/src/components/form/form_row/make_id.ts
index 765e69939e5..870f7ff549b 100644
--- a/src/components/form/form_row/make_id.ts
+++ b/src/components/form/form_row/make_id.ts
@@ -1,6 +1,9 @@
 // Generate statistically almost-certainly-unique `id`s for associating form
 // inputs with their labels and other descriptive text elements.
 function makeId(): string {
+  console.log(
+    'WARNING: makeId is deprecated. Use htmlIdGenerator from @elastic/eui instead.'
+  );
   return Math.random()
     .toString(36)
     .slice(-8);
diff --git a/src/components/form/range/dual_range.test.tsx b/src/components/form/range/dual_range.test.tsx
index 01da75f09a7..48fc073c169 100644
--- a/src/components/form/range/dual_range.test.tsx
+++ b/src/components/form/range/dual_range.test.tsx
@@ -4,7 +4,9 @@ import { requiredProps } from '../../../test/required_props';
 
 import { EuiDualRange } from './dual_range';
 
-jest.mock('../form_row/make_id', () => () => 'generated-id');
+jest.mock('./../../../services/accessibility', () => ({
+  htmlIdGenerator: () => () => 'generated-id',
+}));
 
 const props = {
   onChange: () => {},
diff --git a/src/components/form/range/dual_range.tsx b/src/components/form/range/dual_range.tsx
index 7296e7dbffb..1b05eea959f 100644
--- a/src/components/form/range/dual_range.tsx
+++ b/src/components/form/range/dual_range.tsx
@@ -8,7 +8,8 @@ import {
   EuiFormControlLayoutDelimited,
   EuiFormControlLayoutProps,
 } from '../form_control_layout';
-import makeId from '../form_row/make_id';
+
+import { htmlIdGenerator } from '../../../services/accessibility';
 
 import { EuiRangeProps } from './range';
 import { EuiRangeHighlight } from './range_highlight';
@@ -102,7 +103,7 @@ export class EuiDualRange extends Component<EuiDualRangeProps> {
   };
 
   state = {
-    id: this.props.id || makeId(),
+    id: this.props.id || htmlIdGenerator()(),
     hasFocus: false,
     rangeSliderRefAvailable: false,
     isPopoverOpen: false,
diff --git a/src/components/form/range/range.test.tsx b/src/components/form/range/range.test.tsx
index 2cba13f8349..d18a8aa6754 100644
--- a/src/components/form/range/range.test.tsx
+++ b/src/components/form/range/range.test.tsx
@@ -4,7 +4,9 @@ import { requiredProps } from '../../../test/required_props';
 
 import { EuiRange } from './range';
 
-jest.mock('../form_row/make_id', () => () => 'generated-id');
+jest.mock('./../../../services/accessibility', () => ({
+  htmlIdGenerator: () => () => 'generated-id',
+}));
 
 const props = {
   value: '8',
diff --git a/src/components/form/range/range.tsx b/src/components/form/range/range.tsx
index 331ebd681ed..5b07f66f6f9 100644
--- a/src/components/form/range/range.tsx
+++ b/src/components/form/range/range.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { CommonProps } from '../../common';
 import { isWithinRange } from '../../../services/number';
 import { EuiInputPopover } from '../../popover';
-import makeId from '../form_row/make_id';
+import { htmlIdGenerator } from '../../../services/accessibility';
 
 import { EuiRangeHighlight } from './range_highlight';
 import { EuiRangeInput, EuiRangeInputProps } from './range_input';
@@ -93,7 +93,7 @@ export class EuiRange extends Component<EuiRangeProps> {
   preventPopoverClose: boolean = false;
 
   state = {
-    id: this.props.id || makeId(),
+    id: this.props.id || htmlIdGenerator()(),
     isPopoverOpen: false,
   };
 
diff --git a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
index 87eb0da8d93..aad1334a362 100644
--- a/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
+++ b/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
@@ -167,7 +167,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-describedby="htmlId"
+        aria-describedby="generated-id"
         aria-live="assertive"
         aria-modal="true"
         class="euiPanel euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
@@ -423,7 +423,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-describedby="htmlId"
+        aria-describedby="generated-id"
         aria-live="assertive"
         aria-modal="true"
         class="euiPanel euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
@@ -778,7 +778,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
                             data-focus-lock-disabled="disabled"
                           >
                             <div
-                              aria-describedby="htmlId"
+                              aria-describedby="generated-id"
                               aria-live="assertive"
                               aria-modal="true"
                               class="euiPanel euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
@@ -862,7 +862,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
                               data-focus-lock-disabled="disabled"
                             >
                               <div
-                                aria-describedby="htmlId"
+                                aria-describedby="generated-id"
                                 aria-live="assertive"
                                 aria-modal="true"
                                 class="euiPanel euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
@@ -940,7 +940,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
                         />
                       </SideEffect(FocusWatcher)>
                       <EuiPanel
-                        aria-describedby="htmlId"
+                        aria-describedby="generated-id"
                         aria-live="assertive"
                         aria-modal="true"
                         className="euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
@@ -956,7 +956,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
                         }
                       >
                         <div
-                          aria-describedby="htmlId"
+                          aria-describedby="generated-id"
                           aria-live="assertive"
                           aria-modal="true"
                           className="euiPanel euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
@@ -1197,7 +1197,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
       data-focus-lock-disabled="disabled"
     >
       <div
-        aria-describedby="htmlId"
+        aria-describedby="generated-id"
         aria-live="assertive"
         aria-modal="true"
         class="euiPanel euiPopover__panel euiPopover__panel--bottom euiPopover__panel-noArrow euiSuperSelect__popoverPanel"
diff --git a/src/components/form/super_select/super_select.test.tsx b/src/components/form/super_select/super_select.test.tsx
index d047d077092..fe588c7ac1b 100644
--- a/src/components/form/super_select/super_select.test.tsx
+++ b/src/components/form/super_select/super_select.test.tsx
@@ -4,17 +4,14 @@ import { requiredProps, takeMountedSnapshot } from '../../../test';
 
 import { EuiSuperSelect } from './super_select';
 
-jest.mock('../form_row/make_id', () => () => 'generated-id');
+jest.mock('./../../../services/accessibility', () => ({
+  htmlIdGenerator: () => () => 'generated-id',
+}));
 
 jest.mock('../../portal', () => ({
   EuiPortal: ({ children }: any) => children,
 }));
 
-// Mock the htmlIdGenerator to generate predictable ids for snapshot tests
-jest.mock('../../../services/accessibility/html_id_generator', () => ({
-  htmlIdGenerator: () => () => 'htmlId',
-}));
-
 const options = [
   { value: '1', inputDisplay: 'Option #1' },
   { value: '2', inputDisplay: 'Option #2' },
diff --git a/src/components/form/super_select/super_select_control.test.tsx b/src/components/form/super_select/super_select_control.test.tsx
index 5aae913b796..073dbce86ef 100644
--- a/src/components/form/super_select/super_select_control.test.tsx
+++ b/src/components/form/super_select/super_select_control.test.tsx
@@ -4,7 +4,9 @@ import { requiredProps } from '../../../test';
 
 import { EuiSuperSelectControl } from './super_select_control';
 
-jest.mock('../form_row/make_id', () => () => 'generated-id');
+jest.mock('./../../../services/accessibility', () => ({
+  htmlIdGenerator: () => () => 'generated-id',
+}));
 
 describe('EuiSuperSelectControl', () => {
   test('is rendered', () => {
diff --git a/src/components/form/super_select/super_select_control.tsx b/src/components/form/super_select/super_select_control.tsx
index 671caa8393e..f4749cb4259 100644
--- a/src/components/form/super_select/super_select_control.tsx
+++ b/src/components/form/super_select/super_select_control.tsx
@@ -9,7 +9,7 @@ import classNames from 'classnames';
 import { CommonProps } from '../../common';
 
 import { EuiScreenReaderOnly } from '../../accessibility';
-import makeId from '../form_row/make_id';
+import { htmlIdGenerator } from '../../../services/accessibility';
 import {
   EuiFormControlLayout,
   EuiFormControlLayoutProps,
@@ -100,7 +100,7 @@ export const EuiSuperSelectControl: <T extends string>(
     side: 'right',
   };
 
-  const screenReaderId = makeId();
+  const screenReaderId = htmlIdGenerator()();
 
   return (
     <Fragment>
diff --git a/src/components/form/switch/switch.test.tsx b/src/components/form/switch/switch.test.tsx
index a564df98ca1..2d80bbcc764 100644
--- a/src/components/form/switch/switch.test.tsx
+++ b/src/components/form/switch/switch.test.tsx
@@ -10,7 +10,9 @@ const props = {
   onChange: () => {},
 };
 
-jest.mock('../form_row/make_id', () => () => 'generated-id');
+jest.mock('./../../../services/accessibility', () => ({
+  htmlIdGenerator: () => () => 'generated-id',
+}));
 
 describe('EuiSwitch', () => {
   test('is rendered', () => {
diff --git a/src/components/form/switch/switch.tsx b/src/components/form/switch/switch.tsx
index d4e806f6574..b6e0143dd4c 100644
--- a/src/components/form/switch/switch.tsx
+++ b/src/components/form/switch/switch.tsx
@@ -8,7 +8,7 @@ import React, {
 import classNames from 'classnames';
 
 import { CommonProps } from '../../common';
-import makeId from '../../form/form_row/make_id';
+import { htmlIdGenerator } from '../../../services/accessibility';
 import { EuiIcon } from '../../icon';
 
 export type EuiSwitchEvent = React.BaseSyntheticEvent<
@@ -47,8 +47,8 @@ export const EuiSwitch: FunctionComponent<EuiSwitchProps> = ({
   type = 'button',
   ...rest
 }) => {
-  const [switchId] = useState(id || makeId());
-  const [labelId] = useState(makeId());
+  const [switchId] = useState(id || htmlIdGenerator()());
+  const [labelId] = useState(htmlIdGenerator()());
 
   const onClick = useCallback(
     (e: React.MouseEvent<HTMLButtonElement | HTMLParagraphElement>) => {
diff --git a/src/components/header/header_alert/header_alert.test.tsx b/src/components/header/header_alert/header_alert.test.tsx
index c64a0a6e272..0b3684df458 100644
--- a/src/components/header/header_alert/header_alert.test.tsx
+++ b/src/components/header/header_alert/header_alert.test.tsx
@@ -4,7 +4,9 @@ import { requiredProps } from '../../../test/required_props';
 
 import { EuiHeaderAlert } from './header_alert';
 
-jest.mock('./../../form/form_row/make_id', () => () => 'generated-id');
+jest.mock('./../../../services/accessibility', () => ({
+  htmlIdGenerator: () => () => 'generated-id',
+}));
 
 describe('EuiHeaderAlert', () => {
   test('is rendered', () => {
diff --git a/src/components/header/header_alert/header_alert.tsx b/src/components/header/header_alert/header_alert.tsx
index cc7bf71582a..6586ce09cb1 100644
--- a/src/components/header/header_alert/header_alert.tsx
+++ b/src/components/header/header_alert/header_alert.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { CommonProps } from '../../common';
 
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
-import makeId from '../../form/form_row/make_id';
+import { htmlIdGenerator } from '../../../services';
 
 export type EuiHeaderAlertProps = CommonProps &
   Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
@@ -32,7 +32,7 @@ export const EuiHeaderAlert: FunctionComponent<EuiHeaderAlertProps> = ({
 }) => {
   const classes = classNames('euiHeaderAlert', className);
 
-  const ariaId = makeId();
+  const ariaId = htmlIdGenerator()();
 
   return (
     <article aria-labelledby={`${ariaId}-title`} className={classes} {...rest}>
diff --git a/src/components/tabs/tabbed_content/tabbed_content.tsx b/src/components/tabs/tabbed_content/tabbed_content.tsx
index 4d06397958d..daa1c41a70d 100644
--- a/src/components/tabs/tabbed_content/tabbed_content.tsx
+++ b/src/components/tabs/tabbed_content/tabbed_content.tsx
@@ -6,8 +6,6 @@ import { EuiTabs, EuiTabsDisplaySizes, EuiTabsSizes } from '../tabs';
 import { EuiTab } from '../tab';
 import { CommonProps } from '../../common';
 
-const makeId = htmlIdGenerator();
-
 /**
  * Marked as const so type is `['initial', 'selected']` instead of `string[]`
  */
@@ -66,7 +64,7 @@ export class EuiTabbedContent extends Component<
     autoFocus: 'initial',
   };
 
-  private readonly rootId = makeId();
+  private readonly rootId = htmlIdGenerator()();
 
   private readonly divRef = createRef<HTMLDivElement>();
 
diff --git a/src/components/tool_tip/tool_tip.test.tsx b/src/components/tool_tip/tool_tip.test.tsx
index 64f1d7ea302..f713a766f00 100644
--- a/src/components/tool_tip/tool_tip.test.tsx
+++ b/src/components/tool_tip/tool_tip.test.tsx
@@ -7,6 +7,10 @@ import {
 } from '../../test';
 import { EuiToolTip } from './tool_tip';
 
+jest.mock('./../../services/accessibility', () => ({
+  htmlIdGenerator: () => () => 'id',
+}));
+
 describe('EuiToolTip', () => {
   test('is rendered', () => {
     const component = render(
diff --git a/src/components/tool_tip/tool_tip.tsx b/src/components/tool_tip/tool_tip.tsx
index f543a5ff71e..ba2cc550857 100644
--- a/src/components/tool_tip/tool_tip.tsx
+++ b/src/components/tool_tip/tool_tip.tsx
@@ -11,9 +11,8 @@ import classNames from 'classnames';
 import { keysOf } from '../common';
 import { EuiPortal } from '../portal';
 import { EuiToolTipPopover } from './tool_tip_popover';
-import { findPopoverPosition } from '../../services';
+import { findPopoverPosition, htmlIdGenerator } from '../../services';
 
-import makeId from '../form/form_row/make_id';
 import { EuiResizeObserver } from '../observer/resize_observer';
 
 export type ToolTipPositions = 'top' | 'right' | 'bottom' | 'left';
@@ -115,7 +114,7 @@ export class EuiToolTip extends Component<Props, State> {
     calculatedPosition: this.props.position,
     toolTipStyles: DEFAULT_TOOLTIP_STYLES,
     arrowStyles: undefined,
-    id: this.props.id || makeId(),
+    id: this.props.id || htmlIdGenerator()(),
   };
 
   static defaultProps: Partial<Props> = {