Alternative text for the FontIcon
* refactor(FontIcon): remove unused attribute * feat(a11y): set aria-label attribute to the iconold
parent
78895c0e18
commit
51d58eb7a5
|
@ -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: ''
|
||||
};
|
||||
|
||||
|
|
|
@ -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.|
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
||||
|
|
Loading…
Reference in New Issue