Accessability improvements

.eslintrc.js

@@ -5,7 +5,7 @@ module.exports = {
     es6: true,
     node: true
   },
-  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:jsx-a11y/recommended'],
   parserOptions: {
     ecmaFeatures: {
       experimentalObjectRestSpread: true,
@@ -13,14 +13,15 @@ module.exports = {
     },
     sourceType: 'module'
   },
-  plugins: ['react', 'import'],
+  plugins: ['react', 'import', 'jsx-a11y'],
   rules: {
     'react/prop-types': 'off',
     'react/display-name': 'off',
     'react/jsx-uses-react': 'error',
     'react/jsx-uses-vars': 'error',
     'import/no-unresolved': 'error',
-    'no-duplicate-imports': 'error'
+    'no-duplicate-imports': 'error',
+    'jsx-a11y/click-events-have-key-events': 'off'
   },
   settings: {
     react: {

components/BackgroundSelect.js

@@ -29,7 +29,7 @@ class BackgroundSelect extends React.PureComponent {
     return (
       <div className="bg-select-container">
         <div className={`bg-select-display ${isVisible ? 'is-visible' : ''}`}>
-          <div className="bg-color-container" onClick={toggleVisibility}>
+          <div role="button" tabIndex={0} className="bg-color-container" onClick={toggleVisibility}>
             <div className="bg-color-alpha" />
             <div className="bg-color" />
           </div>
@@ -43,6 +43,8 @@ class BackgroundSelect extends React.PureComponent {
           <div className="picker-tabs">
             {['color', 'image'].map(tab => (
               <div
+                role="button"
+                tabIndex={0}
                 key={tab}
                 className={`picker-tab ${mode === tab ? 'active' : ''}`}
                 onClick={this.selectTab.bind(null, tab)}

components/Dropdown.js

@@ -190,8 +190,7 @@ const SelectedItem = ({
 
   return (
     <span
-      {...getToggleButtonProps()}
+      {...getToggleButtonProps({ tabIndex: 0 })}
-      tabIndex="0"
       className={`dropdown-display ${isOpen ? 'is-open' : ''}`}
     >
       <input
@@ -267,7 +266,7 @@ const ListItem = ({ children, color, isHighlighted, isSelected, itemWrapper, ite
   const itemColor = color || COLORS.SECONDARY
 
   return (
-    <li {...rest} role="option" className="dropdown-list-item">
+    <li {...rest} className="dropdown-list-item">
       {itemWrapper ? (
         itemWrapper({ children, color: itemColor, item, isSelected })
       ) : (

components/Footer.js

@@ -6,7 +6,9 @@ const Footer = () => (
   <footer role="contentinfo" className="mt3">
     <nav className="mt3">
       <Link href="/about">
-        <a className="link">about</a>
+        <a className="link" href="/about">
+          about
+        </a>
       </Link>
       <a className="link" href="https://github.com/dawnlabs/carbon/issues/new">
         send feedback

components/ImagePicker.js

@@ -249,9 +249,7 @@ export default class ImagePicker extends React.Component {
           <div className="image-container">
             <div className="label">
               <span>Background image</span>
-              <a href="#" onClick={this.removeImage}>
+              <button onClick={this.removeImage}>&times;</button>
-                &times;
-              </a>
             </div>
             <ReactCrop
               src={this.props.imageDataURL}
@@ -267,6 +265,18 @@ export default class ImagePicker extends React.Component {
           </div>
           <style jsx>
             {`
+              button {
+                cursor: pointer;
+                color: inherit;
+                appearance: none;
+                border: none;
+                background: none;
+                display: block;
+                padding: 0;
+                margin: 0;
+                line-height: 16px;
+              }
+
               .settings-container img {
                 width: 100%;
               }

components/ListSetting.js

@@ -26,7 +26,13 @@ class ListSetting extends React.Component {
 
   renderListItems() {
     return this.props.items.map(item => (
-      <div className="list-item" key={item.id} onClick={this.select.bind(null, item.id)}>
+      <div
+        role="button"
+        tabIndex={0}
+        className="list-item"
+        key={item.id}
+        onClick={this.select.bind(null, item.id)}
+      >
         {this.props.children(item)}
         {this.props.selected === item.id ? <Checkmark /> : null}
         <style jsx>
@@ -61,7 +67,12 @@ class ListSetting extends React.Component {
 
     return (
       <div className="list-select-container">
-        <div className={`display ${isVisible ? 'is-visible' : ''}`} onClick={this.toggle}>
+        <div
+          role="button"
+          tabIndex={0}
+          className={`display ${isVisible ? 'is-visible' : ''}`}
+          onClick={this.toggle}
+        >
           <span className="label">{title}</span>
           {children(selectedItem)}
         </div>

components/RandomImage.js

@@ -83,8 +83,12 @@ class RandomImage extends React.Component {
     return (
       <div className="random-image-container">
         <div className="controls">
-          <span onClick={this.selectImage}>Use Image</span>
+          <span role="button" tabIndex={0} onClick={this.selectImage}>
-          <span onClick={this.nextImage}>Try Another</span>
+            Use Image
+          </span>
+          <span role="button" tabIndex={0} onClick={this.nextImage}>
+            Try Another
+          </span>
         </div>
         <div className="image">{this.state.loading && <Spinner />}</div>
         {photographer && <PhotoCredit photographer={photographer} />}

components/ThemeSelect.js

@@ -17,6 +17,8 @@ class ThemeSelect extends React.Component {
       const Img = WINDOW_THEMES_MAP[theme]
       return (
         <div
+          role="button"
+          tabIndex={0}
           className={`theme ${this.props.selected === theme ? 'selected' : ''}`}
           key={theme}
           onClick={this.select.bind(null, theme)}

components/Themes.js

@@ -192,7 +192,7 @@ const ThemeItem = ({ children, item, isSelected, onClick }) => (
   <div className="theme-item">
     {children}
     {item.custom && !isSelected && (
-      <div className="icon" onClick={onClick(item.id)}>
+      <div role="button" tabIndex={0} className="icon" onClick={onClick(item.id)}>
         <RemoveIcon color={COLORS.SECONDARY} />
       </div>
     )}

components/Toggle.js

@@ -12,7 +12,13 @@ class Toggle extends React.PureComponent {
 
   render() {
     return (
-      <div className={`toggle ${this.props.className}`} onClick={this.toggle}>
+      <div
+        role="checkbox"
+        tabIndex={0}
+        className={`toggle ${this.props.className}`}
+        onClick={this.toggle}
+        aria-checked={this.props.enabled}
+      >
         <span className="label">{this.props.label}</span>
         {this.props.enabled ? <Checkmark /> : <div className="checkmark-disabled" />}
         <style jsx>

package.json

@@ -59,6 +59,7 @@
     "cypress": "^3.1.4",
     "eslint": "^5.12.0",
     "eslint-plugin-import": "^2.11.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "^7.12.3",
     "husky": "^1.3.1",
     "lint-staged": "^8.1.0",

yarn.lock

@@ -1152,6 +1152,14 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+aria-query@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-3.0.0.tgz#65b3fcc1ca1155a8c9ae64d6eee297f15d5133cc"
+  integrity sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w=
+  dependencies:
+    ast-types-flow "0.0.7"
+    commander "^2.11.0"
+
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
@@ -1255,6 +1263,11 @@ assign-symbols@^1.0.0:
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
   integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
 
+ast-types-flow@0.0.7, ast-types-flow@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
+  integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=
+
 async-each@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
@@ -1323,6 +1336,13 @@ axios@^0.18.0:
     follow-redirects "^1.3.0"
     is-buffer "^1.1.5"
 
+axobject-query@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.0.2.tgz#ea187abe5b9002b377f925d8bf7d1c561adf38f9"
+  integrity sha512-MCeek8ZH7hKyO1rWUbKNQBbl4l2eY0ntk7OGi+q0RlafrCnfPxC06WZA+uebCfmYp4mNU9jRBP1AhGyf8+W3ww==
+  dependencies:
+    ast-types-flow "0.0.7"
+
 babel-core@7.0.0-bridge.0:
   version "7.0.0-bridge.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
@@ -1912,7 +1932,7 @@ commander@2.11.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
   integrity sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==
 
-commander@^2.14.1, commander@^2.9.0:
+commander@^2.11.0, commander@^2.14.1, commander@^2.9.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
   integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
@@ -2234,6 +2254,11 @@ cypress@^3.1.4:
     url "0.11.0"
     yauzl "2.8.0"
 
+damerau-levenshtein@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"
+  integrity sha1-AxkcQyy27qFou3fzpV/9zLiXhRQ=
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -2523,6 +2548,11 @@ emitter-mixin@0.0.3:
   resolved "https://registry.yarnpkg.com/emitter-mixin/-/emitter-mixin-0.0.3.tgz#5948cb286f2e48edc3b251a7cfc1f7883396d65c"
   integrity sha1-WUjLKG8uSO3DslGnz8H3iDOW1lw=
 
+emoji-regex@^6.5.1:
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.5.1.tgz#9baea929b155565c11ea41c6626eaa65cef992c2"
+  integrity sha512-PAHp6TxrCy7MGMFidro8uikr+zlJJKJ/Q6mm2ExZ7HwkyR9lSVFfE3kt36qcwa24BQL7y0G9axycGjK1A/0uNQ==
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -2656,6 +2686,20 @@ eslint-plugin-import@^2.11.0:
     read-pkg-up "^2.0.0"
     resolve "^1.6.0"
 
+eslint-plugin-jsx-a11y@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.1.2.tgz#69bca4890b36dcf0fe16dd2129d2d88b98f33f88"
+  integrity sha512-7gSSmwb3A+fQwtw0arguwMdOdzmKUgnUcbSNlo+GjKLAQFuC2EZxWqG9XHRI8VscBJD5a8raz3RuxQNFW+XJbw==
+  dependencies:
+    aria-query "^3.0.0"
+    array-includes "^3.0.3"
+    ast-types-flow "^0.0.7"
+    axobject-query "^2.0.1"
+    damerau-levenshtein "^1.0.4"
+    emoji-regex "^6.5.1"
+    has "^1.0.3"
+    jsx-ast-utils "^2.0.1"
+
 eslint-plugin-react@^7.12.3:
   version "7.12.3"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.12.3.tgz#b9ca4cd7cd3f5d927db418a1950366a12d4568fd"