fix: icon story accessibility (#28)

fix: icon story accessibility
storybookjs · Jun 24, 2019 · c5660f6 · c5660f6
2 parents 3b56f36 + e3bd926
commit c5660f6
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/src/components/Icon.js b/src/components/Icon.js
@@ -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}>

diff --git a/src/components/Icon.stories.js b/src/components/Icon.stories.js
@@ -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;
@@ -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)
@@ -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>
         ))}
@@ -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>
   ));