maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Remove all instances of EuiKeyboardAccessible (#106910)

Browse source 
* remove all instances of EuiKeyboardAccessible
This commit is contained in:
Michail Yasonik 2021-07-28 17:19:46 -04:00 committed by GitHub
parent 3612a7a300
commit 28fcd5977d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 69 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/plugins/vis_type_metric/public/components/metric_vis_value.test.tsx
View file

@ -14,16 +14,16 @@ import { MetricVisValue } from './metric_vis_value';
const baseMetric = { label: 'Foo', value: 'foo' } as any; const baseMetric = { label: 'Foo', value: 'foo' } as any;
describe('MetricVisValue', () => { 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( const component = shallow(
<MetricVisValue fontSize={12} metric={baseMetric} onFilter={() => {}} /> <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} />); 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', () => { it('should add -isfilterable class if onFilter is provided', () => {
@ -46,7 +46,7 @@ describe('MetricVisValue', () => {
const component = shallow( const component = shallow(
<MetricVisValue fontSize={12} metric={baseMetric} onFilter={onFilter} /> <MetricVisValue fontSize={12} metric={baseMetric} onFilter={onFilter} />
); );
component.find('.mtrVis__container-isfilterable').simulate('click'); component.simulate('click');
expect(onFilter).toHaveBeenCalledWith(baseMetric); expect(onFilter).toHaveBeenCalledWith(baseMetric);
}); });
}); });

98
src/plugins/vis_type_metric/public/components/metric_vis_value.tsx
View file

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

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

@ -20,7 +20,6 @@ import {
EuiFlexItem, EuiFlexItem,
EuiButtonEmpty, EuiButtonEmpty,
EuiButton, EuiButton,
EuiKeyboardAccessible,
EuiForm, EuiForm,
EuiSpacer, EuiSpacer,
EuiIconTip, EuiIconTip,
@ -212,12 +211,9 @@ export function FieldEditor({
defaultMessage: 'Edit', defaultMessage: 'Edit',
}), }),
width: 380, width: 380,
initialFocusedItemIndex: -1,
content: ( content: (
<EuiForm className="gphFieldEditor__displayForm"> <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 <EuiFormRow
display="columnCompressed" display="columnCompressed"
label={i18n.translate('xpack.graph.fieldManager.fieldLabel', { label={i18n.translate('xpack.graph.fieldManager.fieldLabel', {

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

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

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

@ -9,7 +9,7 @@ import { get, sortBy } from 'lodash';
import React from 'react'; import React from 'react';
import { Shard } from './shard'; import { Shard } from './shard';
import { calculateClass } from '../lib/calculate_class'; 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'; import { getSafeForExternalLink } from '../../../../lib/get_safe_for_external_link';
const generateQueryAndLink = (data) => { const generateQueryAndLink = (data) => {
@ -62,21 +62,12 @@ export class Assigned extends React.Component {
} }
} }
// TODO: redesign for shard allocation, possibly giving shard display the // TODO: redesign for shard allocation
// ability to use the euiLink CSS class (blue link text instead of white link text) const name = <EuiLink href={generateQueryAndLink(data)}>{data.name}</EuiLink>;
// 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 */
const master = const master =
data.node_type === 'master' ? <EuiIcon type="starFilledSpace" color="primary" /> : null; data.node_type === 'master' ? <EuiIcon type="starFilledSpace" color="primary" /> : null;
const shards = sortBy(data.children, 'shard').map(this.createShard); const shards = sortBy(data.children, 'shard').map(this.createShard);
return ( return (
<EuiFlexItem <EuiFlexItem
grow={false} grow={false}

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

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