Skip to content

Commit

Permalink
Remove all instances of EuiKeyboardAccessible (elastic#106910)
Browse files Browse the repository at this point in the history
* remove all instances of EuiKeyboardAccessible
  • Loading branch information
Michail Yasonik authored and vadimkibana committed Aug 8, 2021
1 parent 8f4b8c9 commit cca2437
Show file tree
Hide file tree
Showing 6 changed files with 69 additions and 112 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -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 changes: 37 additions & 61 deletions src/plugins/vis_type_metric/public/components/metric_vis_value.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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);
}
};

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,
});
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 = (
<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;
};
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import {
EuiFlexItem,
EuiButtonEmpty,
EuiButton,
EuiKeyboardAccessible,
EuiForm,
EuiSpacer,
EuiIconTip,
Expand Down Expand Up @@ -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', {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit cca2437

Please sign in to comment.