Stop ignoring a11y rules

qramilq · Feb 17, 2018 · e5b73a3 · e5b73a3
1 parent d6b75c3
commit e5b73a3
Show file tree

Hide file tree

Showing 20 changed files with 109 additions and 34 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -78,8 +78,28 @@ module.exports = {
       },
     ],
     'react/no-unescaped-entities': ignore,
-    'jsx-a11y/accessible-emoji': ignore,
-    'jsx-a11y/label-has-for': ignore,
-    'jsx-a11y/anchor-is-valid': [warn, { aspects: ['invalidHref'] }],
+    'jsx-a11y/label-has-for': [
+      error,
+      {
+        required: {
+          some: ['nesting', 'id'],
+        },
+      },
+    ],
+    'jsx-a11y/anchor-is-valid': [
+      error,
+      {
+        components: ['RoutedLink', 'MenuLink', 'LinkTo', 'Link'],
+        specialLink: ['overrideParams', 'kind', 'story', 'to'],
+      },
+    ],
   },
+  overrides: [
+    {
+      files: ['**/react-native*/**', '**/REACT_NATIVE*/**', '**/crna*/**'],
+      rules: {
+        'jsx-a11y/accessible-emoji': ignore,
+      },
+    },
+  ],
 };
diff --git a/addons/events/src/components/Event.js b/addons/events/src/components/Event.js
@@ -145,7 +145,9 @@ export default class Item extends Component {
           disabled={failed}
           title="Submit event"
         >
-          📢
+          <span role="img" aria-label="loudspeaker">
+            📢
+          </span>
         </button>
         <Textarea
           id={`addon-event-${name}`}
@@ -155,11 +157,15 @@ export default class Item extends Component {
         />
         {isTextAreaShowed ? (
           <button style={styles.button} onClick={this.onToggleEditClick} title="Close editing">
-            ❌
+            <span role="img" aria-label="cross">
+              ❌
+            </span>
           </button>
         ) : (
           <button style={styles.button} onClick={this.onToggleEditClick} title="Edit event payload">
-            ✏️
+            <span role="img" aria-label="pencil">
+              ✏️
+            </span>
           </button>
         )}
       </div>

diff --git a/addons/storyshots/stories/directly_required/index.js b/addons/storyshots/stories/directly_required/index.js
@@ -6,4 +6,10 @@ import { Button } from '@storybook/react/demo';
 
 storiesOf('Another Button', module)
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);
+  .add('with some emoji', () => (
+    <Button onClick={action('clicked')}>
+      <span role="img" aria-label="so cool">
+        😀 😎 👍 💯
+      </span>
+    </Button>
+  ));
diff --git a/addons/storyshots/stories/required_with_context/Button.stories.js b/addons/storyshots/stories/required_with_context/Button.stories.js
@@ -6,4 +6,10 @@ import { Button } from '@storybook/react/demo';
 
 storiesOf('Button', module)
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);
+  .add('with some emoji', () => (
+    <Button onClick={action('clicked')}>
+      <span role="img" aria-label="so cool">
+        😀 😎 👍 💯
+      </span>
+    </Button>
+  ));
diff --git a/addons/viewport/src/components/RotateViewport.js b/addons/viewport/src/components/RotateViewport.js
@@ -10,8 +10,10 @@ export function RotateViewport({ active, ...props }) {
   };
   return (
     <div style={styles.row}>
-      <label style={styles.label}>Rotate</label>
-      <button {...props} style={actionStyles}>
+      <label htmlFor="rotate" style={styles.label}>
+        Rotate
+      </label>
+      <button id="rotate" {...props} style={actionStyles}>
         {active ? 'Vertical' : 'Landscape'}
       </button>
     </div>

diff --git a/addons/viewport/src/components/SelectViewport.js b/addons/viewport/src/components/SelectViewport.js
@@ -7,8 +7,10 @@ import * as styles from './styles';
 export function SelectViewport({ activeViewport, onChange }) {
   return (
     <div style={styles.row}>
-      <label style={styles.label}>Device</label>
-      <select style={styles.action} value={activeViewport} onChange={onChange}>
+      <label htmlFor="device" style={styles.label}>
+        Device
+      </label>
+      <select style={styles.action} id="device" value={activeViewport} onChange={onChange}>
         <option value={defaultViewport}>Default</option>
         {Object.keys(viewports).map(key => (
           <option value={key} key={key}>

diff --git a/docs/src/components/Homepage/MainLinks/index.js b/docs/src/components/Homepage/MainLinks/index.js
@@ -60,7 +60,12 @@ class MainLinks extends React.Component {
                   id="search"
                   placeholder="type to search"
                 />
-                <span className="form-control-feedback" aria-hidden="true">
+                <span
+                  className="form-control-feedback"
+                  role="img"
+                  aria-hidden="true"
+                  aria-label="magnifying glass"
+                >
                   🔍
                 </span>
               </div>

diff --git a/docs/src/pages/addons/introduction/index.md b/docs/src/pages/addons/introduction/index.md
@@ -68,7 +68,7 @@ storiesOf('Button', module)
     <Button onClick={action('clicked')}>Hello Button</Button>
   ))
   .add('with some emojies', () => (
-    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+    <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
   ));
 ```
 
@@ -102,7 +102,7 @@ storiesOf('Button', module)
     <Button onClick={action('clicked')}>Hello Button</Button>
   ))
   .add('with some emojies', () => (
-    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+    <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
   ));
 ```
 

diff --git a/docs/src/pages/addons/using-addons/index.md b/docs/src/pages/addons/using-addons/index.md
@@ -39,7 +39,7 @@ import Button from './Button';
 storiesOf('Button', module)
   .add('with some emoji', () => (
     <WithNotes notes={'Here we use some emoji as the Button text. Doesn&apos;t it look nice?'}>
-      <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+      <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
     </WithNotes>
   ));
 ```

diff --git a/docs/src/pages/addons/writing-addons/index.md b/docs/src/pages/addons/writing-addons/index.md
@@ -55,7 +55,7 @@ storiesOf('Button', module)
   ))
   .add('with some emoji', () => (
     <WithNotes notes={'Here we use some emoji as the Button text. Doesn&apos;t it look nice?'}>
-      <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+      <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
     </WithNotes>
   ));
 ```
@@ -216,7 +216,7 @@ storiesOf('Button', module)
   ))
   .add('with some emojies', () => (
     <WithNotes notes={'Here we use emojies as the Button text. Doesn&apos;t it look nice?'}>
-      <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+      <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
     </WithNotes>
   ));
 ```

diff --git a/docs/src/pages/basics/guide-react/index.md b/docs/src/pages/basics/guide-react/index.md
@@ -87,7 +87,7 @@ storiesOf('Button', module)
     <Button onClick={action('clicked')}>Hello Button</Button>
   ))
   .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+    <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
   ));   
 ```
 

diff --git a/docs/src/pages/basics/writing-stories/index.md b/docs/src/pages/basics/writing-stories/index.md
@@ -35,7 +35,7 @@ storiesOf('Button', module)
     <Button onClick={action('clicked')}>Hello Button</Button>
   ))
   .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+    <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
   ));
 ```
 
@@ -139,7 +139,7 @@ storiesOf('My App/Buttons/Simple', module)
 
 storiesOf('My App/Buttons/Emoji', module)
   .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+    <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
   ));
 ```
 

diff --git a/examples/cra-kitchen-sink/src/stories/index.js b/examples/cra-kitchen-sink/src/stories/index.js
@@ -90,7 +90,7 @@
 //   .add('with some emoji', () => (
 //     <Button onClick={action('clicked')}>
 //       {setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
-//       😀 😎 👍 💯
+//       <span role="img" aria-label="so cool">😀 😎 👍 💯</span>
 //     </Button>
 //   ))
 //   .add('with notes', () => (
@@ -315,12 +315,12 @@
 //   .add(
 //     'with a button and some emoji',
 //     withNotes('My notes on a button with emojies')(() => (
-//       <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+//       <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
 //     ))
 //   )
 //   .add('with old API', () => (
 //     <WithNotes notes="Hello">
-//       <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
+//       <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
 //     </WithNotes>
 //   ));
 
@@ -362,16 +362,16 @@
 // storiesOf('Cells/Molecules.Atoms/simple', module)
 //   .addDecorator(withKnobs)
 //   .add('with text', () => <Button>{text('buttonText', 'Hello Button')}</Button>)
-//   .add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);
+//   .add('with some emoji', () => <Button><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>);
 
 // storiesOf('Cells/Molecules/Atoms.more', module)
 //   .add('with text2', () => <Button>Hello Button</Button>)
-//   .add('with some emoji2', () => <Button>😀 😎 👍 💯</Button>);
+//   .add('with some emoji2', () => <Button><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>);
 
 // storiesOf('Cells/Molecules', module)
 //   .add('with text', () => <Button>Hello Button</Button>)
-//   .add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);
+//   .add('with some emoji', () => <Button><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>);
 
 // storiesOf('Cells.Molecules.Atoms', module)
 //   .add('with text2', () => <Button>Hello Button</Button>)
-//   .add('with some emoji2', () => <Button>😀 😎 👍 💯</Button>);
+//   .add('with some emoji2', () => <Button><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>);
diff --git a/examples/cra-kitchen-sink/src/stories/index.stories.js b/examples/cra-kitchen-sink/src/stories/index.stories.js
@@ -41,7 +41,9 @@ storiesOf('Button', module)
   .add('with some emoji', () => (
     <Button onClick={action('clicked')}>
       {setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
-      😀 😎 👍 💯
+      <span role="img" aria-label="so cool">
+        😀 😎 👍 💯
+      </span>
     </Button>
   ))
   .add('with notes', () => (

diff --git a/examples/official-storybook/addons.js b/examples/official-storybook/addons.js
@@ -7,6 +7,7 @@ import '@storybook/addon-knobs/register';
 import '@storybook/addon-backgrounds/register';
 import '@storybook/addon-a11y/register';
 import '@storybook/addon-jest/register';
+import '@storybook/addon-viewport/register';
 
 import addHeadWarning from './head-warning';
 

diff --git a/lib/cli/generators/METEOR/template/stories/index.stories.js b/lib/cli/generators/METEOR/template/stories/index.stories.js
@@ -10,4 +10,10 @@ storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo(
 
 storiesOf('Button', module)
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);
+  .add('with some emoji', () => (
+    <Button onClick={action('clicked')}>
+      <span role="img" aria-label="so cool">
+        😀 😎 👍 💯
+      </span>
+    </Button>
+  ));
diff --git a/lib/cli/generators/REACT/template/stories/index.stories.js b/lib/cli/generators/REACT/template/stories/index.stories.js
@@ -10,4 +10,10 @@ storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo(
 
 storiesOf('Button', module)
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);
+  .add('with some emoji', () => (
+    <Button onClick={action('clicked')}>
+      <span role="img" aria-label="so cool">
+        😀 😎 👍 💯
+      </span>
+    </Button>
+  ));
diff --git a/lib/cli/generators/REACT_SCRIPTS/template/src/stories/index.js b/lib/cli/generators/REACT_SCRIPTS/template/src/stories/index.js
@@ -10,4 +10,10 @@ storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo(
 
 storiesOf('Button', module)
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);
+  .add('with some emoji', () => (
+    <Button onClick={action('clicked')}>
+      <span role="img" aria-label="so cool">
+        😀 😎 👍 💯
+      </span>
+    </Button>
+  ));
diff --git a/lib/cli/generators/SFC_VUE/template/src/stories/index.stories.js b/lib/cli/generators/SFC_VUE/template/src/stories/index.stories.js
@@ -28,7 +28,8 @@ storiesOf('Button', module)
   }))
   .add('with some emoji', () => ({
     components: { MyButton },
-    template: '<my-button @click="action">😀 😎 👍 💯</my-button>',
+    template:
+      '<my-button @click="action"><span role="img" aria-label="so cool">😀 😎 👍 💯</span></my-button>',
     methods: { action: action('clicked') },
   }));
 

diff --git a/lib/cli/generators/WEBPACK_REACT/template/stories/index.stories.js b/lib/cli/generators/WEBPACK_REACT/template/stories/index.stories.js
@@ -10,4 +10,10 @@ storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo(
 
 storiesOf('Button', module)
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);
+  .add('with some emoji', () => (
+    <Button onClick={action('clicked')}>
+      <span role="img" aria-label="so cool">
+        😀 😎 👍 💯
+      </span>
+    </Button>
+  ));