[ML] Invalid aria attributes on field type icon on Data Visualizer cards

[bhavyarm]

Kibana version: 6.4.0

Browser version: chrome latest

Browser OS version: OS X

Describe the bug: Aria attributes on data visualizer have invalid attributes.

Axe help: (https://dequeuniversity.com/rules/axe/3.0/aria-valid-attr-value?application=AxeChrome)

Screenshots (if relevant):

[elasticmachine]

Pinging @elastic/ml-ui

[peteharverson]

The underlying cause of this seems to be due to the behavior of the EuiToolTip component used in the field type icon, which adds an aria-describedby property referencing the ID of the tooltip contents which is only added to the DOM on hover. It may be better to change the behavior of the EUI tooltip, rather than manually removing the aria-describedby property in the ML FieldTypeIcon component which is passed to the element in the ...rest props via the change made in #19200.

#22298 would appear to have the same underlying issue.

This issue has also highlighted that the user should be able to tab to the field type icon on the Data Visualizer card. Will add tabIndex=0 to the span used as the icon container.

[peteharverson]

Issues highlighted above have been addressed in #22708:

• the field type icon is now keyboard accessible
• the text for the field type icon read by the screen reader is now the same as that in the tooltip, reading as e.g. 'keyword type'

Note that audit tools, such as the accessibility audit in the Chrome developer tools, will still report an 'invalid aria attribute' warning for the icon as the ID of the tooltip element referenced in the aria-describedby attribute is only added to the DOM on hover/keyboard focus. However the screen reader does read the text correctly (tested with ChromeVox and Windows narrator). Agreed with @bhavyarm that this issue can be closed since the screenreader is reading the text correctly.