* remove all instances of EuiKeyboardAccessible Co-authored-by: Michail Yasonik <michail.yasonik@elastic.co>
This commit is contained in:
parent
8e7c5fe726
commit
cbdacde69d
6 changed files with 69 additions and 112 deletions
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
|
|
@ -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', {
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in a new issue