From 7a153dc2da8545af48bd67f5dfc4592fcb01b901 Mon Sep 17 00:00:00 2001
From: NightWing1998 <dhruvil.s@somaiya.edu>
Date: Fri, 20 Mar 2020 00:13:12 +0530
Subject: [PATCH 01/10] shifting makeId to htmlIdGenerator

---
 src-docs/src/views/form_layouts/form_rows.js |  5 +++--
 src/components/form/form_row/form_row.tsx    | 10 ++++++----
 src/components/form/form_row/make_id.ts      |  3 +++
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src-docs/src/views/form_layouts/form_rows.js b/src-docs/src/views/form_layouts/form_rows.js
index c47cf321f6c..d5188437aeb 100644
--- a/src-docs/src/views/form_layouts/form_rows.js
+++ b/src-docs/src/views/form_layouts/form_rows.js
@@ -15,13 +15,14 @@ import {
   EuiText,
 } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+// 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/components/form/form_row/form_row.tsx b/src/components/form/form_row/form_row.tsx
index 472b25b4ac6..98840422ceb 100644
--- a/src/components/form/form_row/form_row.tsx
+++ b/src/components/form/form_row/form_row.tsx
@@ -15,7 +15,9 @@ import { EuiFormHelpText } from '../form_help_text';
 import { EuiFormErrorText } from '../form_error_text';
 import { EuiFormLabel } from '../form_label';
 
-import makeId from './make_id';
+// import makeId from './make_id';
+
+import { htmlIdGenerator } from '../../../services/accessibility';
 
 const displayToClassNameMap = {
   row: null,
@@ -110,7 +112,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[]) => {
@@ -302,11 +304,11 @@ export class EuiFormRow extends Component<EuiFormRowProps, EuiFormRowState> {
     return labelType === 'legend' ? (
       <fieldset
         {...sharedProps}
-        {...rest as HTMLAttributes<HTMLFieldSetElement>}>
+        {...(rest as HTMLAttributes<HTMLFieldSetElement>)}>
         {contents}
       </fieldset>
     ) : (
-      <div {...sharedProps} {...rest as HTMLAttributes<HTMLDivElement>}>
+      <div {...sharedProps} {...(rest as HTMLAttributes<HTMLDivElement>)}>
         {contents}
       </div>
     );
diff --git a/src/components/form/form_row/make_id.ts b/src/components/form/form_row/make_id.ts
index 765e69939e5..71db07f5f4c 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 services instead.'
+  );
   return Math.random()
     .toString(36)
     .slice(-8);

From 921698848babbb92bd308eb1c56b95a8683a2228 Mon Sep 17 00:00:00 2001
From: NightWing1998 <dhruvil.s@somaiya.edu>
Date: Fri, 20 Mar 2020 12:40:37 +0530
Subject: [PATCH 02/10] shifted from makeId to htmlIdgenerator

---
 src-docs/src/views/button/button_group.js     | 287 +++++++++++-------
 src-docs/src/views/card/card_checkable.js     |  12 +-
 .../views/form_compressed/complex_example.js  |   8 +-
 .../views/form_compressed/form_compressed.js  |   4 +-
 src-docs/src/views/form_controls/checkbox.js  |  10 +-
 .../src/views/form_controls/checkbox_group.js |   4 +-
 src-docs/src/views/form_controls/radio.js     |   8 +-
 .../src/views/form_controls/radio_group.js    |   4 +-
 .../form_layouts/described_form_group.js      |   4 +-
 src-docs/src/views/form_layouts/form_rows.js  |   1 -
 .../src/views/form_layouts/inline_popover.js  |   4 +-
 src-docs/src/views/guidelines/writing.js      |   6 +-
 src-docs/src/views/modal/modal.js             |   4 +-
 src-docs/src/views/range/dual_range.js        |   4 +-
 src-docs/src/views/range/input.js             |   6 +-
 src-docs/src/views/range/input_only.js        |   6 +-
 src-docs/src/views/range/levels.js            |   6 +-
 src-docs/src/views/range/range.js             |   8 +-
 src-docs/src/views/range/states.js            |   6 +-
 src-docs/src/views/range/ticks.js             |   8 +-
 src-docs/src/views/suggest/suggest.js         |   4 +-
 src-docs/src/views/tables/auto/auto.js        |   4 +-
 src/components/basic_table/basic_table.tsx    |   5 +-
 src/components/card/card.test.tsx             |   5 +-
 src/components/card/card.tsx                  |   4 +-
 .../combo_box_input/combo_box_input.tsx       |   4 +-
 .../described_form_group.test.tsx             |   4 +-
 .../form/form_row/form_row.test.tsx           |   4 +-
 src/components/form/form_row/form_row.tsx     |   6 +-
 src/components/form/range/dual_range.test.tsx |   4 +-
 src/components/form/range/dual_range.tsx      |   5 +-
 src/components/form/range/range.test.tsx      |   4 +-
 src/components/form/range/range.tsx           |   4 +-
 .../__snapshots__/super_select.test.tsx.snap  |  16 +-
 .../form/super_select/super_select.test.tsx   |  14 +-
 .../super_select_control.test.tsx             |   4 +-
 .../super_select/super_select_control.tsx     |   4 +-
 src/components/form/switch/switch.test.tsx    |   4 +-
 src/components/form/switch/switch.tsx         |   6 +-
 .../header/header_alert/header_alert.test.tsx |   4 +-
 .../header/header_alert/header_alert.tsx      |   4 +-
 .../tabs/tabbed_content/tabbed_content.tsx    |   4 +-
 src/components/tool_tip/tool_tip.test.tsx     |   4 +
 src/components/tool_tip/tool_tip.tsx          |   5 +-
 44 files changed, 303 insertions(+), 223 deletions(-)

diff --git a/src-docs/src/views/button/button_group.js b/src-docs/src/views/button/button_group.js
index 97978761e66..ccccf9013e7 100644
--- a/src-docs/src/views/button/button_group.js
+++ b/src-docs/src/views/button/button_group.js
@@ -1,4 +1,7 @@
-import React, { Component, Fragment } from 'react';
+import React, {
+  Component,
+  Fragment
+} from 'react';
 
 import {
   EuiButtonGroup,
@@ -6,19 +9,22 @@ import {
   EuiTitle,
 } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
-import { EuiPanel } from '../../../../src/components/panel/panel';
+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 = [
-      {
+    this.toggleButtons = [{
         id: `${idPrefix}0`,
         label: 'Option one',
       },
@@ -32,8 +38,7 @@ export default class extends Component {
       },
     ];
 
-    this.toggleButtonsDisabled = [
-      {
+    this.toggleButtonsDisabled = [{
         id: `${idPrefix}3`,
         label: 'Option one',
       },
@@ -47,8 +52,7 @@ export default class extends Component {
       },
     ];
 
-    this.toggleButtonsMulti = [
-      {
+    this.toggleButtonsMulti = [{
         id: `${idPrefix2}0`,
         label: 'Option 1',
       },
@@ -62,8 +66,7 @@ export default class extends Component {
       },
     ];
 
-    this.toggleButtonsCompressed = [
-      {
+    this.toggleButtonsCompressed = [{
         id: `${idPrefix2}3`,
         label: 'fine',
       },
@@ -77,8 +80,7 @@ export default class extends Component {
       },
     ];
 
-    this.toggleButtonsIcons = [
-      {
+    this.toggleButtonsIcons = [{
         id: `${idPrefix3}0`,
         label: 'Align left',
         iconType: 'editorAlignLeft',
@@ -95,8 +97,7 @@ export default class extends Component {
       },
     ];
 
-    this.toggleButtonsIconsMulti = [
-      {
+    this.toggleButtonsIconsMulti = [{
         id: `${idPrefix3}3`,
         label: 'Bold',
         name: 'bold',
@@ -199,101 +200,161 @@ export default class extends Component {
   };
 
   render() {
-    return (
-      <Fragment>
-        <EuiButtonGroup
-          legend="This is a basic group"
-          options={this.toggleButtons}
-          idSelected={this.state.toggleIdSelected}
-          onChange={this.onChange}
-        />
-        <EuiSpacer size="m" />
-        <EuiTitle size="xxs">
-          <h3>Primary &amp; multi select</h3>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <EuiButtonGroup
-          legend="This is a primary group"
-          name="primary"
-          options={this.toggleButtonsMulti}
-          idToSelectedMap={this.state.toggleIdToSelectedMap}
-          onChange={this.onChangeMulti}
-          color="primary"
-          type="multi"
-        />
-        <EuiSpacer size="m" />
-        <EuiTitle size="xxs">
-          <h3>Disabled &amp; full width</h3>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <EuiButtonGroup
-          legend="This is a disabled group"
-          name="disabledGroup"
-          options={this.toggleButtonsDisabled}
-          idSelected={this.state.toggleIdDisabled}
-          onChange={this.onChangeDisabled}
-          buttonSize="m"
-          isDisabled
-          isFullWidth
-        />
-        <EuiSpacer size="m" />
-        <EuiTitle size="xxs">
-          <h3>Icons only</h3>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <EuiButtonGroup
-          legend="Text align"
-          name="textAlign"
-          options={this.toggleButtonsIcons}
-          idSelected={this.state.toggleIconIdSelected}
-          onChange={this.onChangeIcons}
-          isIconOnly
-        />
-        &nbsp;&nbsp;
-        <EuiButtonGroup
-          legend="Text style"
-          options={this.toggleButtonsIconsMulti}
-          idToSelectedMap={this.state.toggleIconIdToSelectedMap}
-          onChange={this.onChangeIconsMulti}
-          type="multi"
-          isIconOnly
-        />
-        <EuiSpacer />
-        <EuiPanel style={{ maxWidth: 300 }}>
-          <EuiTitle size="xxxs">
-            <h3>
-              Compressed groups should always be fullWidth so they line up
-              nicely in their small container.
-            </h3>
-          </EuiTitle>
-          <EuiSpacer size="s" />
-          <EuiButtonGroup
-            name="coarsness"
-            legend="This is a basic group"
-            options={this.toggleButtonsCompressed}
-            idSelected={this.state.toggleCompressedIdSelected}
-            onChange={this.onChangeCompressed}
-            buttonSize="compressed"
-            isFullWidth
-          />
-          <EuiSpacer />
-          <EuiTitle size="xxxs">
-            <h3>Unless they are icon only</h3>
-          </EuiTitle>
-          <EuiSpacer size="s" />
-          <EuiButtonGroup
-            name="textStyleCompressed"
-            legend="Text style"
-            className="eui-displayInlineBlock"
-            options={this.toggleButtonsIconsMulti}
-            idToSelectedMap={this.state.toggleIconIdToSelectedMapIcon}
-            onChange={this.onChangeIconsMultiIcons}
-            type="multi"
-            buttonSize="compressed"
-            isIconOnly
-          />
-        </EuiPanel>
-      </Fragment>
+    return ( <
+      Fragment >
+      <
+      EuiButtonGroup legend = "This is a basic group"
+      options = {
+        this.toggleButtons
+      }
+      idSelected = {
+        this.state.toggleIdSelected
+      }
+      onChange = {
+        this.onChange
+      }
+      /> <
+      EuiSpacer size = "m" / >
+      <
+      EuiTitle size = "xxs" >
+      <
+      h3 > Primary & amp; multi select < /h3> < /
+      EuiTitle > <
+      EuiSpacer size = "s" / >
+      <
+      EuiButtonGroup legend = "This is a primary group"
+      name = "primary"
+      options = {
+        this.toggleButtonsMulti
+      }
+      idToSelectedMap = {
+        this.state.toggleIdToSelectedMap
+      }
+      onChange = {
+        this.onChangeMulti
+      }
+      color = "primary"
+      type = "multi" /
+      >
+      <
+      EuiSpacer size = "m" / >
+      <
+      EuiTitle size = "xxs" >
+      <
+      h3 > Disabled & amp; full width < /h3> < /
+      EuiTitle > <
+      EuiSpacer size = "s" / >
+      <
+      EuiButtonGroup legend = "This is a disabled group"
+      name = "disabledGroup"
+      options = {
+        this.toggleButtonsDisabled
+      }
+      idSelected = {
+        this.state.toggleIdDisabled
+      }
+      onChange = {
+        this.onChangeDisabled
+      }
+      buttonSize = "m"
+      isDisabled isFullWidth /
+      >
+      <
+      EuiSpacer size = "m" / >
+      <
+      EuiTitle size = "xxs" >
+      <
+      h3 > Icons only < /h3> < /
+      EuiTitle > <
+      EuiSpacer size = "s" / >
+      <
+      EuiButtonGroup legend = "Text align"
+      name = "textAlign"
+      options = {
+        this.toggleButtonsIcons
+      }
+      idSelected = {
+        this.state.toggleIconIdSelected
+      }
+      onChange = {
+        this.onChangeIcons
+      }
+      isIconOnly /
+      >
+      &
+      nbsp; & nbsp; <
+      EuiButtonGroup legend = "Text style"
+      options = {
+        this.toggleButtonsIconsMulti
+      }
+      idToSelectedMap = {
+        this.state.toggleIconIdToSelectedMap
+      }
+      onChange = {
+        this.onChangeIconsMulti
+      }
+      type = "multi"
+      isIconOnly /
+      >
+      <
+      EuiSpacer / >
+      <
+      EuiPanel style = {
+        {
+          maxWidth: 300
+        }
+      } >
+      <
+      EuiTitle size = "xxxs" >
+      <
+      h3 >
+      Compressed groups should always be fullWidth so they line up nicely in their small container. <
+      /h3> < /
+      EuiTitle > <
+      EuiSpacer size = "s" / >
+      <
+      EuiButtonGroup name = "coarsness"
+      legend = "This is a basic group"
+      options = {
+        this.toggleButtonsCompressed
+      }
+      idSelected = {
+        this.state.toggleCompressedIdSelected
+      }
+      onChange = {
+        this.onChangeCompressed
+      }
+      buttonSize = "compressed"
+      isFullWidth /
+      >
+      <
+      EuiSpacer / >
+      <
+      EuiTitle size = "xxxs" >
+      <
+      h3 > Unless they are icon only < /h3> < /
+      EuiTitle > <
+      EuiSpacer size = "s" / >
+      <
+      EuiButtonGroup name = "textStyleCompressed"
+      legend = "Text style"
+      className = "eui-displayInlineBlock"
+      options = {
+        this.toggleButtonsIconsMulti
+      }
+      idToSelectedMap = {
+        this.state.toggleIconIdToSelectedMapIcon
+      }
+      onChange = {
+        this.onChangeIconsMultiIcons
+      }
+      type = "multi"
+      buttonSize = "compressed"
+      isIconOnly /
+      >
+      <
+      /EuiPanel> < /
+      Fragment >
     );
   }
 }
diff --git a/src-docs/src/views/card/card_checkable.js b/src-docs/src/views/card/card_checkable.js
index 6befa90aace..0e68270f4d8 100644
--- a/src-docs/src/views/card/card_checkable.js
+++ b/src-docs/src/views/card/card_checkable.js
@@ -8,11 +8,11 @@ import {
   EuiFormFieldset,
 } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default class extends Component {
   state = {
-    radioName: makeId(),
+    radioName: htmlIdGenerator()(),
     radio: 'radio2',
     nestedRadio: 'nestedRadio1',
     checkbox: false,
@@ -47,7 +47,7 @@ export default class extends Component {
             ),
           }}>
           <EuiCheckableCard
-            id={makeId()}
+            id={htmlIdGenerator()()}
             label="Option one"
             name={radioName}
             value="radio1"
@@ -58,7 +58,7 @@ export default class extends Component {
           <EuiSpacer size="m" />
 
           <EuiCheckableCard
-            id={makeId()}
+            id={htmlIdGenerator()()}
             label="Option two"
             name={radioName}
             value="radio2"
@@ -75,7 +75,7 @@ export default class extends Component {
           <EuiSpacer size="m" />
 
           <EuiCheckableCard
-            id={makeId()}
+            id={htmlIdGenerator()()}
             label="Option three (disabled)"
             name={radioName}
             value="radio3"
@@ -88,7 +88,7 @@ export default class extends Component {
         <EuiSpacer size="xl" />
 
         <EuiCheckableCard
-          id={makeId()}
+          id={htmlIdGenerator()()}
           label="I am a checkbox"
           checkableType="checkbox"
           value="checkbox1"
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.js b/src-docs/src/views/form_controls/checkbox.js
index 59cc37a5b9b..53f56207cbf 100644
--- a/src-docs/src/views/form_controls/checkbox.js
+++ b/src-docs/src/views/form_controls/checkbox.js
@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 
 import { EuiCheckbox, 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) {
@@ -30,7 +30,7 @@ export default class extends Component {
     return (
       <Fragment>
         <EuiCheckbox
-          id={makeId()}
+          id={htmlIdGenerator()()}
           label="I am a checkbox"
           checked={this.state.checked}
           onChange={this.onChange}
@@ -39,7 +39,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiCheckbox
-          id={makeId()}
+          id={htmlIdGenerator()()}
           label="I am an indeterminate checkbox"
           indeterminate={this.state.indeterminate}
           onChange={this.onChangeIndeterminate}
@@ -48,7 +48,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiCheckbox
-          id={makeId()}
+          id={htmlIdGenerator()()}
           label="I am a disabled checkbox"
           checked={this.state.checked}
           onChange={this.onChange}
@@ -58,7 +58,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiCheckbox
-          id={makeId()}
+          id={htmlIdGenerator()()}
           label="I am a compressed checkbox"
           checked={this.state.checked}
           onChange={this.onChange}
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.js b/src-docs/src/views/form_controls/radio.js
index 742989e52cc..48504df7f1b 100644
--- a/src-docs/src/views/form_controls/radio.js
+++ b/src-docs/src/views/form_controls/radio.js
@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 
 import { EuiRadio, 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) {
@@ -23,7 +23,7 @@ export default class extends Component {
     return (
       <Fragment>
         <EuiRadio
-          id={makeId()}
+          id={htmlIdGenerator()()}
           label="I am a radio"
           checked={this.state.checked}
           onChange={this.onChange}
@@ -32,7 +32,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiRadio
-          id={makeId()}
+          id={htmlIdGenerator()()}
           label="I am a disabled radio"
           checked={this.state.checked}
           onChange={this.onChange}
@@ -42,7 +42,7 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiRadio
-          id={makeId()}
+          id={htmlIdGenerator()()}
           label="I am a compressed radio"
           checked={this.state.checked}
           onChange={this.onChange}
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 c75a19987bc..d8715a28120 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 d5188437aeb..10ef44f199c 100644
--- a/src-docs/src/views/form_layouts/form_rows.js
+++ b/src-docs/src/views/form_layouts/form_rows.js
@@ -15,7 +15,6 @@ 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 {
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/modal/modal.js b/src-docs/src/views/modal/modal.js
index c7f53bb005a..00e9a04edb0 100644
--- a/src-docs/src/views/modal/modal.js
+++ b/src-docs/src/views/modal/modal.js
@@ -20,7 +20,7 @@ import {
 
 import SuperSelectComplexExample from '../super_select/super_select_complex';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export class Modal extends Component {
   constructor(props) {
@@ -54,7 +54,7 @@ export class Modal extends Component {
       <EuiForm>
         <EuiFormRow>
           <EuiSwitch
-            id={makeId()}
+            id={htmlIdGenerator()()}
             name="popswitch"
             label="Isn't this modal form cool?"
             checked={this.state.isSwitchChecked}
diff --git a/src-docs/src/views/range/dual_range.js b/src-docs/src/views/range/dual_range.js
index 4ff3b5631b6..d200ac368f1 100644
--- a/src-docs/src/views/range/dual_range.js
+++ b/src-docs/src/views/range/dual_range.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 
 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) {
@@ -22,7 +22,7 @@ export default class extends Component {
   render() {
     return (
       <EuiDualRange
-        id={makeId()}
+        id={htmlIdGenerator()()}
         min={-100}
         max={200}
         step={10}
diff --git a/src-docs/src/views/range/input.js b/src-docs/src/views/range/input.js
index 7a6f699e4af..a89b297fd58 100644
--- a/src-docs/src/views/range/input.js
+++ b/src-docs/src/views/range/input.js
@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 
 import { EuiRange, EuiSpacer, 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) {
@@ -30,7 +30,7 @@ export default class extends Component {
     return (
       <Fragment>
         <EuiRange
-          id={makeId()}
+          id={htmlIdGenerator()()}
           value={this.state.value}
           onChange={this.onChange}
           showInput
@@ -40,7 +40,7 @@ export default class extends Component {
         <EuiSpacer size="xl" />
 
         <EuiDualRange
-          id={makeId()}
+          id={htmlIdGenerator()()}
           value={this.state.dualValue}
           onChange={this.onDualChange}
           showInput
diff --git a/src-docs/src/views/range/input_only.js b/src-docs/src/views/range/input_only.js
index 4dce4ad2250..cf6d84a700b 100644
--- a/src-docs/src/views/range/input_only.js
+++ b/src-docs/src/views/range/input_only.js
@@ -4,7 +4,7 @@ import { EuiRange, EuiSpacer, EuiDualRange } from '../../../../src/components';
 
 import { DisplayToggles } from '../form_controls/display_toggles';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default class extends Component {
   constructor(props) {
@@ -46,7 +46,7 @@ export default class extends Component {
       <Fragment>
         <DisplayToggles canAppend canPrepend>
           <EuiRange
-            id={makeId()}
+            id={htmlIdGenerator()()}
             value={this.state.value}
             onChange={this.onChange}
             showInput="inputWithPopover"
@@ -59,7 +59,7 @@ export default class extends Component {
 
         <DisplayToggles canAppend canPrepend canLoading={false}>
           <EuiDualRange
-            id={makeId()}
+            id={htmlIdGenerator()()}
             value={this.state.dualValue}
             onChange={this.onDualChange}
             showInput="inputWithPopover"
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/range/range.js b/src-docs/src/views/range/range.js
index 34a66849d5d..1c5c02bf4f3 100644
--- a/src-docs/src/views/range/range.js
+++ b/src-docs/src/views/range/range.js
@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 
 import { EuiRange, 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) {
@@ -23,7 +23,7 @@ export default class extends Component {
     return (
       <Fragment>
         <EuiRange
-          id={makeId()}
+          id={htmlIdGenerator()()}
           min={100}
           max={200}
           step={0.05}
@@ -36,7 +36,7 @@ export default class extends Component {
         <EuiSpacer size="xl" />
 
         <EuiRange
-          id={makeId()}
+          id={htmlIdGenerator()()}
           min={100}
           max={200}
           value={this.state.value}
@@ -49,7 +49,7 @@ export default class extends Component {
         <EuiSpacer size="xl" />
 
         <EuiRange
-          id={makeId()}
+          id={htmlIdGenerator()()}
           min={100}
           max={200}
           value={this.state.value}
diff --git a/src-docs/src/views/range/states.js b/src-docs/src/views/range/states.js
index b23e05379cf..84e4cbfcd71 100644
--- a/src-docs/src/views/range/states.js
+++ b/src-docs/src/views/range/states.js
@@ -3,7 +3,7 @@ import React, { Component, Fragment } from 'react';
 import { EuiRange, EuiSpacer, EuiDualRange } from '../../../../src/components';
 import { DisplayToggles } from '../form_controls/display_toggles';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 export default class extends Component {
   constructor(props) {
@@ -45,7 +45,7 @@ export default class extends Component {
       <Fragment>
         <DisplayToggles canAppend canPrepend canLoading={false}>
           <EuiRange
-            id={makeId()}
+            id={htmlIdGenerator()()}
             value={this.state.value}
             onChange={this.onChange}
             showTicks
@@ -63,7 +63,7 @@ export default class extends Component {
 
         <DisplayToggles canLoading={false}>
           <EuiDualRange
-            id={makeId()}
+            id={htmlIdGenerator()()}
             value={this.state.dualValue}
             onChange={this.onDualChange}
             showLabels
diff --git a/src-docs/src/views/range/ticks.js b/src-docs/src/views/range/ticks.js
index 61b82d0c0b6..f8f711b3df4 100644
--- a/src-docs/src/views/range/ticks.js
+++ b/src-docs/src/views/range/ticks.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) {
@@ -35,7 +35,7 @@ export default class extends Component {
     return (
       <Fragment>
         <EuiRange
-          id={makeId()}
+          id={htmlIdGenerator()()}
           step={10}
           value={this.state.value}
           onChange={this.onChange}
@@ -52,7 +52,7 @@ export default class extends Component {
         <EuiSpacer size="l" />
 
         <EuiRange
-          id={makeId()}
+          id={htmlIdGenerator()()}
           value={this.state.value}
           onChange={this.onChange}
           showInput
@@ -71,7 +71,7 @@ export default class extends Component {
         <EuiSpacer size="l" />
 
         <EuiDualRange
-          id={makeId()}
+          id={htmlIdGenerator()()}
           value={this.state.dualValue}
           onChange={this.onDualChange}
           showTicks
diff --git a/src-docs/src/views/suggest/suggest.js b/src-docs/src/views/suggest/suggest.js
index b2a0dc3d12e..40287b238c0 100644
--- a/src-docs/src/views/suggest/suggest.js
+++ b/src-docs/src/views/suggest/suggest.js
@@ -6,7 +6,7 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
 const shortDescription = 'This is the description';
 
@@ -45,7 +45,7 @@ export default class extends Component {
   constructor(props) {
     super(props);
 
-    const idPrefix = makeId();
+    const idPrefix = htmlIdGenerator()();
 
     this.radios = [
       { id: `${idPrefix}0`, value: 'unchanged', label: 'No new changes' },
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 a7c63d33fab..7fa045c7c83 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,
@@ -616,7 +617,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..9f4de1d9d60 100644
--- a/src/components/card/card.test.tsx
+++ b/src/components/card/card.test.tsx
@@ -6,7 +6,10 @@ import { EuiCard } from './card';
 
 import { EuiIcon } from '../icon';
 
-jest.mock('./../form/form_row/make_id', () => () => 'generated-id');
+// 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 98840422ceb..c050a78fbef 100644
--- a/src/components/form/form_row/form_row.tsx
+++ b/src/components/form/form_row/form_row.tsx
@@ -15,8 +15,6 @@ 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 = {
@@ -304,11 +302,11 @@ export class EuiFormRow extends Component<EuiFormRowProps, EuiFormRowState> {
     return labelType === 'legend' ? (
       <fieldset
         {...sharedProps}
-        {...(rest as HTMLAttributes<HTMLFieldSetElement>)}>
+        {...rest as HTMLAttributes<HTMLFieldSetElement>}>
         {contents}
       </fieldset>
     ) : (
-      <div {...sharedProps} {...(rest as HTMLAttributes<HTMLDivElement>)}>
+      <div {...sharedProps} {...rest as HTMLAttributes<HTMLDivElement>}>
         {contents}
       </div>
     );
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 b08ec8be4a3..5c600165aad 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"
@@ -361,7 +361,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"
@@ -716,7 +716,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"
@@ -800,7 +800,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"
@@ -878,7 +878,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"
@@ -894,7 +894,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"
@@ -1135,7 +1135,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"
@@ -1160,6 +1160,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
             <button
               aria-selected="false"
               class="euiContextMenuItem euiSuperSelect__item"
+              describedby="generated-id"
               id="1"
               role="option"
               type="button"
@@ -1181,6 +1182,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
             <button
               aria-selected="false"
               class="euiContextMenuItem euiSuperSelect__item"
+              describedby="generated-id"
               id="2"
               role="option"
               type="button"
diff --git a/src/components/form/super_select/super_select.test.tsx b/src/components/form/super_select/super_select.test.tsx
index 7eee0e8c2a0..3114439a3fd 100644
--- a/src/components/form/super_select/super_select.test.tsx
+++ b/src/components/form/super_select/super_select.test.tsx
@@ -4,20 +4,22 @@ 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',
-}));
+// jest.mock('../../../services/accessibility/html_id_generator', () => ({
+//   htmlIdGenerator: () => () => 'htmlId',
+// }));
 
 const options = [
-  { value: '1', inputDisplay: 'Option #1' },
-  { value: '2', inputDisplay: 'Option #2' },
+  { value: '1', inputDisplay: 'Option #1', describedby: 'generated-id' },
+  { value: '2', inputDisplay: 'Option #2', describedby: 'generated-id' },
 ];
 
 describe('EuiSuperSelect', () => {
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 b55b26e815c..2431f456f71 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,
@@ -85,7 +85,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> = {

From e1e2b7f05170f86c6e095bf103161e77623f6a84 Mon Sep 17 00:00:00 2001
From: NightWing1998 <dhruvil.s@somaiya.edu>
Date: Fri, 20 Mar 2020 12:54:59 +0530
Subject: [PATCH 03/10] fixed linter error

---
 src-docs/src/views/button/button_group.js | 284 +++++++++-------------
 1 file changed, 113 insertions(+), 171 deletions(-)

diff --git a/src-docs/src/views/button/button_group.js b/src-docs/src/views/button/button_group.js
index ccccf9013e7..aec021e8fd0 100644
--- a/src-docs/src/views/button/button_group.js
+++ b/src-docs/src/views/button/button_group.js
@@ -1,7 +1,4 @@
-import React, {
-  Component,
-  Fragment
-} from 'react';
+import React, { Component, Fragment } from 'react';
 
 import {
   EuiButtonGroup,
@@ -9,12 +6,8 @@ import {
   EuiTitle,
 } from '../../../../src/components';
 
-import {
-  htmlIdGenerator
-} from "../../../../src/services";
-import {
-  EuiPanel
-} from '../../../../src/components/panel/panel';
+import { htmlIdGenerator } from '../../../../src/services';
+import { EuiPanel } from '../../../../src/components/panel/panel';
 
 export default class extends Component {
   constructor(props) {
@@ -24,7 +17,8 @@ export default class extends Component {
     const idPrefix2 = htmlIdGenerator()();
     const idPrefix3 = htmlIdGenerator()();
 
-    this.toggleButtons = [{
+    this.toggleButtons = [
+      {
         id: `${idPrefix}0`,
         label: 'Option one',
       },
@@ -38,7 +32,8 @@ export default class extends Component {
       },
     ];
 
-    this.toggleButtonsDisabled = [{
+    this.toggleButtonsDisabled = [
+      {
         id: `${idPrefix}3`,
         label: 'Option one',
       },
@@ -52,7 +47,8 @@ export default class extends Component {
       },
     ];
 
-    this.toggleButtonsMulti = [{
+    this.toggleButtonsMulti = [
+      {
         id: `${idPrefix2}0`,
         label: 'Option 1',
       },
@@ -66,7 +62,8 @@ export default class extends Component {
       },
     ];
 
-    this.toggleButtonsCompressed = [{
+    this.toggleButtonsCompressed = [
+      {
         id: `${idPrefix2}3`,
         label: 'fine',
       },
@@ -80,7 +77,8 @@ export default class extends Component {
       },
     ];
 
-    this.toggleButtonsIcons = [{
+    this.toggleButtonsIcons = [
+      {
         id: `${idPrefix3}0`,
         label: 'Align left',
         iconType: 'editorAlignLeft',
@@ -97,7 +95,8 @@ export default class extends Component {
       },
     ];
 
-    this.toggleButtonsIconsMulti = [{
+    this.toggleButtonsIconsMulti = [
+      {
         id: `${idPrefix3}3`,
         label: 'Bold',
         name: 'bold',
@@ -200,161 +199,104 @@ export default class extends Component {
   };
 
   render() {
-    return ( <
-      Fragment >
-      <
-      EuiButtonGroup legend = "This is a basic group"
-      options = {
-        this.toggleButtons
-      }
-      idSelected = {
-        this.state.toggleIdSelected
-      }
-      onChange = {
-        this.onChange
-      }
-      /> <
-      EuiSpacer size = "m" / >
-      <
-      EuiTitle size = "xxs" >
-      <
-      h3 > Primary & amp; multi select < /h3> < /
-      EuiTitle > <
-      EuiSpacer size = "s" / >
-      <
-      EuiButtonGroup legend = "This is a primary group"
-      name = "primary"
-      options = {
-        this.toggleButtonsMulti
-      }
-      idToSelectedMap = {
-        this.state.toggleIdToSelectedMap
-      }
-      onChange = {
-        this.onChangeMulti
-      }
-      color = "primary"
-      type = "multi" /
-      >
-      <
-      EuiSpacer size = "m" / >
-      <
-      EuiTitle size = "xxs" >
-      <
-      h3 > Disabled & amp; full width < /h3> < /
-      EuiTitle > <
-      EuiSpacer size = "s" / >
-      <
-      EuiButtonGroup legend = "This is a disabled group"
-      name = "disabledGroup"
-      options = {
-        this.toggleButtonsDisabled
-      }
-      idSelected = {
-        this.state.toggleIdDisabled
-      }
-      onChange = {
-        this.onChangeDisabled
-      }
-      buttonSize = "m"
-      isDisabled isFullWidth /
-      >
-      <
-      EuiSpacer size = "m" / >
-      <
-      EuiTitle size = "xxs" >
-      <
-      h3 > Icons only < /h3> < /
-      EuiTitle > <
-      EuiSpacer size = "s" / >
-      <
-      EuiButtonGroup legend = "Text align"
-      name = "textAlign"
-      options = {
-        this.toggleButtonsIcons
-      }
-      idSelected = {
-        this.state.toggleIconIdSelected
-      }
-      onChange = {
-        this.onChangeIcons
-      }
-      isIconOnly /
-      >
-      &
-      nbsp; & nbsp; <
-      EuiButtonGroup legend = "Text style"
-      options = {
-        this.toggleButtonsIconsMulti
-      }
-      idToSelectedMap = {
-        this.state.toggleIconIdToSelectedMap
-      }
-      onChange = {
-        this.onChangeIconsMulti
-      }
-      type = "multi"
-      isIconOnly /
-      >
-      <
-      EuiSpacer / >
-      <
-      EuiPanel style = {
-        {
-          maxWidth: 300
-        }
-      } >
-      <
-      EuiTitle size = "xxxs" >
-      <
-      h3 >
-      Compressed groups should always be fullWidth so they line up nicely in their small container. <
-      /h3> < /
-      EuiTitle > <
-      EuiSpacer size = "s" / >
-      <
-      EuiButtonGroup name = "coarsness"
-      legend = "This is a basic group"
-      options = {
-        this.toggleButtonsCompressed
-      }
-      idSelected = {
-        this.state.toggleCompressedIdSelected
-      }
-      onChange = {
-        this.onChangeCompressed
-      }
-      buttonSize = "compressed"
-      isFullWidth /
-      >
-      <
-      EuiSpacer / >
-      <
-      EuiTitle size = "xxxs" >
-      <
-      h3 > Unless they are icon only < /h3> < /
-      EuiTitle > <
-      EuiSpacer size = "s" / >
-      <
-      EuiButtonGroup name = "textStyleCompressed"
-      legend = "Text style"
-      className = "eui-displayInlineBlock"
-      options = {
-        this.toggleButtonsIconsMulti
-      }
-      idToSelectedMap = {
-        this.state.toggleIconIdToSelectedMapIcon
-      }
-      onChange = {
-        this.onChangeIconsMultiIcons
-      }
-      type = "multi"
-      buttonSize = "compressed"
-      isIconOnly /
-      >
-      <
-      /EuiPanel> < /
-      Fragment >
+    return (
+      <Fragment>
+        <EuiButtonGroup
+          legend="This is a basic group"
+          options={this.toggleButtons}
+          idSelected={this.state.toggleIdSelected}
+          onChange={this.onChange}
+        />
+        <EuiSpacer size="m" />
+        <EuiTitle size="xxs">
+          <h3> Primary & amp; multi select </h3>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+        <EuiButtonGroup
+          legend="This is a primary group"
+          name="primary"
+          options={this.toggleButtonsMulti}
+          idToSelectedMap={this.state.toggleIdToSelectedMap}
+          onChange={this.onChangeMulti}
+          color="primary"
+          type="multi"
+        />
+        <EuiSpacer size="m" />
+        <EuiTitle size="xxs">
+          <h3> Disabled & amp; full width </h3>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+        <EuiButtonGroup
+          legend="This is a disabled group"
+          name="disabledGroup"
+          options={this.toggleButtonsDisabled}
+          idSelected={this.state.toggleIdDisabled}
+          onChange={this.onChangeDisabled}
+          buttonSize="m"
+          isDisabled
+          isFullWidth
+        />
+        <EuiSpacer size="m" />
+        <EuiTitle size="xxs">
+          <h3> Icons only </h3>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+        <EuiButtonGroup
+          legend="Text align"
+          name="textAlign"
+          options={this.toggleButtonsIcons}
+          idSelected={this.state.toggleIconIdSelected}
+          onChange={this.onChangeIcons}
+          isIconOnly
+        />
+        &nbsp; &nbsp;
+        <EuiButtonGroup
+          legend="Text style"
+          options={this.toggleButtonsIconsMulti}
+          idToSelectedMap={this.state.toggleIconIdToSelectedMap}
+          onChange={this.onChangeIconsMulti}
+          type="multi"
+          isIconOnly
+        />
+        <EuiSpacer />
+        <EuiPanel
+          style={{
+            maxWidth: 300,
+          }}>
+          <EuiTitle size="xxxs">
+            <h3>
+              Compressed groups should always be fullWidth so they line up
+              nicely in their small container.{' '}
+            </h3>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiButtonGroup
+            name="coarsness"
+            legend="This is a basic group"
+            options={this.toggleButtonsCompressed}
+            idSelected={this.state.toggleCompressedIdSelected}
+            onChange={this.onChangeCompressed}
+            buttonSize="compressed"
+            isFullWidth
+          />
+          <EuiSpacer />
+          <EuiTitle size="xxxs">
+            <h3> Unless they are icon only </h3>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiButtonGroup
+            name="textStyleCompressed"
+            legend="Text style"
+            className="eui-displayInlineBlock"
+            options={this.toggleButtonsIconsMulti}
+            idToSelectedMap={this.state.toggleIconIdToSelectedMapIcon}
+            onChange={this.onChangeIconsMultiIcons}
+            type="multi"
+            buttonSize="compressed"
+            isIconOnly
+          />
+        </EuiPanel>
+      </Fragment>
     );
   }
 }

From 58249a80380ca1fef518e2845c963c824227acb5 Mon Sep 17 00:00:00 2001
From: Dhruvil Shah <dhruvil.s@somaiya.edu>
Date: Fri, 20 Mar 2020 13:34:28 +0530
Subject: [PATCH 04/10] Update CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d059ac22ed0..261def592a6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - Added `Enter` key press functionality to `EuiSuperDatePicker` ([#3048](https://github.com/elastic/eui/pull/3048))
 - Added `title` to headers of `EuiTable` in case of truncation ([#3094](https://github.com/elastic/eui/pull/3094))
 - Added i18n to `EuiTableHeaderCell` ([#3094](https://github.com/elastic/eui/pull/3094))
+- Updated makeId to DEPRECATED, shifted all the calls to htmlIdGenerator
 
 **Bug Fixes**
 

From 2e34237e7fc72bca41f3ea87f19a892942f16f00 Mon Sep 17 00:00:00 2001
From: NightWing1998 <dhruvil.s@somaiya.edu>
Date: Fri, 20 Mar 2020 18:24:57 +0530
Subject: [PATCH 05/10] updating deprecated warning

---
 src/components/form/form_row/make_id.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/form/form_row/make_id.ts b/src/components/form/form_row/make_id.ts
index 71db07f5f4c..870f7ff549b 100644
--- a/src/components/form/form_row/make_id.ts
+++ b/src/components/form/form_row/make_id.ts
@@ -2,7 +2,7 @@
 // inputs with their labels and other descriptive text elements.
 function makeId(): string {
   console.log(
-    'WARNING: makeId is deprecated. Use htmlIdGenerator from services instead.'
+    'WARNING: makeId is deprecated. Use htmlIdGenerator from @elastic/eui instead.'
   );
   return Math.random()
     .toString(36)

From 221fddf24de559342be399727742a1bdef8b6bba Mon Sep 17 00:00:00 2001
From: NightWing1998 <dhruvil.s@somaiya.edu>
Date: Thu, 26 Mar 2020 11:41:56 +0530
Subject: [PATCH 06/10] removing comments

---
 src-docs/src/views/button/button_group.js              | 4 ++--
 src/components/card/card.test.tsx                      | 1 -
 src/components/form/super_select/super_select.test.tsx | 5 -----
 3 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/src-docs/src/views/button/button_group.js b/src-docs/src/views/button/button_group.js
index aec021e8fd0..5d259758a21 100644
--- a/src-docs/src/views/button/button_group.js
+++ b/src-docs/src/views/button/button_group.js
@@ -209,7 +209,7 @@ export default class extends Component {
         />
         <EuiSpacer size="m" />
         <EuiTitle size="xxs">
-          <h3> Primary & amp; multi select </h3>
+          <h3>Primary &amp; multi select</h3>
         </EuiTitle>
         <EuiSpacer size="s" />
         <EuiButtonGroup
@@ -223,7 +223,7 @@ export default class extends Component {
         />
         <EuiSpacer size="m" />
         <EuiTitle size="xxs">
-          <h3> Disabled & amp; full width </h3>
+          <h3>Disabled &amp; full width</h3>
         </EuiTitle>
         <EuiSpacer size="s" />
         <EuiButtonGroup
diff --git a/src/components/card/card.test.tsx b/src/components/card/card.test.tsx
index 9f4de1d9d60..574aed510ba 100644
--- a/src/components/card/card.test.tsx
+++ b/src/components/card/card.test.tsx
@@ -6,7 +6,6 @@ import { EuiCard } from './card';
 
 import { EuiIcon } from '../icon';
 
-// jest.mock('./../form/form_row/make_id', () => () => 'generated-id');
 jest.mock('./../../services/accessibility', () => ({
   htmlIdGenerator: () => () => 'generated-id',
 }));
diff --git a/src/components/form/super_select/super_select.test.tsx b/src/components/form/super_select/super_select.test.tsx
index 3114439a3fd..7eafbbfe1d1 100644
--- a/src/components/form/super_select/super_select.test.tsx
+++ b/src/components/form/super_select/super_select.test.tsx
@@ -12,11 +12,6 @@ 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', describedby: 'generated-id' },
   { value: '2', inputDisplay: 'Option #2', describedby: 'generated-id' },

From 3729331a3866f8d55f524cd5ee0eab692bd039ab Mon Sep 17 00:00:00 2001
From: NightWing1998 <dhruvil.s@somaiya.edu>
Date: Fri, 27 Mar 2020 17:36:05 +0530
Subject: [PATCH 07/10] removing describedBy attributes

---
 .../super_select/__snapshots__/super_select.test.tsx.snap     | 2 --
 src/components/form/super_select/super_select.test.tsx        | 4 ++--
 2 files changed, 2 insertions(+), 4 deletions(-)

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 5c600165aad..cfc5bc26c57 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
@@ -1160,7 +1160,6 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
             <button
               aria-selected="false"
               class="euiContextMenuItem euiSuperSelect__item"
-              describedby="generated-id"
               id="1"
               role="option"
               type="button"
@@ -1182,7 +1181,6 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
             <button
               aria-selected="false"
               class="euiContextMenuItem euiSuperSelect__item"
-              describedby="generated-id"
               id="2"
               role="option"
               type="button"
diff --git a/src/components/form/super_select/super_select.test.tsx b/src/components/form/super_select/super_select.test.tsx
index 7eafbbfe1d1..f5b07b49747 100644
--- a/src/components/form/super_select/super_select.test.tsx
+++ b/src/components/form/super_select/super_select.test.tsx
@@ -13,8 +13,8 @@ jest.mock('../../portal', () => ({
 }));
 
 const options = [
-  { value: '1', inputDisplay: 'Option #1', describedby: 'generated-id' },
-  { value: '2', inputDisplay: 'Option #2', describedby: 'generated-id' },
+  { value: '1', inputDisplay: 'Option #1' },
+  { value: '2', inputDisplay: 'Option #2' },
 ];
 
 describe('EuiSuperSelect', () => {

From 0ad49628fef19a8c96b0bf17d3277d4710f1dab4 Mon Sep 17 00:00:00 2001
From: NightWing1998 <dhruvil.s@somaiya.edu>
Date: Thu, 2 Apr 2020 02:05:59 +0530
Subject: [PATCH 08/10] removing white spaces

---
 src-docs/src/views/button/button_group.js | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src-docs/src/views/button/button_group.js b/src-docs/src/views/button/button_group.js
index 5d259758a21..b7025a92d83 100644
--- a/src-docs/src/views/button/button_group.js
+++ b/src-docs/src/views/button/button_group.js
@@ -238,7 +238,7 @@ export default class extends Component {
         />
         <EuiSpacer size="m" />
         <EuiTitle size="xxs">
-          <h3> Icons only </h3>
+          <h3>Icons only</h3>
         </EuiTitle>
         <EuiSpacer size="s" />
         <EuiButtonGroup
@@ -249,7 +249,7 @@ export default class extends Component {
           onChange={this.onChangeIcons}
           isIconOnly
         />
-        &nbsp; &nbsp;
+        &nbsp;&nbsp;
         <EuiButtonGroup
           legend="Text style"
           options={this.toggleButtonsIconsMulti}
@@ -259,14 +259,11 @@ export default class extends Component {
           isIconOnly
         />
         <EuiSpacer />
-        <EuiPanel
-          style={{
-            maxWidth: 300,
-          }}>
+        <EuiPanel style={{ maxWidth: 300 }}>
           <EuiTitle size="xxxs">
             <h3>
               Compressed groups should always be fullWidth so they line up
-              nicely in their small container.{' '}
+              nicely in their small container.
             </h3>
           </EuiTitle>
           <EuiSpacer size="s" />
@@ -281,7 +278,7 @@ export default class extends Component {
           />
           <EuiSpacer />
           <EuiTitle size="xxxs">
-            <h3> Unless they are icon only </h3>
+            <h3>Unless they are icon only</h3>
           </EuiTitle>
           <EuiSpacer size="s" />
           <EuiButtonGroup

From 9557b03b0662bc3f4f2bf6eb4e0e4dcb9aea9f61 Mon Sep 17 00:00:00 2001
From: NightWing1998 <dhruvil.s@somaiya.edu>
Date: Fri, 3 Apr 2020 00:41:26 +0530
Subject: [PATCH 09/10] real merge conflict solved

---
 package.json                              |  1 +
 src-docs/src/views/card/card_checkable.js | 26 +++++++++++------------
 yarn.lock                                 |  5 +++++
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 7bcae5b1584..030e53802fe 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "classnames": "^2.2.5",
     "highlight.js": "^9.12.0",
     "html": "^1.0.0",
+    "install": "^0.13.0",
     "keymirror": "^0.1.1",
     "lodash": "^4.17.11",
     "numeral": "^2.0.6",
diff --git a/src-docs/src/views/card/card_checkable.js b/src-docs/src/views/card/card_checkable.js
index a8c3f87b327..1e8937fe871 100644
--- a/src-docs/src/views/card/card_checkable.js
+++ b/src-docs/src/views/card/card_checkable.js
@@ -17,20 +17,20 @@ export default () => {
   const [checkbox, setCheckbox] = useState(false);
 
   const nestedRadios = [
-      {
-        id: 'nestedRadio1',
-        label: 'Nested option one',
-      },
-      {
-        id: 'nestedRadio2',
-        label: 'Nested option two',
-      },
-      {
-        id: 'nestedRadio3',
-        label: 'Nested option three',
-      },
+    {
+      id: 'nestedRadio1',
+      label: 'Nested option one',
+    },
+    {
+      id: 'nestedRadio2',
+      label: 'Nested option two',
+    },
+    {
+      id: 'nestedRadio3',
+      label: 'Nested option three',
+    },
   ];
-  
+
   return (
     <Fragment>
       <EuiFormFieldset
diff --git a/yarn.lock b/yarn.lock
index e6b526ea69c..a080bf0d89e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7456,6 +7456,11 @@ insight@^0.8.4:
     tough-cookie "^2.0.0"
     uuid "^3.0.0"
 
+install@^0.13.0:
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/install/-/install-0.13.0.tgz#6af6e9da9dd0987de2ab420f78e60d9c17260776"
+  integrity sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA==
+
 internal-ip@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-3.0.1.tgz#df5c99876e1d2eb2ea2d74f520e3f669a00ece27"

From be112dd91e7e05763dc30a7dfb90a9505edccdbc Mon Sep 17 00:00:00 2001
From: NightWing1998 <dhruvil.s@somaiya.edu>
Date: Fri, 3 Apr 2020 19:51:20 +0530
Subject: [PATCH 10/10] removing invalid package

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index 030e53802fe..7bcae5b1584 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,6 @@
     "classnames": "^2.2.5",
     "highlight.js": "^9.12.0",
     "html": "^1.0.0",
-    "install": "^0.13.0",
     "keymirror": "^0.1.1",
     "lodash": "^4.17.11",
     "numeral": "^2.0.6",