Merge pull request #2270 from storybooks/fix-accessibility-warnings

Fix accessibility warnings
storybookjs · Nov 9, 2017 · 7f535b4 · 7f535b4
2 parents f48fbd3 + 36c7eb8
commit 7f535b4
Show file tree

Hide file tree

Showing 9 changed files with 128 additions and 149 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -74,7 +74,7 @@ module.exports = {
     'jsx-a11y/accessible-emoji': ignore,
     'jsx-a11y/href-no-hash': ignore,
     'jsx-a11y/label-has-for': ignore,
-    'jsx-a11y/click-events-have-key-events': warn,
+    'jsx-a11y/click-events-have-key-events': error,
     'jsx-a11y/anchor-is-valid': [warn, { aspects: ['invalidHref'] }],
     'react/no-unescaped-entities': ignore,
   },

diff --git a/addons/comments/src/manager/components/CommentItem/index.js b/addons/comments/src/manager/components/CommentItem/index.js
@@ -35,9 +35,9 @@ export default class CommentItem extends Component {
 
   renderDelete() {
     return (
-      <a style={style.commentDelete} onClick={this.deleteComment} role="button" tabIndex="0">
+      <button type="button" style={style.commentDelete} onClick={this.deleteComment}>
         delete
-      </a>
+      </button>
     );
   }
 

diff --git a/addons/comments/src/manager/components/CommentItem/style.js b/addons/comments/src/manager/components/CommentItem/style.js
@@ -54,5 +54,8 @@ export default {
     right: 0,
     fontSize: 11,
     color: 'rgb(200, 200, 200)',
+    border: 'none',
+    background: 'transparent',
+    padding: 0,
   },
 };
diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js
@@ -15,13 +15,13 @@ global.STORYBOOK_REACT_CLASSES = global.STORYBOOK_REACT_CLASSES || [];
 const { STORYBOOK_REACT_CLASSES } = global;
 
 const stylesheet = {
-  link: {
+  button: {
     base: {
       fontFamily: 'sans-serif',
       fontSize: '12px',
       display: 'block',
       position: 'fixed',
-      textDecoration: 'none',
+      border: 'none',
       background: '#28c',
       color: '#fff',
       padding: '5px 15px',
@@ -149,9 +149,9 @@ export default class Story extends React.Component {
   }
 
   _renderOverlay() {
-    const linkStyle = {
-      ...stylesheet.link.base,
-      ...stylesheet.link.topRight,
+    const buttonStyle = {
+      ...stylesheet.button.base,
+      ...stylesheet.button.topRight,
     };
 
     const infoStyle = Object.assign({}, stylesheet.info);
@@ -172,13 +172,13 @@ export default class Story extends React.Component {
     return (
       <div>
         <div style={this.state.stylesheet.children}>{this.props.children}</div>
-        <a style={linkStyle} onClick={openOverlay} role="button" tabIndex="0">
+        <button type="button" style={buttonStyle} onClick={openOverlay}>
           Show Info
-        </a>
+        </button>
         <div style={infoStyle}>
-          <a style={linkStyle} onClick={closeOverlay} role="button" tabIndex="0">
+          <button type="button" style={buttonStyle} onClick={closeOverlay}>
             ×
-          </a>
+          </button>
           <div style={this.state.stylesheet.infoPage}>
             <div style={this.state.stylesheet.infoBody}>
               {this._getInfoHeader()}

diff --git a/addons/knobs/src/components/types/Color.js b/addons/knobs/src/components/types/Color.js
@@ -13,6 +13,7 @@ const styles = {
     display: 'inline-block',
     cursor: 'pointer',
     width: '100%',
+    padding: 0,
   },
   popover: {
     position: 'absolute',
@@ -71,9 +72,9 @@ class ColorType extends React.Component {
     };
     return (
       <div id={knob.name}>
-        <div style={styles.swatch} onClick={this.handleClick} role="button" tabIndex="0">
+        <button type="button" style={styles.swatch} onClick={this.handleClick}>
           <div style={colorStyle} />
-        </div>
+        </button>
         {conditionalRender(
           displayColorPicker,
           () => (