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

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

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

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

@ -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', {

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

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

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

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