Upgrade EUI to v14.9.0 (#49678) (#50526)

* eui to 14.9.0 * euiswitch updtates * misc snapshot * x-pack functional fixes * more euiswitch functional test fixes * label-less switches for spaces management * more euiswitch fixes * telemetry form a11y * snapshot update * label updates * more switch updates * lint
2019-11-14 09:04:02 -06:00 · 2019-11-14 09:04:02 -06:00 · 2a7a122dab
parent c683e07df5
commit 2a7a122dab
61 changed files with 541 additions and 428 deletions
--- a/package.json
+++ b/package.json
@ -107,7 +107,7 @@
    "@elastic/charts": "^14.0.0",
    "@elastic/datemath": "5.0.2",
    "@elastic/ems-client": "1.0.5",
-    "@elastic/eui": "14.8.0",
+    "@elastic/eui": "14.9.0",
    "@elastic/filesaver": "1.1.2",
    "@elastic/good": "8.1.1-kibana2",
    "@elastic/numeral": "2.3.3",
--- a/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/index.tsx
+++ b/src/legacy/core_plugins/data/public/filter/filter_bar/filter_editor/index.tsx
@ -30,6 +30,7 @@ import {
  EuiPopoverTitle,
  EuiSpacer,
  EuiSwitch,
+  EuiSwitchEvent,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
@ -433,7 +434,7 @@ class FilterEditorUI extends Component<Props, State> {
    this.setState({ selectedOperator, params });
  };

-  private onCustomLabelSwitchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  private onCustomLabelSwitchChange = (event: EuiSwitchEvent) => {
    const useCustomLabel = event.target.checked;
    const customLabel = event.target.checked ? '' : null;
    this.setState({ useCustomLabel, customLabel });
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.test.js
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.test.js
@ -236,7 +236,7 @@ test('handleCheckboxOptionChange - multiselect', async () => {
  component.update();

  const checkbox = findTestSubject(component, 'listControlMultiselectInput');
-  checkbox.simulate('change', { target: { checked: true } });
+  checkbox.simulate('click');
  sinon.assert.notCalled(handleFieldNameChange);
  sinon.assert.notCalled(handleIndexPatternChange);
  sinon.assert.notCalled(handleNumberOptionChange);
@ -247,7 +247,9 @@ test('handleCheckboxOptionChange - multiselect', async () => {
    expectedControlIndex,
    expectedOptionName,
    sinon.match((evt) => {
-      if (evt.target.checked === true) {
+      // Synthetic `evt.target.checked` does not get altered by EuiSwitch,
+      // but its aria attribute is correctly updated
+      if (evt.target.getAttribute('aria-checked') === 'true') {
        return true;
      }
      return false;
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/options_tab.test.js
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/options_tab.test.js
@ -47,8 +47,8 @@ describe('OptionsTab', () => {

  it('should update updateFiltersOnChange', () => {
    const component = mountWithIntl(<OptionsTab {...props} />);
-    const checkbox = component.find('[data-test-subj="inputControlEditorUpdateFiltersOnChangeCheckbox"] input[type="checkbox"]');
-    checkbox.simulate('change', { target: { checked: true } });
+    const checkbox = component.find('[data-test-subj="inputControlEditorUpdateFiltersOnChangeCheckbox"] button');
+    checkbox.simulate('click');

    expect(props.setValue).toHaveBeenCalledTimes(1);
    expect(props.setValue).toHaveBeenCalledWith('updateFiltersOnChange', true);
@ -56,8 +56,8 @@ describe('OptionsTab', () => {

  it('should update useTimeFilter', () => {
    const component = mountWithIntl(<OptionsTab {...props} />);
-    const checkbox = component.find('[data-test-subj="inputControlEditorUseTimeFilterCheckbox"] input[type="checkbox"]');
-    checkbox.simulate('change', { target: { checked: true } });
+    const checkbox = component.find('[data-test-subj="inputControlEditorUseTimeFilterCheckbox"] button');
+    checkbox.simulate('click');

    expect(props.setValue).toHaveBeenCalledTimes(1);
    expect(props.setValue).toHaveBeenCalledWith('useTimeFilter', true);
@ -65,8 +65,8 @@ describe('OptionsTab', () => {

  it('should update pinFilters', () => {
    const component = mountWithIntl(<OptionsTab {...props} />);
-    const checkbox = component.find('[data-test-subj="inputControlEditorPinFiltersCheckbox"] input[type="checkbox"]');
-    checkbox.simulate('change', { target: { checked: true } });
+    const checkbox = component.find('[data-test-subj="inputControlEditorPinFiltersCheckbox"] button');
+    checkbox.simulate('click');

    expect(props.setValue).toHaveBeenCalledTimes(1);
    expect(props.setValue).toHaveBeenCalledWith('pinFilters', true);
--- a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.test.tsx
+++ b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.test.tsx
@ -121,7 +121,7 @@ describe('DiscoverFieldSearch', () => {
      // @ts-ignore
      (aggregtableButtonGroup.props() as EuiButtonGroupProps).onChange('aggregatable-true', null);
    });
-    missingSwitch.simulate('change', { target: { value: false } });
+    missingSwitch.simulate('click');
    expect(onChange).toBeCalledTimes(2);
  });

--- a/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.tsx
+++ b/src/legacy/core_plugins/kibana/public/discover/components/field_chooser/discover_field_search.tsx
@ -29,6 +29,7 @@ import {
  EuiPopoverTitle,
  EuiSelect,
  EuiSwitch,
+  EuiSwitchEvent,
  EuiForm,
  EuiFormRow,
  EuiButtonGroup,
@ -154,7 +155,7 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) {
    setActiveFiltersCount(activeFiltersCount + diff);
  };

-  const handleMissingChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleMissingChange = (e: EuiSwitchEvent) => {
    const missingValue = e.target.checked;
    handleValueChange('missing', missingValue);
  };
--- a/src/legacy/core_plugins/telemetry/public/components/snapshots/telemetry_form.test.js.snap
+++ b/src/legacy/core_plugins/telemetry/public/components/snapshots/telemetry_form.test.js.snap
@ -34,6 +34,7 @@ exports[`TelemetryForm renders as expected when allows to change optIn status 1`
        save={[Function]}
        setting={
          Object {
+            "ariaName": "Provide usage statistics",
            "defVal": false,
            "description": <React.Fragment>
              <p>
--- a/src/legacy/core_plugins/telemetry/public/components/telemetry_form.js
+++ b/src/legacy/core_plugins/telemetry/public/components/telemetry_form.js
@ -33,6 +33,7 @@ import { getConfigTelemetryDesc, PRIVACY_STATEMENT_URL } from '../../common/cons
 import { OptInExampleFlyout } from './opt_in_details_component';
 import { Field } from 'ui/management';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';

 const SEARCH_TERMS = ['telemetry', 'usage', 'data', 'usage data'];

@ -117,6 +118,7 @@ export class TelemetryForm extends Component {
                value: telemetryOptInProvider.getOptIn() || false,
                description: this.renderDescription(),
                defVal: false,
+                ariaName: i18n.translate('telemetry.provideUsageStatisticsLabel', { defaultMessage: 'Provide usage statistics' })
              }}
              save={this.toggleOptIn}
              clear={this.toggleOptIn}
--- a/src/legacy/ui/public/vis/editors/default/controls/auto_precision.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/auto_precision.tsx
@ -23,7 +23,7 @@ import { EuiSwitch, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { AggParamEditorProps } from '..';

-function AutoPrecisionParamEditor({ value, setValue }: AggParamEditorProps<boolean>) {
+function AutoPrecisionParamEditor({ value = false, setValue }: AggParamEditorProps<boolean>) {
  const label = i18n.translate('common.ui.aggTypes.changePrecisionLabel', {
    defaultMessage: 'Change precision on map zoom',
  });
--- a/src/legacy/ui/public/vis/editors/default/controls/switch.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/switch.tsx
@ -30,7 +30,7 @@ interface SwitchParamEditorProps extends AggParamEditorProps<boolean> {
 }

 function SwitchParamEditor({
-  value,
+  value = false,
  setValue,
  dataTestSubj,
  displayToolTip,
--- a/src/legacy/ui/public/vis/editors/default/controls/use_geocentroid.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/use_geocentroid.tsx
@ -23,7 +23,7 @@ import { EuiSwitch, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { AggParamEditorProps } from '..';

-function UseGeocentroidParamEditor({ value, setValue }: AggParamEditorProps<boolean>) {
+function UseGeocentroidParamEditor({ value = false, setValue }: AggParamEditorProps<boolean>) {
  const label = i18n.translate('common.ui.aggTypes.placeMarkersOffGridLabel', {
    defaultMessage: 'Place markers off grid (use geocentroid)',
  });
--- a/src/plugins/embeddable/public/tests/customize_panel_modal.test.tsx
+++ b/src/plugins/embeddable/public/tests/customize_panel_modal.test.tsx
@ -173,7 +173,7 @@ test('Can set title to an empty string', async () => {
  );

  const inputField = findTestSubject(component, 'customizePanelHideTitle');
-  inputField.simulate('change');
+  inputField.simulate('click');

  findTestSubject(component, 'saveNewTitleButton').simulate('click');
  expect(inputField.props().value).toBeUndefined();
--- a/src/plugins/es_ui_shared/static/forms/components/fields/toggle_field.tsx
+++ b/src/plugins/es_ui_shared/static/forms/components/fields/toggle_field.tsx
@ -18,7 +18,7 @@
 */

 import React from 'react';
-import { EuiFormRow, EuiSwitch } from '@elastic/eui';
+import { EuiFormRow, EuiSwitch, EuiSwitchEvent } from '@elastic/eui';

 import { FieldHook } from '../../hook_form_lib';
 import { getFieldValidityAndErrorMessage } from '../helpers';
@ -33,6 +33,14 @@ interface Props {
 export const ToggleField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
  const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);

+  // Shim for sufficient overlap between EuiSwitchEvent and FieldHook[onChange] event
+  const onChange = (e: EuiSwitchEvent) => {
+    const event = ({ ...e, value: `${e.target.checked}` } as unknown) as React.ChangeEvent<{
+      value: string;
+    }>;
+    field.onChange(event);
+  };
+
  return (
    <EuiFormRow
      helpText={field.helpText}
@ -45,7 +53,7 @@ export const ToggleField = ({ field, euiFieldProps = {}, ...rest }: Props) => {
      <EuiSwitch
        label={field.label}
        checked={field.value as boolean}
-        onChange={field.onChange}
+        onChange={onChange}
        data-test-subj="input"
        {...euiFieldProps}
      />
--- a/src/plugins/kibana_react/public/saved_objects/saved_object_save_modal.tsx
+++ b/src/plugins/kibana_react/public/saved_objects/saved_object_save_modal.tsx
@ -32,6 +32,7 @@ import {
  EuiOverlayMask,
  EuiSpacer,
  EuiSwitch,
+  EuiSwitchEvent,
  EuiTextArea,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
@ -227,7 +228,7 @@ export class SavedObjectSaveModal extends React.Component<Props, State> {
    });
  };

-  private onCopyOnSaveChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  private onCopyOnSaveChange = (event: EuiSwitchEvent) => {
    this.setState({
      copyOnSave: event.target.checked,
    });
--- a/test/functional/apps/visualize/input_control_vis/input_control_options.js
+++ b/test/functional/apps/visualize/input_control_vis/input_control_options.js
@ -133,13 +133,13 @@ export default function ({ getService, getPageObjects }) {
    describe('updateFiltersOnChange is true', () => {
      before(async () => {
        await PageObjects.visualize.clickVisEditorTab('options');
-        await PageObjects.visualize.checkCheckbox('inputControlEditorUpdateFiltersOnChangeCheckbox');
+        await PageObjects.visualize.checkSwitch('inputControlEditorUpdateFiltersOnChangeCheckbox');
        await PageObjects.visualize.clickGo();
      });

      after(async () => {
        await PageObjects.visualize.clickVisEditorTab('options');
-        await PageObjects.visualize.uncheckCheckbox('inputControlEditorUpdateFiltersOnChangeCheckbox');
+        await PageObjects.visualize.uncheckSwitch('inputControlEditorUpdateFiltersOnChangeCheckbox');
        await PageObjects.visualize.clickGo();
      });

--- a/test/functional/page_objects/dashboard_page.js
+++ b/test/functional/page_objects/dashboard_page.js
@ -347,7 +347,7 @@ export function DashboardPageProvider({ getService, getPageObjects }) {

    async clickSave() {
      log.debug('DashboardPage.clickSave');
-      await testSubjects.clickWhenNotDisabled('confirmSaveSavedObjectButton');
+      await testSubjects.click('confirmSaveSavedObjectButton');
    }

    async pressEnterKey() {
@ -543,9 +543,10 @@ export function DashboardPageProvider({ getService, getPageObjects }) {
    async setSaveAsNewCheckBox(checked) {
      log.debug('saveAsNewCheckbox: ' + checked);
      const saveAsNewCheckbox = await testSubjects.find('saveAsNewCheckbox');
-      const isAlreadyChecked = (await saveAsNewCheckbox.getAttribute('checked') === 'true');
+      const isAlreadyChecked = (await saveAsNewCheckbox.getAttribute('aria-checked') === 'true');
      if (isAlreadyChecked !== checked) {
        log.debug('Flipping save as new checkbox');
+        const saveAsNewCheckbox = await testSubjects.find('saveAsNewCheckbox');
        await retry.try(() => saveAsNewCheckbox.click());
      }
    }
@ -553,9 +554,10 @@ export function DashboardPageProvider({ getService, getPageObjects }) {
    async setStoreTimeWithDashboard(checked) {
      log.debug('Storing time with dashboard: ' + checked);
      const storeTimeCheckbox = await testSubjects.find('storeTimeWithDashboard');
-      const isAlreadyChecked = (await storeTimeCheckbox.getAttribute('checked') === 'true');
+      const isAlreadyChecked = (await storeTimeCheckbox.getAttribute('aria-checked') === 'true');
      if (isAlreadyChecked !== checked) {
        log.debug('Flipping store time checkbox');
+        const storeTimeCheckbox = await testSubjects.find('storeTimeWithDashboard');
        await retry.try(() => storeTimeCheckbox.click());
      }
    }
--- a/test/functional/page_objects/visualize_page.js
+++ b/test/functional/page_objects/visualize_page.js
@ -372,6 +372,28 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli
      }
    }

+    async isSwitchChecked(selector) {
+      const checkbox = await testSubjects.find(selector);
+      const isChecked = await checkbox.getAttribute('aria-checked');
+      return isChecked === 'true';
+    }
+
+    async checkSwitch(selector) {
+      const isChecked = await this.isSwitchChecked(selector);
+      if (!isChecked) {
+        log.debug(`checking switch ${selector}`);
+        await testSubjects.click(selector);
+      }
+    }
+
+    async uncheckSwitch(selector) {
+      const isChecked = await this.isSwitchChecked(selector);
+      if (isChecked) {
+        log.debug(`unchecking switch ${selector}`);
+        await testSubjects.click(selector);
+      }
+    }
+
    async setSelectByOptionText(selectId, optionText) {
      const selectField = await find.byCssSelector(`#${selectId}`);
      const options = await find.allByCssSelector(`#${selectId} > option`);
@ -1009,7 +1031,7 @@ export function VisualizePageProvider({ getService, getPageObjects, updateBaseli

    async setIsFilteredByCollarCheckbox(value = true) {
      await retry.try(async () => {
-        const isChecked = await this.isChecked('isFilteredByCollarCheckbox');
+        const isChecked = await this.isSwitchChecked('isFilteredByCollarCheckbox');
        if (isChecked !== value) {
          await testSubjects.click('isFilteredByCollarCheckbox');
          throw new Error('isFilteredByCollar not set correctly');
--- a/test/functional/services/saved_query_management_component.ts
+++ b/test/functional/services/saved_query_management_component.ts
@ -118,15 +118,17 @@ export function SavedQueryManagementComponentProvider({ getService }: FtrProvide
      await testSubjects.setValue('saveQueryFormDescription', description);

      const currentIncludeFiltersValue =
-        (await testSubjects.getAttribute('saveQueryFormIncludeFiltersOption', 'checked')) ===
+        (await testSubjects.getAttribute('saveQueryFormIncludeFiltersOption', 'aria-checked')) ===
        'true';
      if (currentIncludeFiltersValue !== includeFilters) {
        await testSubjects.click('saveQueryFormIncludeFiltersOption');
      }

      const currentIncludeTimeFilterValue =
-        (await testSubjects.getAttribute('saveQueryFormIncludeTimeFilterOption', 'checked')) ===
-        'true';
+        (await testSubjects.getAttribute(
+          'saveQueryFormIncludeTimeFilterOption',
+          'aria-checked'
+        )) === 'true';
      if (currentIncludeTimeFilterValue !== includeTimeFilter) {
        await testSubjects.click('saveQueryFormIncludeTimeFilterOption');
      }
--- a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
+++ b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
@ -7,7 +7,7 @@
  },
  "license": "Apache-2.0",
  "dependencies": {
-    "@elastic/eui": "14.8.0",
+    "@elastic/eui": "14.9.0",
    "react": "^16.8.0",
    "react-dom": "^16.8.0"
  }
--- a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
@ -7,7 +7,7 @@
  },
  "license": "Apache-2.0",
  "dependencies": {
-    "@elastic/eui": "14.8.0",
+    "@elastic/eui": "14.9.0",
    "react": "^16.8.0"
  }
 }
--- a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
@ -8,7 +8,7 @@
  },
  "license": "Apache-2.0",
  "dependencies": {
-    "@elastic/eui": "14.8.0",
+    "@elastic/eui": "14.9.0",
    "react": "^16.8.0"
  },
  "scripts": {
--- a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
@ -8,7 +8,7 @@
  },
  "license": "Apache-2.0",
  "dependencies": {
-    "@elastic/eui": "14.8.0",
+    "@elastic/eui": "14.9.0",
    "react": "^16.8.0"
  },
  "scripts": {
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/examples/snapshots/simple_template.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/examples/snapshots/simple_template.examples.storyshot
@ -13,23 +13,26 @@ exports[`Storyshots arguments/AxisConfig simple 1`] = `
  <div
    className="euiSwitch euiSwitch--compressed"
  >
-    <input
-      checked={false}
-      className="euiSwitch__input"
+    <button
+      aria-checked={false}
+      aria-label=""
+      className="euiSwitch__button"
      id="generated-id"
-      onChange={[Function]}
-      type="checkbox"
-    />
-    <span
-      className="euiSwitch__body"
+      onClick={[Function]}
+      role="switch"
+      type="button"
    >
      <span
-        className="euiSwitch__thumb"
-      />
-      <span
-        className="euiSwitch__track"
-      />
-    </span>
+        className="euiSwitch__body"
+      >
+        <span
+          className="euiSwitch__thumb"
+        />
+        <span
+          className="euiSwitch__track"
+        />
+      </span>
+    </button>
  </div>
 </div>
 `;
@ -47,23 +50,26 @@ exports[`Storyshots arguments/AxisConfig/components simple template 1`] = `
  <div
    className="euiSwitch euiSwitch--compressed"
  >
-    <input
-      checked={false}
-      className="euiSwitch__input"
+    <button
+      aria-checked={false}
+      aria-label=""
+      className="euiSwitch__button"
      id="generated-id"
-      onChange={[Function]}
-      type="checkbox"
-    />
-    <span
-      className="euiSwitch__body"
+      onClick={[Function]}
+      role="switch"
+      type="button"
    >
      <span
-        className="euiSwitch__thumb"
-      />
-      <span
-        className="euiSwitch__track"
-      />
-    </span>
+        className="euiSwitch__body"
+      >
+        <span
+          className="euiSwitch__thumb"
+        />
+        <span
+          className="euiSwitch__track"
+        />
+      </span>
+    </button>
  </div>
 </div>
 `;
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/simple_template.tsx
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/simple_template.tsx
@ -19,6 +19,8 @@ export const SimpleTemplate: FunctionComponent<Props> = ({ onValueChange, argVal
      compressed
      checked={Boolean(argValue)}
      onChange={() => onValueChange(!Boolean(argValue))}
+      showLabel={false}
+      label=""
    />
  );
 };
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/tests/app.test.tsx
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/tests/app.test.tsx
@ -111,7 +111,7 @@ describe('<App />', () => {
    wrapper.update();
    expect(footer(wrapper).prop('isHidden')).toEqual(false);
    expect(footer(wrapper).prop('isAutohide')).toEqual(false);
-    toolbarCheck(wrapper).simulate('change');
+    toolbarCheck(wrapper).simulate('click');
    expect(footer(wrapper).prop('isAutohide')).toEqual(true);
    canvas(wrapper).simulate('mouseEnter');
    expect(footer(wrapper).prop('isHidden')).toEqual(false);
@ -132,7 +132,7 @@ describe('<App />', () => {
      .simulate('click');
    await tick(20);
    wrapper.update();
-    toolbarCheck(wrapper).simulate('change');
+    toolbarCheck(wrapper).simulate('click');
    await tick(20);

    // Simulate the mouse leaving the container
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/examples/snapshots/autoplay_settings.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/examples/snapshots/autoplay_settings.examples.storyshot
@ -25,49 +25,52 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: off,
    <div
      className="euiSwitch"
    >
-      <input
-        checked={false}
-        className="euiSwitch__input"
+      <button
+        aria-checked={false}
+        aria-describedby="generated-id"
+        className="euiSwitch__button"
        id="cycle"
-        name="cycle"
-        onChange={[Function]}
-        type="checkbox"
-      />
-      <span
-        className="euiSwitch__body"
+        onClick={[Function]}
+        role="switch"
+        type="button"
      >
        <span
-          className="euiSwitch__thumb"
-        />
-        <span
-          className="euiSwitch__track"
+          className="euiSwitch__body"
        >
-          <svg
-            className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
-            focusable="false"
-            height={16}
-            style={null}
-            viewBox="0 0 16 16"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
-          />
-          <svg
-            className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
-            focusable="false"
-            height={16}
-            style={null}
-            viewBox="0 0 16 16"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            className="euiSwitch__thumb"
          />
+          <span
+            className="euiSwitch__track"
+          >
+            <svg
+              className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+              focusable="false"
+              height={16}
+              style={null}
+              viewBox="0 0 16 16"
+              width={16}
+              xmlns="http://www.w3.org/2000/svg"
+            />
+            <svg
+              className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
+              focusable="false"
+              height={16}
+              style={null}
+              viewBox="0 0 16 16"
+              width={16}
+              xmlns="http://www.w3.org/2000/svg"
+            />
+          </span>
        </span>
-      </span>
-      <label
+      </button>
+      <p
        className="euiSwitch__label"
-        htmlFor="cycle"
+        id="generated-id"
+        onClick={[Function]}
      >
        Cycle Slides
-      </label>
+      </p>
    </div>
    <hr
      className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
@ -190,49 +193,52 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: on, 5
    <div
      className="euiSwitch"
    >
-      <input
-        checked={true}
-        className="euiSwitch__input"
+      <button
+        aria-checked={true}
+        aria-describedby="generated-id"
+        className="euiSwitch__button"
        id="cycle"
-        name="cycle"
-        onChange={[Function]}
-        type="checkbox"
-      />
-      <span
-        className="euiSwitch__body"
+        onClick={[Function]}
+        role="switch"
+        type="button"
      >
        <span
-          className="euiSwitch__thumb"
-        />
-        <span
-          className="euiSwitch__track"
+          className="euiSwitch__body"
        >
-          <svg
-            className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
-            focusable="false"
-            height={16}
-            style={null}
-            viewBox="0 0 16 16"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
-          />
-          <svg
-            className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
-            focusable="false"
-            height={16}
-            style={null}
-            viewBox="0 0 16 16"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            className="euiSwitch__thumb"
          />
+          <span
+            className="euiSwitch__track"
+          >
+            <svg
+              className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+              focusable="false"
+              height={16}
+              style={null}
+              viewBox="0 0 16 16"
+              width={16}
+              xmlns="http://www.w3.org/2000/svg"
+            />
+            <svg
+              className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
+              focusable="false"
+              height={16}
+              style={null}
+              viewBox="0 0 16 16"
+              width={16}
+              xmlns="http://www.w3.org/2000/svg"
+            />
+          </span>
        </span>
-      </span>
-      <label
+      </button>
+      <p
        className="euiSwitch__label"
-        htmlFor="cycle"
+        id="generated-id"
+        onClick={[Function]}
      >
        Cycle Slides
-      </label>
+      </p>
    </div>
    <hr
      className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
@ -355,49 +361,52 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings contextual 1`] =
    <div
      className="euiSwitch"
    >
-      <input
-        checked={false}
-        className="euiSwitch__input"
+      <button
+        aria-checked={false}
+        aria-describedby="generated-id"
+        className="euiSwitch__button"
        id="cycle"
-        name="cycle"
-        onChange={[Function]}
-        type="checkbox"
-      />
-      <span
-        className="euiSwitch__body"
+        onClick={[Function]}
+        role="switch"
+        type="button"
      >
        <span
-          className="euiSwitch__thumb"
-        />
-        <span
-          className="euiSwitch__track"
+          className="euiSwitch__body"
        >
-          <svg
-            className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
-            focusable="false"
-            height={16}
-            style={null}
-            viewBox="0 0 16 16"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
-          />
-          <svg
-            className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
-            focusable="false"
-            height={16}
-            style={null}
-            viewBox="0 0 16 16"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            className="euiSwitch__thumb"
          />
+          <span
+            className="euiSwitch__track"
+          >
+            <svg
+              className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+              focusable="false"
+              height={16}
+              style={null}
+              viewBox="0 0 16 16"
+              width={16}
+              xmlns="http://www.w3.org/2000/svg"
+            />
+            <svg
+              className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
+              focusable="false"
+              height={16}
+              style={null}
+              viewBox="0 0 16 16"
+              width={16}
+              xmlns="http://www.w3.org/2000/svg"
+            />
+          </span>
        </span>
-      </span>
-      <label
+      </button>
+      <p
        className="euiSwitch__label"
-        htmlFor="cycle"
+        id="generated-id"
+        onClick={[Function]}
      >
        Cycle Slides
-      </label>
+      </p>
    </div>
    <hr
      className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/examples/snapshots/toolbar_settings.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/examples/snapshots/toolbar_settings.examples.storyshot
@ -31,53 +31,55 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings component: off 1`
        <div
          className="euiSwitch"
        >
-          <input
+          <button
+            aria-checked={false}
            aria-describedby="generated-id-help"
-            checked={false}
-            className="euiSwitch__input"
+            className="euiSwitch__button"
            data-test-subj="hideToolbarSwitch"
            id="generated-id"
-            name="toolbarHide"
            onBlur={[Function]}
-            onChange={[Function]}
+            onClick={[Function]}
            onFocus={[Function]}
-            type="checkbox"
-          />
-          <span
-            className="euiSwitch__body"
+            role="switch"
+            type="button"
          >
            <span
-              className="euiSwitch__thumb"
-            />
-            <span
-              className="euiSwitch__track"
+              className="euiSwitch__body"
            >
-              <svg
-                className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
-                focusable="false"
-                height={16}
-                style={null}
-                viewBox="0 0 16 16"
-                width={16}
-                xmlns="http://www.w3.org/2000/svg"
-              />
-              <svg
-                className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
-                focusable="false"
-                height={16}
-                style={null}
-                viewBox="0 0 16 16"
-                width={16}
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="euiSwitch__thumb"
              />
+              <span
+                className="euiSwitch__track"
+              >
+                <svg
+                  className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+                  focusable="false"
+                  height={16}
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+                <svg
+                  className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
+                  focusable="false"
+                  height={16}
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+              </span>
            </span>
-          </span>
-          <label
+          </button>
+          <p
            className="euiSwitch__label"
-            htmlFor="generated-id"
+            id="generated-id"
+            onClick={[Function]}
          >
            Hide Toolbar
-          </label>
+          </p>
        </div>
        <div
          className="euiFormHelpText euiFormRow__text"
@ -122,53 +124,55 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings component: on 1`]
        <div
          className="euiSwitch"
        >
-          <input
+          <button
+            aria-checked={true}
            aria-describedby="generated-id-help"
-            checked={true}
-            className="euiSwitch__input"
+            className="euiSwitch__button"
            data-test-subj="hideToolbarSwitch"
            id="generated-id"
-            name="toolbarHide"
            onBlur={[Function]}
-            onChange={[Function]}
+            onClick={[Function]}
            onFocus={[Function]}
-            type="checkbox"
-          />
-          <span
-            className="euiSwitch__body"
+            role="switch"
+            type="button"
          >
            <span
-              className="euiSwitch__thumb"
-            />
-            <span
-              className="euiSwitch__track"
+              className="euiSwitch__body"
            >
-              <svg
-                className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
-                focusable="false"
-                height={16}
-                style={null}
-                viewBox="0 0 16 16"
-                width={16}
-                xmlns="http://www.w3.org/2000/svg"
-              />
-              <svg
-                className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
-                focusable="false"
-                height={16}
-                style={null}
-                viewBox="0 0 16 16"
-                width={16}
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="euiSwitch__thumb"
              />
+              <span
+                className="euiSwitch__track"
+              >
+                <svg
+                  className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+                  focusable="false"
+                  height={16}
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+                <svg
+                  className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
+                  focusable="false"
+                  height={16}
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+              </span>
            </span>
-          </span>
-          <label
+          </button>
+          <p
            className="euiSwitch__label"
-            htmlFor="generated-id"
+            id="generated-id"
+            onClick={[Function]}
          >
            Hide Toolbar
-          </label>
+          </p>
        </div>
        <div
          className="euiFormHelpText euiFormRow__text"
@ -213,53 +217,55 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings contextual 1`] =
        <div
          className="euiSwitch"
        >
-          <input
+          <button
+            aria-checked={false}
            aria-describedby="generated-id-help"
-            checked={false}
-            className="euiSwitch__input"
+            className="euiSwitch__button"
            data-test-subj="hideToolbarSwitch"
            id="generated-id"
-            name="toolbarHide"
            onBlur={[Function]}
-            onChange={[Function]}
+            onClick={[Function]}
            onFocus={[Function]}
-            type="checkbox"
-          />
-          <span
-            className="euiSwitch__body"
+            role="switch"
+            type="button"
          >
            <span
-              className="euiSwitch__thumb"
-            />
-            <span
-              className="euiSwitch__track"
+              className="euiSwitch__body"
            >
-              <svg
-                className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
-                focusable="false"
-                height={16}
-                style={null}
-                viewBox="0 0 16 16"
-                width={16}
-                xmlns="http://www.w3.org/2000/svg"
-              />
-              <svg
-                className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
-                focusable="false"
-                height={16}
-                style={null}
-                viewBox="0 0 16 16"
-                width={16}
-                xmlns="http://www.w3.org/2000/svg"
+              <span
+                className="euiSwitch__thumb"
              />
+              <span
+                className="euiSwitch__track"
+              >
+                <svg
+                  className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+                  focusable="false"
+                  height={16}
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+                <svg
+                  className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
+                  focusable="false"
+                  height={16}
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+              </span>
            </span>
-          </span>
-          <label
+          </button>
+          <p
            className="euiSwitch__label"
-            htmlFor="generated-id"
+            id="generated-id"
+            onClick={[Function]}
          >
            Hide Toolbar
-          </label>
+          </p>
        </div>
        <div
          className="euiFormHelpText euiFormRow__text"
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/tests/snapshots/settings.test.tsx.snap
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/tests/snapshots/settings.test.tsx.snap
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/tests/autoplay_settings.test.tsx
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/tests/autoplay_settings.test.tsx
@ -24,15 +24,15 @@ describe('<AutoplaySettings />', () => {
  );

  test('renders as expected', () => {
-    expect(checkbox(wrapper).props().checked).toEqual(false);
+    expect(checkbox(wrapper).props()['aria-checked']).toEqual(false);
    expect(input(wrapper).props().value).toBe('5s');
  });

  test('activates and deactivates', () => {
-    checkbox(wrapper).simulate('change');
-    expect(checkbox(wrapper).props().checked).toEqual(true);
-    checkbox(wrapper).simulate('change');
-    expect(checkbox(wrapper).props().checked).toEqual(false);
+    checkbox(wrapper).simulate('click');
+    expect(checkbox(wrapper).props()['aria-checked']).toEqual(true);
+    checkbox(wrapper).simulate('click');
+    expect(checkbox(wrapper).props()['aria-checked']).toEqual(false);
  });

  test('changes properly with input', () => {
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/tests/settings.test.tsx
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/tests/settings.test.tsx
@ -85,8 +85,8 @@ describe('<Settings />', () => {

    // Click the Hide Toolbar switch
    portal(wrapper)
-      .find('input[data-test-subj="hideToolbarSwitch"]')
-      .simulate('change');
+      .find('button[data-test-subj="hideToolbarSwitch"]')
+      .simulate('click');

    // Wait for the animation and DOM update
    await tick(20);
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/tests/toolbar_settings.test.tsx
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/tests/toolbar_settings.test.tsx
@ -20,13 +20,13 @@ describe('<ToolbarSettings />', () => {
  );

  test('renders as expected', () => {
-    expect(checkbox(wrapper).props().checked).toEqual(false);
+    expect(checkbox(wrapper).props()['aria-checked']).toEqual(false);
  });

  test('activates and deactivates', () => {
-    checkbox(wrapper).simulate('change');
-    expect(checkbox(wrapper).props().checked).toEqual(true);
-    checkbox(wrapper).simulate('change');
-    expect(checkbox(wrapper).props().checked).toEqual(false);
+    checkbox(wrapper).simulate('click');
+    expect(checkbox(wrapper).props()['aria-checked']).toEqual(true);
+    checkbox(wrapper).simulate('click');
+    expect(checkbox(wrapper).props()['aria-checked']).toEqual(false);
  });
 });
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/test/selectors.ts
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/test/selectors.ts
@ -21,7 +21,7 @@ export const getToolbarPanel = (wrapper: ReactWrapper) =>
 export const getToolbarCheckbox = (wrapper: ReactWrapper) =>
  getToolbarPanel(wrapper)
    .find('EuiSwitch')
-    .find('input[type="checkbox"]');
+    .find('button');

 export const getAutoplayPanel = (wrapper: ReactWrapper) =>
  wrapper.find('AutoplaySettings > AutoplaySettingsComponent');
@ -29,7 +29,7 @@ export const getAutoplayPanel = (wrapper: ReactWrapper) =>
 export const getAutoplayCheckbox = (wrapper: ReactWrapper) =>
  getAutoplayPanel(wrapper)
    .find('EuiSwitch')
-    .find('input[type="checkbox"]');
+    .find('button');

 export const getAutoplayTextField = (wrapper: ReactWrapper) =>
  getAutoplayPanel(wrapper)
--- a/x-pack/legacy/plugins/cross_cluster_replication/jest/client_integration/helpers/follower_index_add.helpers.js
+++ b/x-pack/legacy/plugins/cross_cluster_replication/jest/client_integration/helpers/follower_index_add.helpers.js
@ -27,7 +27,7 @@ export const setup = (props) => {
  };

  const toggleAdvancedSettings = () => {
-    testBed.form.selectCheckBox('advancedSettingsToggle');
+    testBed.form.toggleEuiSwitch('advancedSettingsToggle');
  };

  return {
--- a/x-pack/legacy/plugins/cross_cluster_replication/jest/client_integration/helpers/follower_index_edit.helpers.js
+++ b/x-pack/legacy/plugins/cross_cluster_replication/jest/client_integration/helpers/follower_index_edit.helpers.js
@ -34,7 +34,7 @@ export const setup = (props) => {
  };

  const toggleAdvancedSettings = () => {
-    testBed.form.selectCheckBox('advancedSettingsToggle');
+    testBed.form.toggleEuiSwitch('advancedSettingsToggle');
  };

  return {
--- a/x-pack/legacy/plugins/index_lifecycle_management/jest/components/edit_policy.test.js
+++ b/x-pack/legacy/plugins/index_lifecycle_management/jest/components/edit_policy.test.js
@ -66,7 +66,7 @@ window.TextEncoder = null;
 let component;
 const activatePhase = (rendered, phase) => {
  const testSubject = `enablePhaseSwitch-${phase}`;
-  findTestSubject(rendered, testSubject).simulate('change', { target: { checked: true } });
+  findTestSubject(rendered, testSubject).simulate('click');
  rendered.update();
 };
 const expectedErrorMessages = (rendered, expectedErrorMessages) => {
@ -83,7 +83,7 @@ const expectedErrorMessages = (rendered, expectedErrorMessages) => {
  });
 };
 const noRollover = (rendered) => {
-  findTestSubject(rendered, 'rolloverSwitch').simulate('change', { target: { checked: false } });
+  findTestSubject(rendered, 'rolloverSwitch').simulate('click');
  rendered.update();
 };
 const getNodeAttributeSelect = (rendered, phase) => {
@ -155,7 +155,7 @@ describe('edit policy', () => {
        </Provider>
      );
      const rendered = mountWithIntl(component);
-      findTestSubject(rendered, 'saveAsNewSwitch').simulate('change', { target: { checked: true } });
+      findTestSubject(rendered, 'saveAsNewSwitch').simulate('click');
      rendered.update();
      setPolicyName(rendered, 'testy0');
      save(rendered);
@ -275,7 +275,7 @@ describe('edit policy', () => {
      noRollover(rendered);
      setPolicyName(rendered, 'mypolicy');
      activatePhase(rendered, 'warm');
-      findTestSubject(rendered, 'shrinkSwitch').simulate('change', { target: { checked: true } });
+      findTestSubject(rendered, 'shrinkSwitch').simulate('click');
      rendered.update();
      setPhaseAfter(rendered, 'warm', 1);
      const shrinkInput = rendered.find('input#warm-selectedPrimaryShardCount');
@ -290,7 +290,7 @@ describe('edit policy', () => {
      setPolicyName(rendered, 'mypolicy');
      activatePhase(rendered, 'warm');
      setPhaseAfter(rendered, 'warm', 1);
-      findTestSubject(rendered, 'shrinkSwitch').simulate('change', { target: { checked: true } });
+      findTestSubject(rendered, 'shrinkSwitch').simulate('click');
      rendered.update();
      const shrinkInput = rendered.find('input#warm-selectedPrimaryShardCount');
      shrinkInput.simulate('change', { target: { value: '-1' } });
@ -304,7 +304,7 @@ describe('edit policy', () => {
      setPolicyName(rendered, 'mypolicy');
      activatePhase(rendered, 'warm');
      setPhaseAfter(rendered, 'warm', 1);
-      findTestSubject(rendered, 'forceMergeSwitch').simulate('change', { target: { checked: true } });
+      findTestSubject(rendered, 'forceMergeSwitch').simulate('click');
      rendered.update();
      const shrinkInput = rendered.find('input#warm-selectedForceMergeSegments');
      shrinkInput.simulate('change', { target: { value: '0' } });
@ -318,7 +318,7 @@ describe('edit policy', () => {
      setPolicyName(rendered, 'mypolicy');
      activatePhase(rendered, 'warm');
      setPhaseAfter(rendered, 'warm', 1);
-      findTestSubject(rendered, 'forceMergeSwitch').simulate('change', { target: { checked: true } });
+      findTestSubject(rendered, 'forceMergeSwitch').simulate('click');
      rendered.update();
      const shrinkInput = rendered.find('input#warm-selectedForceMergeSegments');
      shrinkInput.simulate('change', { target: { value: '-1' } });
--- a/x-pack/legacy/plugins/index_management/jest/components/index_table.test.js
+++ b/x-pack/legacy/plugins/index_management/jest/components/index_table.test.js
@ -182,8 +182,8 @@ describe('index table', () => {
        )
        .map(span => span.text())
    );
-    const switchControl = rendered.find('.euiSwitch__input');
-    switchControl.simulate('change', { target: { checked: true } });
+    const switchControl = rendered.find('.euiSwitch__button');
+    switchControl.simulate('click');
    snapshot(
      rendered
        .find(
--- a/x-pack/legacy/plugins/infra/public/components/waffle/legend_controls.tsx
+++ b/x-pack/legacy/plugins/infra/public/components/waffle/legend_controls.tsx
@ -16,6 +16,7 @@ import {
  EuiPopoverTitle,
  EuiSpacer,
  EuiSwitch,
+  EuiSwitchEvent,
  EuiText,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@ -48,8 +49,8 @@ export const LegendControls = ({ autoBounds, boundsOverride, onChange, dataBound
    />
  );

-  const handleAutoChange = (e: SyntheticEvent<HTMLInputElement>) => {
-    setDraftAuto(e.currentTarget.checked);
+  const handleAutoChange = (e: EuiSwitchEvent) => {
+    setDraftAuto(e.target.checked);
  };

  const createBoundsHandler = (name: string) => (e: SyntheticEvent<HTMLInputElement>) => {
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/date_histogram.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/date_histogram.test.tsx
@ -8,7 +8,7 @@ import React from 'react';
 import { DateHistogramIndexPatternColumn } from './date_histogram';
 import { dateHistogramOperation } from '.';
 import { shallow } from 'enzyme';
-import { EuiSwitch } from '@elastic/eui';
+import { EuiSwitch, EuiSwitchEvent } from '@elastic/eui';
 import {
  UiSettingsClientContract,
  SavedObjectsClientContract,
@ -423,7 +423,7 @@ describe('date_histogram', () => {
      );
      instance.find(EuiSwitch).prop('onChange')!({
        target: { checked: true },
-      } as React.ChangeEvent<HTMLInputElement>);
+      } as EuiSwitchEvent);
      expect(setStateSpy).toHaveBeenCalled();
      const newState = setStateSpy.mock.calls[0][0];
      expect(newState).toHaveProperty('layers.third.columns.col1.params.interval', '30d');
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/date_histogram.tsx
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/date_histogram.tsx
@ -15,6 +15,7 @@ import {
  EuiForm,
  EuiFormRow,
  EuiSwitch,
+  EuiSwitchEvent,
  EuiFieldNumber,
  EuiSelect,
  EuiFlexItem,
@ -154,7 +155,7 @@ export const dateHistogramOperation: OperationDefinition<DateHistogramIndexPatte
      restrictedInterval(field!.aggregationRestrictions)
    );

-    function onChangeAutoInterval(ev: React.ChangeEvent<HTMLInputElement>) {
+    function onChangeAutoInterval(ev: EuiSwitchEvent) {
      const value = ev.target.checked ? autoIntervalFromDateRange(dateRange) : autoInterval;
      setState(updateColumnParam({ state, layerId, currentColumn, paramName: 'interval', value }));
    }
--- a/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/create_analytics_form/create_analytics_form.test.tsx
+++ b/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/create_analytics_form/create_analytics_form.test.tsx
@ -56,6 +56,6 @@ describe('Data Frame Analytics: <CreateAnalyticsForm />', () => {
    expect(options.at(2).props().value).toBe('regression');

    const row2 = euiFormRows.at(1);
-    expect(row2.find('label').text()).toBe('Enable advanced editor');
+    expect(row2.find('p').text()).toBe('Enable advanced editor');
  });
 });
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/advanced_section/components/dedicated_index/dedicated_index_switch.tsx
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/advanced_section/components/dedicated_index/dedicated_index_switch.tsx
@ -5,6 +5,7 @@
 */

 import React, { FC, useState, useContext, useEffect } from 'react';
+import { i18n } from '@kbn/i18n';
 import { EuiSwitch } from '@elastic/eui';
 import { JobCreatorContext } from '../../../../../job_creator_context';
 import { Description } from './description';
@ -29,6 +30,13 @@ export const DedicatedIndexSwitch: FC = () => {
        checked={useDedicatedIndex}
        onChange={toggleModelPlot}
        data-test-subj="mlJobWizardSwitchUseDedicatedIndex"
+        showLabel={false}
+        label={i18n.translate(
+          'xpack.ml.newJob.wizard.jobDetailsStep.advancedSection.useDedicatedIndex.title',
+          {
+            defaultMessage: 'Use dedicated index',
+          }
+        )}
      />
    </Description>
  );
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/advanced_section/components/model_plot/model_plot_switch.tsx
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/job_details_step/components/advanced_section/components/model_plot/model_plot_switch.tsx
@ -5,6 +5,7 @@
 */

 import React, { FC, useState, useContext, useEffect } from 'react';
+import { i18n } from '@kbn/i18n';
 import { EuiSwitch } from '@elastic/eui';
 import { JobCreatorContext } from '../../../../../job_creator_context';
 import { Description } from './description';
@ -29,6 +30,13 @@ export const ModelPlotSwitch: FC = () => {
        checked={modelPlotEnabled}
        onChange={toggleModelPlot}
        data-test-subj="mlJobWizardSwitchModelPlot"
+        showLabel={false}
+        label={i18n.translate(
+          'xpack.ml.newJob.wizard.jobDetailsStep.advancedSection.enableModelPlot.title',
+          {
+            defaultMessage: 'Enable model plot',
+          }
+        )}
      />
    </Description>
  );
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/sparse_data/sparse_data_switch.tsx
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/pick_fields_step/components/sparse_data/sparse_data_switch.tsx
@ -5,6 +5,7 @@
 */

 import React, { FC, useState, useContext, useEffect } from 'react';
+import { i18n } from '@kbn/i18n';
 import { EuiSwitch } from '@elastic/eui';
 import { JobCreatorContext } from '../../../job_creator_context';
 import { Description } from './description';
@ -43,6 +44,10 @@ export const SparseDataSwitch: FC = () => {
        checked={sparseData}
        onChange={toggleSparseData}
        data-test-subj="mlJobWizardSwitchSparseData"
+        showLabel={false}
+        label={i18n.translate('xpack.ml.newJob.wizard.pickFieldsStep.sparseData.title', {
+          defaultMessage: 'Sparse data',
+        })}
      />
    </Description>
  );
--- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/components/job_settings_form.tsx
+++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/recognize/components/job_settings_form.tsx
@ -247,6 +247,10 @@ export const JobSettingsForm: FC<JobSettingsFormProps> = ({
                    useDedicatedIndex: checked,
                  });
                }}
+                showLabel={false}
+                label={i18n.translate('xpack.ml.newJob.recognize.useDedicatedIndexLabel', {
+                  defaultMessage: 'Use dedicated index',
+                })}
              />
            </EuiFormRow>
          </EuiDescribedFormGroup>
--- a/x-pack/legacy/plugins/remote_clusters/jest/client_integration/remote_clusters_add.test.js
+++ b/x-pack/legacy/plugins/remote_clusters/jest/client_integration/remote_clusters_add.test.js
@ -42,11 +42,11 @@ describe('Create Remote cluster', () => {
      expect(exists('remoteClusterFormSkipUnavailableFormToggle')).toBe(true);

      // By default it should be set to "false"
-      expect(find('remoteClusterFormSkipUnavailableFormToggle').props().checked).toBe(false);
+      expect(find('remoteClusterFormSkipUnavailableFormToggle').props()['aria-checked']).toBe(false);

      form.toggleEuiSwitch('remoteClusterFormSkipUnavailableFormToggle');

-      expect(find('remoteClusterFormSkipUnavailableFormToggle').props().checked).toBe(true);
+      expect(find('remoteClusterFormSkipUnavailableFormToggle').props()['aria-checked']).toBe(true);
    });

    test('should display errors and disable the save button when clicking "save" without filling the form', () => {
--- a/x-pack/legacy/plugins/remote_clusters/jest/client_integration/remote_clusters_edit.test.js
+++ b/x-pack/legacy/plugins/remote_clusters/jest/client_integration/remote_clusters_edit.test.js
@ -64,7 +64,7 @@ describe('Edit Remote cluster', () => {
  test('should populate the form fields with the values from the remote cluster loaded', () => {
    expect(find('remoteClusterFormNameInput').props().value).toBe(REMOTE_CLUSTER_EDIT_NAME);
    expect(find('remoteClusterFormSeedsInput').text()).toBe(REMOTE_CLUSTER_EDIT.seeds.join(''));
-    expect(find('remoteClusterFormSkipUnavailableFormToggle').props().checked).toBe(REMOTE_CLUSTER_EDIT.skipUnavailable);
+    expect(find('remoteClusterFormSkipUnavailableFormToggle').props()['aria-checked']).toBe(REMOTE_CLUSTER_EDIT.skipUnavailable);
  });

  test('should disable the form name input', () => {
--- a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/snapshots/remote_cluster_form.test.js.snap
+++ b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/snapshots/remote_cluster_form.test.js.snap
@ -247,45 +247,49 @@ Array [
              <div
                class="euiSwitch"
              >
-                <input
-                  class="euiSwitch__input"
+                <button
+                  aria-checked="false"
+                  aria-describedby="mockId"
+                  class="euiSwitch__button"
                  data-test-subj="remoteClusterFormSkipUnavailableFormToggle"
                  id="mockId"
-                  type="checkbox"
-                />
-                <span
-                  class="euiSwitch__body"
+                  role="switch"
+                  type="button"
                >
                  <span
-                    class="euiSwitch__thumb"
-                  />
-                  <span
-                    class="euiSwitch__track"
+                    class="euiSwitch__body"
                  >
-                    <svg
-                      class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
-                      focusable="false"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      width="16"
-                      xmlns="http://www.w3.org/2000/svg"
-                    />
-                    <svg
-                      class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
-                      focusable="false"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      width="16"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <span
+                      class="euiSwitch__thumb"
                    />
+                    <span
+                      class="euiSwitch__track"
+                    >
+                      <svg
+                        class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+                        focusable="false"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                      <svg
+                        class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
+                        focusable="false"
+                        height="16"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </span>
                  </span>
-                </span>
-                <label
+                </button>
+                <p
                  class="euiSwitch__label"
-                  for="mockId"
+                  id="mockId"
                >
                  Skip if unavailable
-                </label>
+                </p>
              </div>
            </div>
          </div>
@ -502,45 +506,49 @@ Array [
      <div
        class="euiSwitch"
      >
-        <input
-          class="euiSwitch__input"
+        <button
+          aria-checked="false"
+          aria-describedby="mockId"
+          class="euiSwitch__button"
          data-test-subj="remoteClusterFormSkipUnavailableFormToggle"
          id="mockId"
-          type="checkbox"
-        />
-        <span
-          class="euiSwitch__body"
+          role="switch"
+          type="button"
        >
          <span
-            class="euiSwitch__thumb"
-          />
-          <span
-            class="euiSwitch__track"
+            class="euiSwitch__body"
          >
-            <svg
-              class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
-            />
-            <svg
-              class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
-              focusable="false"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              class="euiSwitch__thumb"
            />
+            <span
+              class="euiSwitch__track"
+            >
+              <svg
+                class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+                focusable="false"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              />
+              <svg
+                class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
+                focusable="false"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              />
+            </span>
          </span>
-        </span>
-        <label
+        </button>
+        <p
          class="euiSwitch__label"
-          for="mockId"
+          id="mockId"
        >
          Skip if unavailable
-        </label>
+        </p>
      </div>
    </div>
  </div>,
--- a/x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/snapshots/job_switch.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/snapshots/job_switch.test.tsx.snap
@ -11,7 +11,9 @@ exports[`JobSwitch renders correctly against snapshot 1`] = `
      checked={false}
      data-test-subj="job-switch"
      disabled={false}
+      label=""
      onChange={[Function]}
+      showLabel={false}
    />
  </EuiFlexItem>
 </EuiFlexGroup>
--- a/x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/job_switch.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/job_switch.test.tsx
@ -42,9 +42,9 @@ describe('JobSwitch', () => {
    );

    wrapper
-      .find('[data-test-subj="job-switch"] input')
+      .find('button[data-test-subj="job-switch"]')
      .first()
-      .simulate('change', {
+      .simulate('click', {
        target: { checked: true },
      });

--- a/x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/job_switch.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/job_switch.tsx
@ -59,6 +59,8 @@ export const JobSwitch = React.memo<JobSwitchProps>(
                setIsLoading(true);
                onJobStateChange(job, job.latestTimestampMs || 0, e.target.checked);
              }}
+              showLabel={false}
+              label=""
            />
          )}
        </EuiFlexItem>
--- a/x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/jobs_table.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/ml_popover/jobs_table/jobs_table.test.tsx
@ -59,9 +59,9 @@ describe('JobsTable', () => {
      <JobsTable isLoading={false} jobs={siemJobs} onJobStateChange={onJobStateChangeMock} />
    );
    wrapper
-      .find('[data-test-subj="job-switch"] input')
+      .find('button[data-test-subj="job-switch"]')
      .first()
-      .simulate('change', {
+      .simulate('click', {
        target: { checked: true },
      });
    expect(onJobStateChangeMock.mock.calls[0]).toEqual([siemJobs[0], 1571022859393, true]);
--- a/x-pack/legacy/plugins/siem/public/components/page/network/network_dns_table/is_ptr_included.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/page/network/network_dns_table/is_ptr_included.test.tsx
@ -31,9 +31,9 @@ describe('NetworkTopNFlow Select direction', () => {
      const wrapper = mount(<IsPtrIncluded isPtrIncluded={false} onChange={mockOnChange} />);

      wrapper
-        .find('input')
+        .find('button')
        .first()
-        .simulate('change', event);
+        .simulate('click', event);

      wrapper.update();

--- a/x-pack/legacy/plugins/spaces/public/views/management/edit_space/enabled_features/feature_table.tsx
+++ b/x-pack/legacy/plugins/spaces/public/views/management/edit_space/enabled_features/feature_table.tsx
@ -102,9 +102,8 @@ export class FeatureTable extends Component<Props, {}> {
            id={record.feature.id}
            checked={checked}
            onChange={this.onChange(record.feature.id) as any}
-            aria-label={
-              checked ? `${record.feature.name} visible` : `${record.feature.name} disabled`
-            }
+            label={`${record.feature.name} visible`}
+            showLabel={false}
          />
        );
      },
--- a/x-pack/legacy/plugins/spaces/public/views/management/edit_space/manage_space_page.test.tsx
+++ b/x-pack/legacy/plugins/spaces/public/views/management/edit_space/manage_space_page.test.tsx
@ -233,8 +233,8 @@ function toggleFeature(wrapper: ReactWrapper<any, any>) {

  wrapper
    .find(EuiSwitch)
-    .find('input')
-    .simulate('change', { target: { checked: false } });
+    .find('button')
+    .simulate('click');

  wrapper.update();
 }
--- a/x-pack/legacy/plugins/upgrade_assistant/public/components/tabs/overview/deprecation_logging_toggle.tsx
+++ b/x-pack/legacy/plugins/upgrade_assistant/public/components/tabs/overview/deprecation_logging_toggle.tsx
@ -47,7 +47,7 @@ export class DeprecationLoggingToggleUI extends React.Component<
        id="xpack.upgradeAssistant.overviewTab.steps.deprecationLogsStep.enableDeprecationLoggingToggleSwitch"
        data-test-subj="upgradeAssistantDeprecationToggle"
        label={this.renderLoggingState()}
-        checked={loggingEnabled}
+        checked={loggingEnabled || false}
        onChange={this.toggleLogging}
        disabled={loadingState === LoadingState.Loading || loadingState === LoadingState.Error}
      />
--- a/x-pack/package.json
+++ b/x-pack/package.json
@ -183,7 +183,7 @@
    "@elastic/ctags-langserver": "^0.1.11",
    "@elastic/datemath": "5.0.2",
    "@elastic/ems-client": "1.0.5",
-    "@elastic/eui": "14.8.0",
+    "@elastic/eui": "14.9.0",
    "@elastic/filesaver": "1.1.2",
    "@elastic/javascript-typescript-langserver": "^0.3.3",
    "@elastic/lsp-extension": "^0.1.2",
--- a/x-pack/test/functional/page_objects/gis_page.js
+++ b/x-pack/test/functional/page_objects/gis_page.js
@ -310,14 +310,13 @@ export function GisPageProvider({ getService, getPageObjects }) {
    }

    async disableApplyGlobalQuery() {
-      const element = await testSubjects.find('mapLayerPanelApplyGlobalQueryCheckbox');
-      const isSelected = await element.isSelected();
-      if(isSelected) {
+      const isSelected = await testSubjects.getAttribute('mapLayerPanelApplyGlobalQueryCheckbox', 'aria-checked');
+      if(isSelected === 'true') {
        await retry.try(async () => {
          log.debug(`disabling applyGlobalQuery`);
          await testSubjects.click('mapLayerPanelApplyGlobalQueryCheckbox');
-          const isStillSelected = await element.isSelected();
-          if (isStillSelected) {
+          const isStillSelected = await testSubjects.getAttribute('mapLayerPanelApplyGlobalQueryCheckbox', 'aria-checked');
+          if (isStillSelected === 'true') {
            throw new Error('applyGlobalQuery not disabled');
          }
        });
--- a/x-pack/test/functional/page_objects/upgrade_assistant.js
+++ b/x-pack/test/functional/page_objects/upgrade_assistant.js
@ -45,7 +45,7 @@ export function UpgradeAssistantProvider({ getService, getPageObjects }) {
    async expectDeprecationLoggingLabel(labelText) {
      return await retry.try(async () => {
        log.debug('expectDeprecationLoggingLabel()');
-        const label = await find.byCssSelector('[data-test-subj="upgradeAssistantDeprecationToggle"] ~ label');
+        const label = await find.byCssSelector('[data-test-subj="upgradeAssistantDeprecationToggle"] ~ p');
        const value = await label.getVisibleText();
        expect(value).to.equal(labelText);
      });
--- a/x-pack/test/functional/services/machine_learning/job_wizard_common.ts
+++ b/x-pack/test/functional/services/machine_learning/job_wizard_common.ts
@ -181,11 +181,12 @@ export function MachineLearningJobWizardCommonProvider({ getService }: FtrProvid
      sectionOptions: SectionOptions = { withAdvancedSection: true }
    ): Promise<boolean> {
      let subj = 'mlJobWizardSwitchModelPlot';
+      const isSelected = await testSubjects.getAttribute(subj, 'aria-checked');
      if (sectionOptions.withAdvancedSection === true) {
        await this.ensureAdvancedSectionOpen();
        subj = advancedSectionSelector(subj);
      }
-      return await testSubjects.isSelected(subj);
+      return isSelected === 'true';
    },

    async assertModelPlotSwitchCheckedState(
@ -213,11 +214,12 @@ export function MachineLearningJobWizardCommonProvider({ getService }: FtrProvid
      sectionOptions: SectionOptions = { withAdvancedSection: true }
    ): Promise<boolean> {
      let subj = 'mlJobWizardSwitchUseDedicatedIndex';
+      const isSelected = await testSubjects.getAttribute(subj, 'aria-checked');
      if (sectionOptions.withAdvancedSection === true) {
        await this.ensureAdvancedSectionOpen();
        subj = advancedSectionSelector(subj);
      }
-      return await testSubjects.isSelected(subj);
+      return isSelected === 'true';
    },

    async assertDedicatedIndexSwitchCheckedState(
--- a/x-pack/test_utils/testbed/testbed.ts
+++ b/x-pack/test_utils/testbed/testbed.ts
@ -174,7 +174,13 @@ export const registerTestBed = <T extends string = string>(
        checkBox.simulate('change', { target: { checked: isChecked } });
      };

-      const toggleEuiSwitch: TestBed<T>['form']['toggleEuiSwitch'] = selectCheckBox; // Same API as "selectCheckBox"
+      const toggleEuiSwitch: TestBed<T>['form']['toggleEuiSwitch'] = testSubject => {
+        const checkBox = find(testSubject);
+        if (!checkBox.length) {
+          throw new Error(`"${testSubject}" was not found.`);
+        }
+        checkBox.simulate('click');
+      };

      const setComboBoxValue: TestBed<T>['form']['setComboBoxValue'] = (
        comboBoxTestSubject,
--- a/yarn.lock
+++ b/yarn.lock
@ -1151,10 +1151,10 @@
    tabbable "^1.1.0"
    uuid "^3.1.0"

-"@elastic/eui@14.8.0":
-  version "14.8.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-14.8.0.tgz#777d29852998e52e8fc6dfb1869a4b32d74c72bb"
-  integrity sha512-p6TZv6Z+ENzw6JnCyXVQtvEOo7eEct8Qb/S4aS4EXK1WIyGB35Ra/a/pb3bLQbbZ2mSZtCr1sk+XVUq0qDpytw==
+"@elastic/eui@14.9.0":
+  version "14.9.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-14.9.0.tgz#934ab8d51c56671635dc17ac20ec325f43ceda75"
+  integrity sha512-0ZztvfRO3SNgHtS8a+4i6CSG3Yc+C0Kodzc7obY5wkOzissrnbwLZdU79hU/H6DHYCt/zYDdGcrDp6BeD67RtQ==
  dependencies:
    "@types/lodash" "^4.14.116"
    "@types/numeral" "^0.0.25"