From cca2437b3517f87d7f2f972d1c3273c103282f6f Mon Sep 17 00:00:00 2001 From: Michail Yasonik Date: Wed, 28 Jul 2021 17:19:46 -0400 Subject: [PATCH] Remove all instances of EuiKeyboardAccessible (#106910) * remove all instances of EuiKeyboardAccessible --- .../components/metric_vis_value.test.tsx | 10 +- .../public/components/metric_vis_value.tsx | 98 +++++++------------ .../components/field_manager/field_editor.tsx | 6 +- .../components/chart/horizontal_legend.js | 46 +++++---- .../shard_allocation/components/assigned.js | 17 +--- .../resolver/view/process_event_dot.tsx | 4 - 6 files changed, 69 insertions(+), 112 deletions(-) diff --git a/src/plugins/vis_type_metric/public/components/metric_vis_value.test.tsx b/src/plugins/vis_type_metric/public/components/metric_vis_value.test.tsx index 58020df5d5fb..3c6402274a86 100644 --- a/src/plugins/vis_type_metric/public/components/metric_vis_value.test.tsx +++ b/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( {}} /> ); - 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(); - 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( ); - component.find('.mtrVis__container-isfilterable').simulate('click'); + component.simulate('click'); expect(onFilter).toHaveBeenCalledWith(baseMetric); }); }); diff --git a/src/plugins/vis_type_metric/public/components/metric_vis_value.tsx b/src/plugins/vis_type_metric/public/components/metric_vis_value.tsx index d11dd9b9055e..df10062fbb73 100644 --- a/src/plugins/vis_type_metric/public/components/metric_vis_value.tsx +++ b/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 { - onClick = () => { - if (this.props.onFilter) { - this.props.onFilter(this.props.metric); - } - }; - - onKeyPress = (event: KeyboardEvent) => { - 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 = ( +
-
- {showLabel &&
{metric.label}
} -
+ 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 &&
{metric.label}
} +
+ ); + + if (onFilter) { + return ( + ); - - if (hasFilter) { - return {metricComponent}; - } - - return metricComponent; } -} + + return metricComponent; +}; diff --git a/x-pack/plugins/graph/public/components/field_manager/field_editor.tsx b/x-pack/plugins/graph/public/components/field_manager/field_editor.tsx index 75eda292ee6d..d4ccfe66dc7d 100644 --- a/x-pack/plugins/graph/public/components/field_manager/field_editor.tsx +++ b/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: ( - {/* This is a workaround to prevent the field combo box from being focussed when opening the panel. */} - - {}} onKeyPress={() => {}} /> - - - - - + + + ); } diff --git a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/assigned.js b/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/assigned.js index 6815d0f441d4..aefcf0b99de1 100644 --- a/x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/assigned.js +++ b/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 = ( - - - {data.name} - - - ); - /* eslint-enable jsx-a11y/click-events-have-key-events */ + // TODO: redesign for shard allocation + const name = {data.name}; const master = data.node_type === 'master' ? : null; const shards = sortBy(data.children, 'shard').map(this.createShard); + return (