Upgrade EUI to v14.9.0 (#49678)

* 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

package.json

@@ -109,7 +109,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",

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';
@@ -431,7 +432,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 });

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;

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"]');
+    const checkbox = component.find('[data-test-subj="inputControlEditorUpdateFiltersOnChangeCheckbox"] button');
-    checkbox.simulate('change', { target: { checked: true } });
+    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"]');
+    const checkbox = component.find('[data-test-subj="inputControlEditorUseTimeFilterCheckbox"] button');
-    checkbox.simulate('change', { target: { checked: true } });
+    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"]');
+    const checkbox = component.find('[data-test-subj="inputControlEditorPinFiltersCheckbox"] button');
-    checkbox.simulate('change', { target: { checked: true } });
+    checkbox.simulate('click');
 
     expect(props.setValue).toHaveBeenCalledTimes(1);
     expect(props.setValue).toHaveBeenCalledWith('pinFilters', true);

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);
   });
 

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);
   };

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>

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}

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',
   });

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,

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)',
   });

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();

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}
       />

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,
     });

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();
       });
 

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());
       }
     }

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');

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')) ===
+        (await testSubjects.getAttribute(
-        'true';
+          'saveQueryFormIncludeTimeFilterOption',
+          'aria-checked'
+        )) === 'true';
       if (currentIncludeTimeFilterValue !== includeTimeFilter) {
         await testSubjects.click('saveQueryFormIncludeTimeFilterOption');
       }

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"
   }

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"
   }
 }

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": {

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": {

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
+    <button
-      checked={false}
+      aria-checked={false}
-      className="euiSwitch__input"
+      aria-label=""
+      className="euiSwitch__button"
       id="generated-id"
-      onChange={[Function]}
+      onClick={[Function]}
-      type="checkbox"
+      role="switch"
-    />
+      type="button"
-    <span
-      className="euiSwitch__body"
     >
       <span
-        className="euiSwitch__thumb"
+        className="euiSwitch__body"
-      />
+      >
-      <span
+        <span
-        className="euiSwitch__track"
+          className="euiSwitch__thumb"
-      />
+        />
-    </span>
+        <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
+    <button
-      checked={false}
+      aria-checked={false}
-      className="euiSwitch__input"
+      aria-label=""
+      className="euiSwitch__button"
       id="generated-id"
-      onChange={[Function]}
+      onClick={[Function]}
-      type="checkbox"
+      role="switch"
-    />
+      type="button"
-    <span
-      className="euiSwitch__body"
     >
       <span
-        className="euiSwitch__thumb"
+        className="euiSwitch__body"
-      />
+      >
-      <span
+        <span
-        className="euiSwitch__track"
+          className="euiSwitch__thumb"
-      />
+        />
-    </span>
+        <span
+          className="euiSwitch__track"
+        />
+      </span>
+    </button>
   </div>
 </div>
 `;

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=""
     />
   );
 };

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

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
+      <button
-        checked={false}
+        aria-checked={false}
-        className="euiSwitch__input"
+        aria-describedby="generated-id"
+        className="euiSwitch__button"
         id="cycle"
-        name="cycle"
+        onClick={[Function]}
-        onChange={[Function]}
+        role="switch"
-        type="checkbox"
+        type="button"
-      />
-      <span
-        className="euiSwitch__body"
       >
         <span
-          className="euiSwitch__thumb"
+          className="euiSwitch__body"
-        />
-        <span
-          className="euiSwitch__track"
         >
-          <svg
+          <span
-            className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+            className="euiSwitch__thumb"
-            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__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>
+      </button>
-      <label
+      <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
+      <button
-        checked={true}
+        aria-checked={true}
-        className="euiSwitch__input"
+        aria-describedby="generated-id"
+        className="euiSwitch__button"
         id="cycle"
-        name="cycle"
+        onClick={[Function]}
-        onChange={[Function]}
+        role="switch"
-        type="checkbox"
+        type="button"
-      />
-      <span
-        className="euiSwitch__body"
       >
         <span
-          className="euiSwitch__thumb"
+          className="euiSwitch__body"
-        />
-        <span
-          className="euiSwitch__track"
         >
-          <svg
+          <span
-            className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+            className="euiSwitch__thumb"
-            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__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>
+      </button>
-      <label
+      <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
+      <button
-        checked={false}
+        aria-checked={false}
-        className="euiSwitch__input"
+        aria-describedby="generated-id"
+        className="euiSwitch__button"
         id="cycle"
-        name="cycle"
+        onClick={[Function]}
-        onChange={[Function]}
+        role="switch"
-        type="checkbox"
+        type="button"
-      />
-      <span
-        className="euiSwitch__body"
       >
         <span
-          className="euiSwitch__thumb"
+          className="euiSwitch__body"
-        />
-        <span
-          className="euiSwitch__track"
         >
-          <svg
+          <span
-            className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+            className="euiSwitch__thumb"
-            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__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>
+      </button>
-      <label
+      <p
         className="euiSwitch__label"
-        htmlFor="cycle"
+        id="generated-id"
+        onClick={[Function]}
       >
         Cycle Slides
-      </label>
+      </p>
     </div>
     <hr
       className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"

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__button"
-            className="euiSwitch__input"
             data-test-subj="hideToolbarSwitch"
             id="generated-id"
-            name="toolbarHide"
             onBlur={[Function]}
-            onChange={[Function]}
+            onClick={[Function]}
             onFocus={[Function]}
-            type="checkbox"
+            role="switch"
-          />
+            type="button"
-          <span
-            className="euiSwitch__body"
           >
             <span
-              className="euiSwitch__thumb"
+              className="euiSwitch__body"
-            />
-            <span
-              className="euiSwitch__track"
             >
-              <svg
+              <span
-                className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+                className="euiSwitch__thumb"
-                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__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>
+          </button>
-          <label
+          <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__button"
-            className="euiSwitch__input"
             data-test-subj="hideToolbarSwitch"
             id="generated-id"
-            name="toolbarHide"
             onBlur={[Function]}
-            onChange={[Function]}
+            onClick={[Function]}
             onFocus={[Function]}
-            type="checkbox"
+            role="switch"
-          />
+            type="button"
-          <span
-            className="euiSwitch__body"
           >
             <span
-              className="euiSwitch__thumb"
+              className="euiSwitch__body"
-            />
-            <span
-              className="euiSwitch__track"
             >
-              <svg
+              <span
-                className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+                className="euiSwitch__thumb"
-                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__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>
+          </button>
-          <label
+          <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__button"
-            className="euiSwitch__input"
             data-test-subj="hideToolbarSwitch"
             id="generated-id"
-            name="toolbarHide"
             onBlur={[Function]}
-            onChange={[Function]}
+            onClick={[Function]}
             onFocus={[Function]}
-            type="checkbox"
+            role="switch"
-          />
+            type="button"
-          <span
-            className="euiSwitch__body"
           >
             <span
-              className="euiSwitch__thumb"
+              className="euiSwitch__body"
-            />
-            <span
-              className="euiSwitch__track"
             >
-              <svg
+              <span
-                className="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+                className="euiSwitch__thumb"
-                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__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>
+          </button>
-          <label
+          <p
             className="euiSwitch__label"
-            htmlFor="generated-id"
+            id="generated-id"
+            onClick={[Function]}
           >
             Hide Toolbar
-          </label>
+          </p>
         </div>
         <div
           className="euiFormHelpText euiFormRow__text"

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');
+    checkbox(wrapper).simulate('click');
-    expect(checkbox(wrapper).props().checked).toEqual(true);
+    expect(checkbox(wrapper).props()['aria-checked']).toEqual(true);
-    checkbox(wrapper).simulate('change');
+    checkbox(wrapper).simulate('click');
-    expect(checkbox(wrapper).props().checked).toEqual(false);
+    expect(checkbox(wrapper).props()['aria-checked']).toEqual(false);
   });
 
   test('changes properly with input', () => {

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"]')
+      .find('button[data-test-subj="hideToolbarSwitch"]')
-      .simulate('change');
+      .simulate('click');
 
     // Wait for the animation and DOM update
     await tick(20);

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');
+    checkbox(wrapper).simulate('click');
-    expect(checkbox(wrapper).props().checked).toEqual(true);
+    expect(checkbox(wrapper).props()['aria-checked']).toEqual(true);
-    checkbox(wrapper).simulate('change');
+    checkbox(wrapper).simulate('click');
-    expect(checkbox(wrapper).props().checked).toEqual(false);
+    expect(checkbox(wrapper).props()['aria-checked']).toEqual(false);
   });
 });

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)

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 {

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 {

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' } });

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');
+    const switchControl = rendered.find('.euiSwitch__button');
-    switchControl.simulate('change', { target: { checked: true } });
+    switchControl.simulate('click');
     snapshot(
       rendered
         .find(

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>) => {
+  const handleAutoChange = (e: EuiSwitchEvent) => {
-    setDraftAuto(e.currentTarget.checked);
+    setDraftAuto(e.target.checked);
   };
 
   const createBoundsHandler = (name: string) => (e: SyntheticEvent<HTMLInputElement>) => {

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');

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 }));
     }

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');
   });
 });

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>
   );

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>
   );

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>
   );

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>

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', () => {

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', () => {

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
+                <button
-                  class="euiSwitch__input"
+                  aria-checked="false"
+                  aria-describedby="mockId"
+                  class="euiSwitch__button"
                   data-test-subj="remoteClusterFormSkipUnavailableFormToggle"
                   id="mockId"
-                  type="checkbox"
+                  role="switch"
-                />
+                  type="button"
-                <span
-                  class="euiSwitch__body"
                 >
                   <span
-                    class="euiSwitch__thumb"
+                    class="euiSwitch__body"
-                  />
-                  <span
-                    class="euiSwitch__track"
                   >
-                    <svg
+                    <span
-                      class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+                      class="euiSwitch__thumb"
-                      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__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>
+                </button>
-                <label
+                <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
+        <button
-          class="euiSwitch__input"
+          aria-checked="false"
+          aria-describedby="mockId"
+          class="euiSwitch__button"
           data-test-subj="remoteClusterFormSkipUnavailableFormToggle"
           id="mockId"
-          type="checkbox"
+          role="switch"
-        />
+          type="button"
-        <span
-          class="euiSwitch__body"
         >
           <span
-            class="euiSwitch__thumb"
+            class="euiSwitch__body"
-          />
-          <span
-            class="euiSwitch__track"
           >
-            <svg
+            <span
-              class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+              class="euiSwitch__thumb"
-              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__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>
+        </button>
-        <label
+        <p
           class="euiSwitch__label"
-          for="mockId"
+          id="mockId"
         >
           Skip if unavailable
-        </label>
+        </p>
       </div>
     </div>
   </div>,

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>

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 },
       });
 

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>

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]);

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();
 

x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/index.tsx

@@ -213,13 +213,7 @@ const AllRules = React.memo(() => {
       field: 'activate',
       name: 'Activate',
       render: (value: ColumnTypes['activate']) => (
-        // Michael: Uncomment props below when EUI 14.9.0 is added to Kibana.
+        <EuiSwitch checked={value} label="Activate" onChange={() => {}} showLabel={false} />
-        <EuiSwitch
-          checked={value}
-          // label="Activate"
-          onChange={() => {}}
-          // showLabel={false}
-        />
       ),
       sortable: true,
       width: '65px',

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={
+            label={`${record.feature.name} visible`}
-              checked ? `${record.feature.name} visible` : `${record.feature.name} disabled`
+            showLabel={false}
-            }
           />
         );
       },

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')
+    .find('button')
-    .simulate('change', { target: { checked: false } });
+    .simulate('click');
 
   wrapper.update();
 }

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}
       />

x-pack/package.json

@@ -184,7 +184,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",

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 testSubjects.getAttribute('mapLayerPanelApplyGlobalQueryCheckbox', 'aria-checked');
-      const isSelected = await element.isSelected();
+      if(isSelected === 'true') {
-      if(isSelected) {
         await retry.try(async () => {
           log.debug(`disabling applyGlobalQuery`);
           await testSubjects.click('mapLayerPanelApplyGlobalQueryCheckbox');
-          const isStillSelected = await element.isSelected();
+          const isStillSelected = await testSubjects.getAttribute('mapLayerPanelApplyGlobalQueryCheckbox', 'aria-checked');
-          if (isStillSelected) {
+          if (isStillSelected === 'true') {
             throw new Error('applyGlobalQuery not disabled');
           }
         });

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);
       });

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(

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,

yarn.lock

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