Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: icon story accessibility #28

Merged
merged 1 commit into from
Jun 24, 2019
Merged

fix: icon story accessibility #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/components/Icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@ const Path = styled.path`
fill: currentColor;
`;

/**
* An Icon is a piece of visual element, but we must ensure its accessibility while using it.
* It can have 2 purposes:
* - decorative only: for example, it illustrate a label next to it. We must ensure that it is ignored by screen readers, by setting `aria-hidden` attribute (ex: <Icon icon="check" aria-hidden />)
* - non-decorative: it means that it delivers an information. For example, an icon as only child inn a button. The meaning can be obvious visually, but it must have a proper text alternative via `aria-label` for screen readers. (ex: <Icon icon="print" aria-label="Print this document" />)
*/
export function Icon({ icon, block, ...props }) {
return (
<Svg viewBox="0 0 1024 1024" width="20px" height="20px" block={block} {...props}>
Expand Down
15 changes: 8 additions & 7 deletions src/components/Icon.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ import { Icon } from './Icon';
import { icons } from './shared/icons';

const Meta = styled.div`
color: #999;
color: #666;
font-size: 12px;
`;

const Item = styled.div`
const Item = styled.li`
display: inline-flex;
flex-direction: row;
align-items: center;
Expand Down Expand Up @@ -43,9 +43,10 @@ const Item = styled.div`
`};
`;

const List = styled.div`
const List = styled.ul`
display: flex;
flex-flow: row wrap;
list-style: none;
`;

storiesOf('Design System|Icon', module)
Expand All @@ -56,7 +57,7 @@ storiesOf('Design System|Icon', module)
<List>
{Object.keys(icons).map(key => (
<Item key={key}>
<Icon icon={key} />
<Icon icon={key} aria-hidden />
<Meta>{key}</Meta>
</Item>
))}
Expand All @@ -67,18 +68,18 @@ storiesOf('Design System|Icon', module)
<List>
{Object.keys(icons).map(key => (
<Item minimal key={key}>
<Icon icon={key} />
<Icon icon={key} aria-label={key} />
</Item>
))}
</List>
))
.add('inline', () => (
<Fragment>
this is an inline <Icon icon="facehappy" /> icon (default)
this is an inline <Icon icon="facehappy" aria-label="Happy face" /> icon (default)
</Fragment>
))
.add('block', () => (
<Fragment>
this is a block <Icon icon="facehappy" block /> icon
this is a block <Icon icon="facehappy" aria-label="Happy face" block /> icon
</Fragment>
));