Pass title and aria attributes to EuiToken's icon element (#3195)

elastic · Mar 30, 2020 · f45e950 · f45e950
1 parent 88f1041
commit f45e950
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Improved `htmlIdGenerator` when supplying both `prefix` and `suffix` ([#3076](https://github.com/elastic/eui/pull/3076))
 - Updated pagination prop descriptions for `EuiInMemoryTable` ([#3142](https://github.com/elastic/eui/pull/3142))
+- Added `title` and `aria` attributes to `EuiToken`'s icon element ([#3195](https://github.com/elastic/eui/pull/3195))
 
 ## [`22.2.0`](https://github.com/elastic/eui/tree/v22.2.0)
 

diff --git a/src/components/token/__snapshots__/token.test.tsx.snap b/src/components/token/__snapshots__/token.test.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`EuiToken is rendered 1`] = `
 <span
-  aria-label="aria-label"
   class="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small testClass1 testClass2"
   data-test-subj="test subject string"
 >
   <div
+    aria-label="aria-label"
     data-euiicon-type="dot"
   />
 </span>

diff --git a/src/components/token/token.tsx b/src/components/token/token.tsx
@@ -89,6 +89,13 @@ export interface TokenProps {
    * Size of the token
    */
   size?: TokenSize;
+  /**
+   * The icon's title. Required for accessibility
+   */
+  title?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
 }
 
 export type EuiTokenProps = CommonProps &
@@ -103,6 +110,10 @@ export const EuiToken: FunctionComponent<EuiTokenProps> = ({
   size = 's',
   style = {},
   className,
+  title,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  'aria-describedby': ariaDescribedby,
   ...rest
 }) => {
   // Set the icon size to the same as the passed size
@@ -171,7 +182,14 @@ export const EuiToken: FunctionComponent<EuiTokenProps> = ({
 
   return (
     <span className={classes} style={style} {...rest}>
-      <EuiIcon type={iconType} size={finalSize} />
+      <EuiIcon
+        type={iconType}
+        size={finalSize}
+        title={title}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledby}
+        aria-describedby={ariaDescribedby}
+      />
     </span>
   );
 };