Remove all instances of EuiKeyboardAccessible (#106910)
* remove all instances of EuiKeyboardAccessible
This commit is contained in:
parent
3612a7a300
commit
28fcd5977d
|
@ -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);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -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,47 +18,22 @@ interface MetricVisValueProps {
|
||||||
showLabel?: boolean;
|
showLabel?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export class MetricVisValue extends Component<MetricVisValueProps> {
|
export const MetricVisValue = ({ fontSize, metric, onFilter, showLabel }: 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', {
|
const containerClassName = classNames('mtrVis__container', {
|
||||||
// eslint-disable-next-line @typescript-eslint/naming-convention
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
||||||
'mtrVis__container--light': metric.lightText,
|
'mtrVis__container--light': metric.lightText,
|
||||||
// eslint-disable-next-line @typescript-eslint/naming-convention
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
||||||
'mtrVis__container-isfilterable': hasFilter,
|
'mtrVis__container-isfilterable': onFilter,
|
||||||
});
|
});
|
||||||
|
|
||||||
const metricComponent = (
|
const metricComponent = (
|
||||||
<div
|
<div className={containerClassName} style={{ backgroundColor: metric.bgColor }}>
|
||||||
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
|
<div
|
||||||
className="mtrVis__value"
|
className="mtrVis__value"
|
||||||
style={metricValueStyle}
|
style={{
|
||||||
|
fontSize: `${fontSize}pt`,
|
||||||
|
color: metric.color,
|
||||||
|
}}
|
||||||
/*
|
/*
|
||||||
* Justification for dangerouslySetInnerHTML:
|
* Justification for dangerouslySetInnerHTML:
|
||||||
* This is one of the visualizations which makes use of the HTML field formatters.
|
* This is one of the visualizations which makes use of the HTML field formatters.
|
||||||
|
@ -75,10 +48,13 @@ export class MetricVisValue extends Component<MetricVisValueProps> {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
if (hasFilter) {
|
if (onFilter) {
|
||||||
return <EuiKeyboardAccessible>{metricComponent}</EuiKeyboardAccessible>;
|
return (
|
||||||
|
<button style={{ display: 'block' }} onClick={() => onFilter(metric)}>
|
||||||
|
{metricComponent}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return metricComponent;
|
return metricComponent;
|
||||||
}
|
};
|
||||||
}
|
|
||||||
|
|
|
@ -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', {
|
||||||
|
|
|
@ -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,8 +69,7 @@ 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)}
|
||||||
|
@ -91,7 +90,6 @@ export class HorizontalLegend extends React.Component {
|
||||||
{this.formatter(this.props.seriesValues[row.id], row)}
|
{this.formatter(this.props.seriesValues[row.id], row)}
|
||||||
</button>
|
</button>
|
||||||
</EuiFlexItem>
|
</EuiFlexItem>
|
||||||
</EuiKeyboardAccessible>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in a new issue