github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[ML] Makefield type icon component keyboard accessible (#22708)

Browse source
This commit is contained in:
Pete Harverson 2018-09-05 20:19:00 +01:00 • committed by GitHub
parent 865a51de0a
commit f647d6cd5c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

8
x-pack/plugins/ml/public/components/field_type_icon/__snapshots__/field_type_icon.test.js.snap
View file

@ -2,7 +2,7 @@
exports[`FieldTypeIcon render component when type matches a field type 1`] = `
<FieldTypeIconContainer
ariaLabel="Aggregatable string field"
ariaLabel="keyword type"
className="field-type-icon"
iconChar="t"
/>
@ -10,8 +10,8 @@ exports[`FieldTypeIcon render component when type matches a field type 1`] = `
exports[`FieldTypeIcon update component 1`] = `
<FieldTypeIconContainer
ariaLabel="Aggregatable string field"
className="field-type-icon"
iconChar="t"
ariaLabel="IP type"
className="field-type-icon kuiIcon fa-laptop"
iconChar=""
/>
`;

18
x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.js
View file

@ -20,31 +20,31 @@ export function FieldTypeIcon({ tooltipEnabled = false, type }) {
switch (type) {
case ML_JOB_FIELD_TYPES.BOOLEAN:
ariaLabel = 'Boolean field';
ariaLabel = 'boolean type';
iconClass = 'fa-adjust';
break;
case ML_JOB_FIELD_TYPES.DATE:
ariaLabel = 'Date field';
ariaLabel = 'date type';
iconClass = 'fa-clock-o';
break;
case ML_JOB_FIELD_TYPES.NUMBER:
ariaLabel = 'Metric field';
ariaLabel = 'number type';
iconChar = '#';
break;
case ML_JOB_FIELD_TYPES.GEO_POINT:
ariaLabel = 'Geo-point field';
ariaLabel = 'geo_point type';
iconClass = 'fa-globe';
break;
case ML_JOB_FIELD_TYPES.KEYWORD:
ariaLabel = 'Aggregatable string field';
ariaLabel = 'keyword type';
iconChar = 't';
break;
case ML_JOB_FIELD_TYPES.TEXT:
ariaLabel = 'String field';
ariaLabel = 'text type';
iconClass = 'fa-file-text-o';
break;
case ML_JOB_FIELD_TYPES.IP:
ariaLabel = 'IP address field';
ariaLabel = 'IP type';
iconClass = 'fa-laptop';
break;
default:
@ -69,7 +69,7 @@ export function FieldTypeIcon({ tooltipEnabled = false, type }) {
// to support having another component directly inside the tooltip anchor
// see https://github.com/elastic/eui/issues/839
return (
<EuiToolTip position="left" content={type}>
<EuiToolTip position="left" content={`${type} type`}>
<FieldTypeIconContainer {...containerProps} />
</EuiToolTip>
);
@ -86,7 +86,7 @@ FieldTypeIcon.propTypes = {
// To pass on its properties we apply `rest` to the outer `span` element.
function FieldTypeIconContainer({ ariaLabel, className, iconChar, ...rest }) {
return (
<span className="field-type-icon-container" {...rest} >
<span className="field-type-icon-container" {...rest} tabIndex="0">
{(iconChar === '') ? (
<span aria-label={ariaLabel} className={className} />
) : (

7
x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.test.js
View file

@ -8,6 +8,7 @@ import { mount, shallow } from 'enzyme';
import React from 'react';
import { FieldTypeIcon } from './field_type_icon';
import { ML_JOB_FIELD_TYPES } from '../../../common/constants/field_types';
describe('FieldTypeIcon', () => {
@ -22,12 +23,12 @@ describe('FieldTypeIcon', () => {
});
test(`render component when type matches a field type`, () => {
const wrapper = shallow(<FieldTypeIcon type="keyword" />);
const wrapper = shallow(<FieldTypeIcon type={ML_JOB_FIELD_TYPES.KEYWORD} />);
expect(wrapper).toMatchSnapshot();
});
test(`render with tooltip and test hovering`, () => {
const wrapper = mount(<FieldTypeIcon type="keyword" tooltipEnabled={true} />);
const wrapper = mount(<FieldTypeIcon type={ML_JOB_FIELD_TYPES.KEYWORD} tooltipEnabled={true} />);
const container = wrapper.find({ className: 'field-type-icon-container' });
expect(wrapper.find('EuiToolTip').children()).toHaveLength(1);
@ -42,7 +43,7 @@ describe('FieldTypeIcon', () => {
test(`update component`, () => {
const wrapper = shallow(<FieldTypeIcon />);
expect(wrapper.isEmptyRender()).toBeTruthy();
wrapper.setProps({ type: 'keyword' });
wrapper.setProps({ type: ML_JOB_FIELD_TYPES.IP });
expect(wrapper).toMatchSnapshot();
});