Alternative text for the FontIcon

* refactor(FontIcon): remove unused attribute * feat(a11y): set aria-label attribute to the icon
react-toolbox · Jan 11, 2017 · 51d58eb · 51d58eb
1 parent 78895c0
commit 51d58eb
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/components/font_icon/FontIcon.js b/components/font_icon/FontIcon.js
@@ -1,18 +1,19 @@
 import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 
-const FontIcon = ({ children, className, value, ...other}) => (
+const FontIcon = ({ alt, children, className, value, ...other}) => (
   <span
     data-react-toolbox='font-icon'
+    aria-label={alt}
     className={classnames({'material-icons': typeof value === 'string' || typeof children === 'string'}, className)}
     {...other}
   >
-    {value}
-    {children}
+    <span aria-hidden="true">{value}</span>
   </span>
 );
 
 FontIcon.propTypes = {
+  alt: PropTypes.string,
   children: PropTypes.any,
   className: PropTypes.string,
   value: PropTypes.oneOfType([
@@ -22,6 +23,7 @@ FontIcon.propTypes = {
 };
 
 FontIcon.defaultProps = {
+  alt: '',
   className: ''
 };
 

diff --git a/components/font_icon/readme.md b/components/font_icon/readme.md
@@ -20,6 +20,6 @@ const FontIcons = () => (
 
 | Name            | Type                    | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `children`      | `String`                |                 | The key string for the icon you want to be displayed.|
+| `alt`     | `String`                | `''`            | The text used to set the `aria-label` attribute. 
 | `className`     | `String`                | `''`            | The class name to give custom styles such as sizing.|
 | `value`         | `String` or `Element`   |                 | The key string for the icon you want be displayed.|
diff --git a/spec/components/font_icon.js b/spec/components/font_icon.js
@@ -6,11 +6,11 @@ const FontIconTest = () => (
     <h5>Font Icons</h5>
     <p>lorem ipsum...</p>
 
-    <FontIcon value="add"/>
-    <FontIcon value="access_alarm"/>
-    <FontIcon value="explore"/>
-    <FontIcon value="zoom_in"/>
-    <FontIcon>input</FontIcon>
+    <FontIcon value="add" alt="add icon" />
+    <FontIcon value="access_alarm" />
+    <FontIcon value="explore" alt="explore icon" />
+    <FontIcon value="zoom_in" alt="zoom icon" />
+    <FontIcon alt="input icon">input</FontIcon>
   </section>
 );