Merge pull request #2 from performant-software/feature/accessibility

Accessibility

.eslintrc.json

@@ -0,0 +1,41 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "airbnb"
+  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaFeatures": {
+        "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "class-methods-use-this": "off",
+    "comma-dangle": "off",
+    "jsx-quotes": ["error", "prefer-single"],
+    "lines-between-class-members": "off",
+    "max-len": ["error", { "code": 120 }],
+    "no-underscore-dangle": "off",
+    "no-use-before-define": "off",
+    "react/destructuring-assignment": "off",
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "react/jsx-no-bind": "off",
+    "react/no-did-update-set-state": "off",
+    "react/prefer-stateless-function": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/sort-comp": "off"
+  }
+}

.storybook/main.js

@@ -3,6 +3,7 @@ module.exports = {
     '../stories/**/*.stories.js'
   ],
   addons: [
+    '@storybook/addon-a11y/register',
     '@storybook/addon-actions',
     '@storybook/addon-knobs/register',
     '@storybook/addon-links'

package.json

@@ -18,8 +18,6 @@
   },
   "license": "ISC",
   "dependencies": {
-    "@storybook/addon-knobs": "^5.3.18",
-    "eslint": "^6.8.0",
     "i18next": "^19.4.4",
     "react": "^16.13.1",
     "react-color": "^2.18.1",
@@ -45,12 +43,20 @@
     "@rollup/plugin-babel": "^5.0.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
+    "@storybook/addon-a11y": "^5.3.18",
     "@storybook/addon-actions": "^5.3.18",
+    "@storybook/addon-knobs": "^5.3.18",
     "@storybook/addon-links": "^5.3.18",
     "@storybook/addons": "^5.3.18",
     "@storybook/react": "^5.3.18",
     "babel-loader": "^8.1.0",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.1.0",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^4.0.0",
     "flow-bin": "^0.123.0",
+    "react-scripts": "^3.4.1",
     "rollup": "^2.7.6",
     "rollup-plugin-postcss": "^3.1.1"
   }

src/semantic-ui/AssociatedDropdown.css

@@ -28,4 +28,8 @@
 
 .ui.form .wide.field .ui.input .association-dropdown input.dropdown-search-input {
   width: 100%;
+}
+
+.ui.dropdown:not(.button) > .default.text {
+  color: rgba(95, 95, 95, 0.86);
 }

src/semantic-ui/AssociatedDropdown.js

@@ -178,6 +178,7 @@ class AssociatedDropdown extends Component<Props, State> {
           placeholder={this.props.placeholder}
           search={() => this.state.options}
           searchInput={{
+            'aria-label': this.props.collectionName,
             className: 'dropdown-search-input',
             onKeyDown: Timer.clearSearchTimer.bind(this),
             onKeyUp: Timer.setSearchTimer.bind(this, this.onSearch.bind(this))

src/semantic-ui/ColorButton.js

@@ -21,6 +21,7 @@ const ColorButton = (props: Props) => (
       height: props.height,
       width: props.width
     }}
+    title='color-button'
   />
 );
 

src/semantic-ui/DataTable.js

@@ -218,7 +218,7 @@ class DataTable extends Component<Props, State> {
         icon={action.icon}
         key={`${action.name}-${index}`}
         onClick={action.onClick.bind(this, item)}
-        title={action.title}
+        title={action.title || action.name}
       />
     );
   }

src/semantic-ui/KeyboardField.js

@@ -86,6 +86,9 @@ class KeyboardField extends Component<Props, State> {
           className={this.props.className}
           error={this.props.error}
           id={this.props.id}
+          input={{
+            'aria-label': this.props.name
+          }}
           label={this.renderLabel()}
           name={this.props.name}
           onChange={this.onInputChange.bind(this)}

src/semantic-ui/ListTable.js

@@ -252,6 +252,9 @@ class ListTable extends Component<Props, State> {
       <Input
         type='text'
         icon='search'
+        input={{
+          'aria-label': 'search'
+        }}
         loading={this.state.loading}
         onKeyDown={Timer.clearSearchTimer.bind(this)}
         onKeyUp={Timer.setSearchTimer.bind(this, this.onSearch.bind(this))}

stories/components/common/Keyboard.stories.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { withA11y } from '@storybook/addon-a11y';
 import { action } from '@storybook/addon-actions';
 import { withKnobs  } from "@storybook/addon-knobs";
 import Keyboard from '../../../src/common/Keyboard';
@@ -10,7 +11,7 @@ import JapaneseLayout from 'simple-keyboard-layouts/build/layouts/japanese';
 
 export default {
   title: 'Components/Common/Keyboard',
-  decorators: [withKnobs]
+  decorators: [withA11y, withKnobs]
 };
 
 export const English = () => (

stories/components/semantic-ui/AssociatedDropdown.stories.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { withA11y } from '@storybook/addon-a11y';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, text } from '@storybook/addon-knobs';
 import { Form } from 'semantic-ui-react';
@@ -8,7 +9,7 @@ import AssociatedDropdown from '../../../src/semantic-ui/AssociatedDropdown';
 
 export default {
   title: 'Components/Semantic UI/AssociatedDropdown',
-  decorators: [withKnobs]
+  decorators: [withA11y, withKnobs]
 };
 
 const items = [{

stories/components/semantic-ui/BooleanIcon.stories.js

@@ -1,10 +1,11 @@
 import React from 'react';
+import { withA11y } from '@storybook/addon-a11y';
 import { withKnobs, boolean } from "@storybook/addon-knobs";
 import BooleanIcon from '../../../src/semantic-ui/BooleanIcon.js';
 
 export default {
   title: 'Components/Semantic UI/BooleanIcon',
-  decorators: [withKnobs]
+  decorators: [withA11y, withKnobs]
 };
 
 export const Default = () => <BooleanIcon value={boolean('Value', true)} />;

stories/components/semantic-ui/ColorButton.stories.js

@@ -1,11 +1,12 @@
 import React from 'react';
+import { withA11y } from '@storybook/addon-a11y';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, color, number } from "@storybook/addon-knobs";
 import ColorButton from '../../../src/semantic-ui/ColorButton';
 
 export default {
   title: 'Components/Semantic UI/ColorButton',
-  decorators: [withKnobs]
+  decorators: [withA11y, withKnobs]
 }
 
 export const Default = () => (

stories/components/semantic-ui/ColorPickerModal.stories.js

@@ -1,11 +1,12 @@
 import React from 'react';
+import { withA11y } from '@storybook/addon-a11y';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, color } from "@storybook/addon-knobs";
 import ColorPickerModal from '../../../src/semantic-ui/ColorPickerModal';
 
 export default {
   title: 'Components/Semantic UI/ColorPickerModal',
-  decorators: [withKnobs]
+  decorators: [withA11y, withKnobs]
 };
 
 export const Default = () => (

stories/components/semantic-ui/DataTable.stories.js

@@ -1,12 +1,13 @@
 import React from 'react';
+import { withA11y } from '@storybook/addon-a11y';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, number } from "@storybook/addon-knobs";
 import { Confirm, Header, Modal } from 'semantic-ui-react';
 import DataTable from '../../../src/semantic-ui/DataTable';
 
 export default {
   title: 'Components/Semantic UI/DataTable',
-  decorators: [withKnobs]
+  decorators: [withA11y, withKnobs]
 };
 
 const actions = [{

stories/components/semantic-ui/DescriptorField.stories.js

@@ -1,10 +1,11 @@
 import React from 'react';
+import { withA11y } from '@storybook/addon-a11y';
 import { withKnobs, number, text } from "@storybook/addon-knobs";
 import DescriptorField from '../../../src/semantic-ui/DescriptorField';
 
 export default {
   title: 'Components/Semantic UI/DescriptorField',
-  decorators: [withKnobs]
+  decorators: [withA11y, withKnobs]
 };
 
 export const Default = () => (

stories/components/semantic-ui/EmbeddedList.stories.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { withA11y } from '@storybook/addon-a11y';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, optionsKnob as options } from "@storybook/addon-knobs";
 import AddModal from '../AddModal';
@@ -7,7 +8,7 @@ import EmbeddedList from '../../../src/semantic-ui/EmbeddedList';
 
 export default {
   title: 'Components/Semantic UI/EmbeddedList',
-  decorators: [withKnobs]
+  decorators: [withA11y, withKnobs]
 }
 
 const actions = [{

stories/components/semantic-ui/FileUpload.stories.js

@@ -1,11 +1,12 @@
 import React from 'react';
+import { withA11y } from '@storybook/addon-a11y';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, array, number } from "@storybook/addon-knobs";
 import FileUpload from '../../../src/semantic-ui/FileUpload';
 
 export default {
   title: 'Components/Semantic UI/FileUpload',
-  decorators: [withKnobs]
+  decorators: [withA11y, withKnobs]
 };
 
 const fileTypes = [

stories/components/semantic-ui/GoogleMap.stories.js

@@ -1,11 +1,12 @@
 import React from 'react';
+import { withA11y } from '@storybook/addon-a11y';
 import { withKnobs } from "@storybook/addon-knobs";
 import Google from '../../../src/config/Google';
 import GoogleMap from '../../../src/semantic-ui/GoogleMap';
 
 export default {
   title: 'Components/Semantic UI/GoogleMap',
-  decorators: [withKnobs]
+  decorators: [withA11y, withKnobs]
 };
 
 export const Default = () => (

stories/components/semantic-ui/GooglePlacesSearch.stories.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { withA11y } from '@storybook/addon-a11y';
 import { action } from '@storybook/addon-actions';
 import { withKnobs } from "@storybook/addon-knobs";
 import { Input } from 'semantic-ui-react';
@@ -7,7 +8,7 @@ import GooglePlacesSearch from '../../../src/semantic-ui/GooglePlacesSearch';
 
 export default {
   title: 'Components/Semantic UI/GooglePlacesSearch',
-  decorators: [withKnobs]
+  decorators: [withA11y, withKnobs]
 };
 
 export const Default = () => (
@@ -19,7 +20,7 @@ export const Default = () => (
     onLocationSelection={action('location-selection')}
     style={{ display: 'inline' }}
   >
-    <Input type='text' />
+    <Input type='text' aria-label='places-search' />
   </GooglePlacesSearch>
 );
 
@@ -32,6 +33,6 @@ export const CustomInput = () => (
     onLocationSelection={action('location-selection')}
     style={{ display: 'inline' }}
   >
-    <Input type='text' icon='world' size='large' />
+    <Input type='text' icon='world' size='large' aria-label='places-search' />
   </GooglePlacesSearch>
 );

stories/components/semantic-ui/KeyboardField.stories.js

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
-import { action } from '@storybook/addon-actions';
+import { withA11y } from '@storybook/addon-a11y';
 import { withKnobs, boolean, text } from "@storybook/addon-knobs";
 import { Form } from 'semantic-ui-react';
 import English from 'simple-keyboard-layouts/build/layouts/english';
 import KeyboardField from '../../../src/semantic-ui/KeyboardField';
 
 export default {
   title: 'Components/Semantic UI/KeyboardField',
-  decorators: [withKnobs]
+  decorators: [withA11y, withKnobs]
 };
 
 export const Default = () => {
@@ -18,6 +18,7 @@ export const Default = () => {
       <KeyboardField
         label={text('Field name', 'Field')}
         layout={English}
+        name='test-field'
         onChange={(e, { value }) => setValue(value)}
         required={boolean('Required', false)}
         value={value}

stories/components/semantic-ui/LinkButton.stories.js

@@ -1,11 +1,12 @@
 import React from 'react';
+import { withA11y } from '@storybook/addon-a11y';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, text } from "@storybook/addon-knobs";
 import LinkButton from '../../../src/semantic-ui/LinkButton';
 
 export default {
   title: 'Components/Semantic UI/LinkButton',
-  decorators: [withKnobs]
+  decorators: [withA11y, withKnobs]
 };
 
 export const Default = () => (

stories/components/semantic-ui/LinkLabel.stories.js

@@ -1,18 +1,22 @@
 import React from 'react';
+import { withA11y } from '@storybook/addon-a11y';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, text } from '@storybook/addon-knobs';
 import { Form } from 'semantic-ui-react';
 import LinkLabel from '../../../src/semantic-ui/LinkLabel';
 
 export default {
   title: 'Components/Semantic UI/LinkLabel',
-  decorators: [withKnobs]
+  decorators: [withA11y, withKnobs]
 }
 
 export const Default = () => (
   <Form>
     <Form.Input
       name='field'
+      input={{
+        'aria-label': 'test-field'
+      }}
       label={() => (
         <LinkLabel
           content={text('Text', 'Click here')}

stories/components/semantic-ui/ListTable.stories.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { withA11y } from '@storybook/addon-a11y';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, number } from "@storybook/addon-knobs";
 import _ from 'underscore';
@@ -8,7 +9,7 @@ import ListTable from '../../../src/semantic-ui/ListTable';
 
 export default {
   title: 'Components/Semantic UI/ListTable',
-  decorators: [withKnobs]
+  decorators: [withA11y, withKnobs]
 };
 
 const actions = [{