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

peteharverson · Sep 5, 2018 · e562784 · e562784
1 parent 2a95660
commit e562784
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/...k/plugins/ml/public/components/field_type_icon/__snapshots__/field_type_icon.test.js.snap b/...k/plugins/ml/public/components/field_type_icon/__snapshots__/field_type_icon.test.js.snap
@@ -2,16 +2,16 @@
 
 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"
 />
 `;
 
 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=""
 />
 `;
diff --git a/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.js b/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.js
@@ -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} />
       ) : (

diff --git a/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.test.js b/x-pack/plugins/ml/public/components/field_type_icon/field_type_icon.test.js
@@ -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();
   });