Remove all instances of EuiKeyboardAccessible (#106910) (#107095)

* remove all instances of EuiKeyboardAccessible

Co-authored-by: Michail Yasonik <michail.yasonik@elastic.co>

src/plugins/vis_type_metric/public/components/metric_vis_value.test.tsx

@@ -14,16 +14,16 @@ import { MetricVisValue } from './metric_vis_value';
 const baseMetric = { label: 'Foo', value: 'foo' } as any;
 
 describe('MetricVisValue', () => {
-  it('should be wrapped in EuiKeyboardAccessible if having a click listener', () => {
+  it('should be wrapped in button if having a click listener', () => {
     const component = shallow(
       <MetricVisValue fontSize={12} metric={baseMetric} onFilter={() => {}} />
     );
-    expect(component.find('EuiKeyboardAccessible').exists()).toBe(true);
+    expect(component.find('button').exists()).toBe(true);
   });
 
-  it('should not be wrapped in EuiKeyboardAccessible without having a click listener', () => {
+  it('should not be wrapped in button without having a click listener', () => {
     const component = shallow(<MetricVisValue fontSize={12} metric={baseMetric} />);
-    expect(component.find('EuiKeyboardAccessible').exists()).toBe(false);
+    expect(component.find('button').exists()).toBe(false);
   });
 
   it('should add -isfilterable class if onFilter is provided', () => {
@@ -46,7 +46,7 @@ describe('MetricVisValue', () => {
     const component = shallow(
       <MetricVisValue fontSize={12} metric={baseMetric} onFilter={onFilter} />
     );
-    component.find('.mtrVis__container-isfilterable').simulate('click');
+    component.simulate('click');
     expect(onFilter).toHaveBeenCalledWith(baseMetric);
   });
 });

src/plugins/vis_type_metric/public/components/metric_vis_value.tsx

@@ -6,11 +6,9 @@
  * Side Public License, v 1.
  */
 
-import React, { Component, KeyboardEvent } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 
-import { EuiKeyboardAccessible, keys } from '@elastic/eui';
-
 import { MetricVisMetric } from '../types';
 
 interface MetricVisValueProps {
@@ -20,65 +18,43 @@ interface MetricVisValueProps {
   showLabel?: boolean;
 }
 
-export class MetricVisValue extends Component<MetricVisValueProps> {
-  onClick = () => {
-    if (this.props.onFilter) {
-      this.props.onFilter(this.props.metric);
-    }
-  };
-
-  onKeyPress = (event: KeyboardEvent<HTMLDivElement>) => {
-    if (event.key === keys.ENTER) {
-      this.onClick();
-    }
-  };
-
-  render() {
-    const { fontSize, metric, onFilter, showLabel } = this.props;
-    const hasFilter = Boolean(onFilter);
-
-    const metricValueStyle = {
-      fontSize: `${fontSize}pt`,
-      color: metric.color,
-    };
-
-    const containerClassName = classNames('mtrVis__container', {
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      'mtrVis__container--light': metric.lightText,
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      'mtrVis__container-isfilterable': hasFilter,
-    });
+export const MetricVisValue = ({ fontSize, metric, onFilter, showLabel }: MetricVisValueProps) => {
+  const containerClassName = classNames('mtrVis__container', {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'mtrVis__container--light': metric.lightText,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'mtrVis__container-isfilterable': onFilter,
+  });
 
-    const metricComponent = (
+  const metricComponent = (
+    <div className={containerClassName} style={{ backgroundColor: metric.bgColor }}>
       <div
-        className={containerClassName}
-        style={{ backgroundColor: metric.bgColor }}
-        onClick={hasFilter ? this.onClick : undefined}
-        onKeyPress={hasFilter ? this.onKeyPress : undefined}
-        tabIndex={hasFilter ? 0 : undefined}
-        role={hasFilter ? 'button' : undefined}
-      >
-        <div
-          className="mtrVis__value"
-          style={metricValueStyle}
-          /*
-           * Justification for dangerouslySetInnerHTML:
-           * This is one of the visualizations which makes use of the HTML field formatters.
-           * Since these formatters produce raw HTML, this visualization needs to be able to render them as-is, relying
-           * on the field formatter to only produce safe HTML.
-           * `metric.value` is set by the MetricVisComponent, so this component must make sure this value never contains
-           * any unsafe HTML (e.g. by bypassing the field formatter).
-           */
-          dangerouslySetInnerHTML={{ __html: metric.value }} // eslint-disable-line react/no-danger
-        />
-        {showLabel && <div>{metric.label}</div>}
-      </div>
+        className="mtrVis__value"
+        style={{
+          fontSize: `${fontSize}pt`,
+          color: metric.color,
+        }}
+        /*
+         * Justification for dangerouslySetInnerHTML:
+         * This is one of the visualizations which makes use of the HTML field formatters.
+         * Since these formatters produce raw HTML, this visualization needs to be able to render them as-is, relying
+         * on the field formatter to only produce safe HTML.
+         * `metric.value` is set by the MetricVisComponent, so this component must make sure this value never contains
+         * any unsafe HTML (e.g. by bypassing the field formatter).
+         */
+        dangerouslySetInnerHTML={{ __html: metric.value }} // eslint-disable-line react/no-danger
+      />
+      {showLabel && <div>{metric.label}</div>}
+    </div>
+  );
+
+  if (onFilter) {
+    return (
+      <button style={{ display: 'block' }} onClick={() => onFilter(metric)}>
+        {metricComponent}
+      </button>
     );
-
-    if (hasFilter) {
-      return <EuiKeyboardAccessible>{metricComponent}</EuiKeyboardAccessible>;
-    }
-
-    return metricComponent;
   }
-}
+
+  return metricComponent;
+};

x-pack/plugins/graph/public/components/field_manager/field_editor.tsx

@@ -20,7 +20,6 @@ import {
   EuiFlexItem,
   EuiButtonEmpty,
   EuiButton,
-  EuiKeyboardAccessible,
   EuiForm,
   EuiSpacer,
   EuiIconTip,
@@ -212,12 +211,9 @@ export function FieldEditor({
               defaultMessage: 'Edit',
             }),
             width: 380,
+            initialFocusedItemIndex: -1,
             content: (
               <EuiForm className="gphFieldEditor__displayForm">
-                {/* This is a workaround to prevent the field combo box from being focussed when opening the panel. */}
-                <EuiKeyboardAccessible>
-                  <span style={{ opacity: 0 }} onClick={() => {}} onKeyPress={() => {}} />
-                </EuiKeyboardAccessible>
                 <EuiFormRow
                   display="columnCompressed"
                   label={i18n.translate('xpack.graph.fieldManager.fieldLabel', {

x-pack/plugins/monitoring/public/components/chart/horizontal_legend.js

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { includes, isFunction } from 'lodash';
-import { EuiFlexItem, EuiFlexGroup, EuiIcon, EuiKeyboardAccessible } from '@elastic/eui';
+import { EuiFlexItem, EuiFlexGroup, EuiIcon } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import './horizontal_legend.scss';
@@ -69,29 +69,27 @@ export class HorizontalLegend extends React.Component {
     }
 
     return (
-      <EuiKeyboardAccessible key={rowIdx}>
-        <EuiFlexItem grow={false}>
-          <button
-            className={classes.join(' ')}
-            onClick={(event) => this.props.onToggle(event, row.id)}
-          >
-            <span className="monRhythmChart__legendLabel">
-              <EuiIcon
-                className="monRhythmChart__legendIndicator"
-                aria-label={i18n.translate(
-                  'xpack.monitoring.chart.horizontalLegend.toggleButtonAriaLabel',
-                  { defaultMessage: 'toggle button' }
-                )}
-                size="l"
-                type="dot"
-                color={row.color}
-              />
-              {' ' + row.label + ' '}
-            </span>
-            {this.formatter(this.props.seriesValues[row.id], row)}
-          </button>
-        </EuiFlexItem>
-      </EuiKeyboardAccessible>
+      <EuiFlexItem grow={false} key={rowIdx}>
+        <button
+          className={classes.join(' ')}
+          onClick={(event) => this.props.onToggle(event, row.id)}
+        >
+          <span className="monRhythmChart__legendLabel">
+            <EuiIcon
+              className="monRhythmChart__legendIndicator"
+              aria-label={i18n.translate(
+                'xpack.monitoring.chart.horizontalLegend.toggleButtonAriaLabel',
+                { defaultMessage: 'toggle button' }
+              )}
+              size="l"
+              type="dot"
+              color={row.color}
+            />
+            {' ' + row.label + ' '}
+          </span>
+          {this.formatter(this.props.seriesValues[row.id], row)}
+        </button>
+      </EuiFlexItem>
     );
   }
 

x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/assigned.js

@@ -9,7 +9,7 @@ import { get, sortBy } from 'lodash';
 import React from 'react';
 import { Shard } from './shard';
 import { calculateClass } from '../lib/calculate_class';
-import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiKeyboardAccessible } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink } from '@elastic/eui';
 import { getSafeForExternalLink } from '../../../../lib/get_safe_for_external_link';
 
 const generateQueryAndLink = (data) => {
@@ -62,21 +62,12 @@ export class Assigned extends React.Component {
       }
     }
 
-    // TODO: redesign for shard allocation, possibly giving shard display the
-    // ability to use the euiLink CSS class (blue link text instead of white link text)
-    // Disabling eslint because EuiKeyboardAccessible does it for us
-    /* eslint-disable jsx-a11y/click-events-have-key-events */
-    const name = (
-      <EuiKeyboardAccessible>
-        <a href={generateQueryAndLink(data)}>
-          <span>{data.name}</span>
-        </a>
-      </EuiKeyboardAccessible>
-    );
-    /* eslint-enable jsx-a11y/click-events-have-key-events */
+    // TODO: redesign for shard allocation
+    const name = <EuiLink href={generateQueryAndLink(data)}>{data.name}</EuiLink>;
     const master =
       data.node_type === 'master' ? <EuiIcon type="starFilledSpace" color="primary" /> : null;
     const shards = sortBy(data.children, 'shard').map(this.createShard);
+
     return (
       <EuiFlexItem
         grow={false}

x-pack/plugins/security_solution/public/resolver/view/process_event_dot.tsx

@@ -328,11 +328,7 @@ const UnstyledProcessEventDot = React.memo(
     );
 
     const nodeName = nodeModel.nodeName(node);
-
     /* eslint-disable jsx-a11y/click-events-have-key-events */
-    /**
-     * Key event handling (e.g. 'Enter'/'Space') is provisioned by the `EuiKeyboardAccessible` component
-     */
     return (
       <div
         data-test-subj="resolver:node"