Make EuiIconTip screen reader accessible. (#534)

elastic · Mar 16, 2018 · 711c660 · 711c660
1 parent ab57f00
commit 711c660
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/src-docs/src/views/tool_tip/icon_tip.js b/src-docs/src/views/tool_tip/icon_tip.js
@@ -30,6 +30,7 @@ export default () => (
     <EuiSpacer />
 
     <EuiIconTip
+      aria-label="Warning"
       type="alert"
       content="I do not think it means what you think it means"
     />

diff --git a/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap b/src/components/tool_tip/__snapshots__/icon_tip.test.js.snap
@@ -4,8 +4,10 @@ exports[`EuiIconTip is rendered 1`] = `
 <span>
   <svg
     aria-describedby="id"
+    aria-label="aria-label"
     class="euiIcon euiIcon--medium"
     height="16"
+    tabindex="0"
     viewBox="0 0 16 16"
     width="16"
     xmlns="http://www.w3.org/2000/svg"
@@ -24,8 +26,10 @@ exports[`EuiIconTip props type is rendered as the icon 1`] = `
 <span>
   <svg
     aria-describedby="id"
+    aria-label="Info"
     class="euiIcon euiIcon--medium"
     height="16"
+    tabindex="0"
     viewBox="0 0 16 16"
     width="16"
     xmlns="http://www.w3.org/2000/svg"

diff --git a/src/components/tool_tip/icon_tip.js b/src/components/tool_tip/icon_tip.js
@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 import { EuiIcon } from '../icon';
 import { EuiToolTip } from './tool_tip';
 
-export const EuiIconTip = ({ type, ...rest }) => (
+export const EuiIconTip = ({ type, 'aria-label': ariaLabel, ...rest }) => (
   <EuiToolTip {...rest}>
-    <EuiIcon type={type} />
+    <EuiIcon tabIndex="0" type={type} aria-label={ariaLabel} />
   </EuiToolTip>
 );
 
@@ -15,8 +15,14 @@ EuiIconTip.propTypes = {
    * The icon type.
    */
   type: PropTypes.string,
+
+  /**
+   * Explain what this icon means for screen readers.
+   */
+  'aria-label': PropTypes.string,
 };
 
 EuiIconTip.defaultProps = {
   type: 'questionInCircle',
+  'aria-label': 'Info',
 };