feat(a11y): add alt attribute to set alternative text for the icon or image (#1102)
parent
46f535378d
commit
3859c464ff
|
@ -5,17 +5,18 @@ import { AVATAR } from '../identifiers.js';
|
||||||
import InjectFontIcon from '../font_icon/FontIcon.js';
|
import InjectFontIcon from '../font_icon/FontIcon.js';
|
||||||
|
|
||||||
const factory = (FontIcon) => {
|
const factory = (FontIcon) => {
|
||||||
const Avatar = ({children, className, cover, icon, image, theme, title, ...other}) => (
|
const Avatar = ({alt, children, className, cover, icon, image, theme, title, ...other}) => (
|
||||||
<div data-react-toolbox='avatar' className={classnames(theme.avatar, className)} {...other}>
|
<div data-react-toolbox='avatar' className={classnames(theme.avatar, className)} {...other}>
|
||||||
{children}
|
{children}
|
||||||
{cover && typeof image === 'string' && <span alt={title} className={theme.image} style={{backgroundImage: `url(${image})`}} />}
|
{cover && typeof image === 'string' && <span aria-label={alt} className={theme.image} style={{backgroundImage: `url(${image})`}} />}
|
||||||
{!cover && (typeof image === 'string' ? <img alt={title} className={theme.image} src={image} title={title} /> : image)}
|
{!cover && (typeof image === 'string' ? <img alt={alt} className={theme.image} src={image} /> : image)}
|
||||||
{typeof icon === 'string' ? <FontIcon className={theme.letter} value={icon} /> : icon}
|
{typeof icon === 'string' ? <FontIcon className={theme.letter} value={icon} alt={alt} /> : icon}
|
||||||
{title ? <span className={theme.letter}>{title[0]}</span> : null}
|
{title ? <span className={theme.letter}>{title[0]}</span> : null}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
Avatar.propTypes = {
|
Avatar.propTypes = {
|
||||||
|
alt: PropTypes.string,
|
||||||
children: PropTypes.node,
|
children: PropTypes.node,
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
cover: PropTypes.bool,
|
cover: PropTypes.bool,
|
||||||
|
@ -30,6 +31,7 @@ const factory = (FontIcon) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
Avatar.defaultProps = {
|
Avatar.defaultProps = {
|
||||||
|
alt: '',
|
||||||
cover: false
|
cover: false
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -30,6 +30,7 @@ If you want to provide a theme via context, the component key is `RTAvatar`.
|
||||||
|
|
||||||
| Name | Type | Default | Description|
|
| Name | Type | Default | Description|
|
||||||
|:-----|:-----|:-----|:-----|
|
|:-----|:-----|:-----|:-----|
|
||||||
|
| `alt` | `String` | `''` | An alternative text for the image or icon.|
|
||||||
| `children` | `Node` | | Children for the avatar. You can pass an SVG for a custom icon or, for example, an image.|
|
| `children` | `Node` | | Children for the avatar. You can pass an SVG for a custom icon or, for example, an image.|
|
||||||
| `className` | `String` | `''` | Set a class to style the Component.|
|
| `className` | `String` | `''` | Set a class to style the Component.|
|
||||||
| `cover` | `Boolean` | `''` | Set to true if your image is not squared so it will be used as a cover for the element.|
|
| `cover` | `Boolean` | `''` | Set to true if your image is not squared so it will be used as a cover for the element.|
|
||||||
|
|
|
@ -6,11 +6,12 @@ const AvatarTest = () => (
|
||||||
<section>
|
<section>
|
||||||
<h5>Avatars</h5>
|
<h5>Avatars</h5>
|
||||||
<p>Provide an image source or object, a font icon, children or a title to use its first letter.</p>
|
<p>Provide an image source or object, a font icon, children or a title to use its first letter.</p>
|
||||||
<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
|
<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" alt="icon folder" />
|
||||||
<Avatar icon={<GithubIcon />}/>
|
<Avatar icon={<GithubIcon />}/>
|
||||||
<Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
|
<Avatar><img src="https://placeimg.com/80/80/animals" alt="foobar"/></Avatar>
|
||||||
<Avatar image="https://placeimg.com/80/80/animals" />
|
<Avatar image="https://placeimg.com/80/80/animals" alt="foobar" />
|
||||||
<Avatar image="http://www.thewrap.com/wp-content/uploads/2015/08/margot-robbie-harley-quinn_main.jpg" cover />
|
<Avatar alt="foobar"
|
||||||
|
image="http://www.thewrap.com/wp-content/uploads/2015/08/margot-robbie-harley-quinn_main.jpg" cover />
|
||||||
<Avatar title="Javier"/>
|
<Avatar title="Javier"/>
|
||||||
<Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
|
<Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
|
||||||
</section>
|
</section>
|
||||||
|
|
Loading…
Reference in New Issue