Accessability improvements

6 years ago · de9574ef7c
parent 4937024757
commit de9574ef7c
12 changed files with 100 additions and 18 deletions
--- a/.eslintrc.js
+++ b/.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: {
--- a/components/BackgroundSelect.js
+++ b/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)}
--- a/components/Dropdown.js
+++ b/components/Dropdown.js
@ -190,8 +190,7 @@ const SelectedItem = ({

  return (
    <span
-      {...getToggleButtonProps()}
-      tabIndex="0"
+      {...getToggleButtonProps({ 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 })
      ) : (
--- a/components/Footer.js
+++ b/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
--- a/components/ImagePicker.js
+++ b/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}>
-                &times;
-              </a>
+              <button onClick={this.removeImage}>&times;</button>
            </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%;
              }
--- a/components/ListSetting.js
+++ b/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>
--- a/components/RandomImage.js
+++ b/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 onClick={this.nextImage}>Try Another</span>
+          <span role="button" tabIndex={0} onClick={this.selectImage}>
+            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} />}
--- a/components/ThemeSelect.js
+++ b/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)}
--- a/components/Themes.js
+++ b/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>
    )}
--- a/components/Toggle.js
+++ b/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>
--- a/package.json
+++ b/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",
--- a/yarn.lock
+++ b/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"