Merge pull request #295 from mashmatrix/configure-eslint

Configure ESLint

.eslintrc.js

@@ -19,7 +19,7 @@ module.exports = {
     'import/no-extraneous-dependencies': ['error', {
       devDependencies: true,
     }],
-    'jsx-a11y/label-has-for': 1,
+    'jsx-a11y/label-has-for': 0,
 
     'no-await-in-loop': 0,
     'no-restricted-syntax': [2,
@@ -40,15 +40,15 @@ module.exports = {
 
     // TODO: Fix or disable
     'react/require-default-props': 1,
-    'react/destructuring-assignment': 1,
+    'react/destructuring-assignment': 0,
     'react/no-find-dom-node': 1,
-    'react/no-array-index-key': 1,
-    'react/button-has-type': 1,
+    'react/no-array-index-key': 2,
+    'react/button-has-type': 2,
     'jsx-a11y/click-events-have-key-events': 1,
-    'jsx-a11y/no-noninteractive-tabindex': 1,
-    'jsx-a11y/role-has-required-aria-props': 1,
+    'jsx-a11y/no-noninteractive-tabindex': 2,
+    'jsx-a11y/role-has-required-aria-props': 2,
     'jsx-a11y/anchor-is-valid': 1,
-    'jsx-a11y/interactive-supports-focus': 1,
-    'jsx-a11y/label-has-associated-control': 1
+    'jsx-a11y/interactive-supports-focus': 2,
+    'jsx-a11y/label-has-associated-control': [2, { assert: 'either' }],
   }
 };

src/scripts/AutoAlign.js

@@ -162,6 +162,7 @@ export default function autoAlign(options) {
           } catch (e) {
             targetEl = null;
           }
+          // eslint-disable-next-line react/destructuring-assignment
           const oldTriggerRect = this.state.triggerRect;
           if (targetEl) {
             const {
@@ -232,7 +233,9 @@ export default function autoAlign(options) {
       render() {
         const { triggerRect } = this.state;
         const {
+          // eslint-disable-next-line react/destructuring-assignment
           align = this.state.horizAlign,
+          // eslint-disable-next-line react/destructuring-assignment
           vertAlign = this.state.vertAlign,
           portalClassName: additionalPortalClassName,
           portalStyle: additionalPortalStyle = {},

src/scripts/Button.js

@@ -70,6 +70,7 @@ export default class Button extends Component {
     delete props.items;
 
     return (
+      // eslint-disable-next-line react/button-has-type
       <button
         ref={(node) => {
           this.node = node;

src/scripts/Datepicker.js

@@ -250,6 +250,7 @@ export default class Datepicker extends Component {
         <thead>
           <tr>
             {moment.weekdaysMin(true).map((wd, i) => (
+              // eslint-disable-next-line react/no-array-index-key
               <th key={i}>
                 <abbr title={moment.weekdays(true, i)}>{wd}</abbr>
               </th>
@@ -258,6 +259,7 @@ export default class Datepicker extends Component {
         </thead>
         <tbody>
           {cal.weeks.map((days, i) => (
+            // eslint-disable-next-line react/no-array-index-key
             <tr key={i}>
               {days.map(this.renderDate.bind(this, cal, selectedDate, today))}
             </tr>
@@ -302,6 +304,7 @@ export default class Datepicker extends Component {
       >
         <span
           className='slds-day'
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
           tabIndex={selectable ? 0 : -1}
           onClick={selectable ? this.onDateClick.bind(this, d.value) : null}
           onKeyDown={selectable ? this.onDateKeyDown.bind(this, d.value) : null}

src/scripts/DropdownButton.js

@@ -142,11 +142,11 @@ export default class DropdownButton extends Component {
       return (
         <div className='slds-button-group'>
           {isFirstInGroup ? null : (
-            <button className='slds-button' style={noneStyle} />
+            <button type='button' className='slds-button' style={noneStyle} />
           )}
           {button}
           {isLastInGroup ? null : (
-            <button className='slds-button' style={noneStyle} />
+            <button type='button' className='slds-button' style={noneStyle} />
           )}
         </div>
       );

src/scripts/Lookup.js

@@ -424,6 +424,7 @@ class LookupCandidateList extends Component {
           className='slds-lookup__item-action react-slds-candidate'
           tabIndex={-1}
           role='option'
+          aria-selected={false}
           onKeyDown={(e) => e.keyCode === 13 && this.onSelect(entry)}
           onBlur={this.props.onBlur}
           onClick={() => this.onSelect(entry)}
@@ -486,6 +487,7 @@ class LookupCandidateList extends Component {
       }
     };
     return (
+      // eslint-disable-next-line jsx-a11y/interactive-supports-focus
       <div
         ref={handleDOMRef}
         className={lookupMenuClassNames}

src/scripts/Table.js

@@ -17,6 +17,7 @@ export class TableHeader extends Component {
       const childSortable = child.props.sortable;
       nextChildren.push(
         React.cloneElement(child, {
+          // eslint-disable-next-line react/no-array-index-key
           key: index,
           sortable:
             typeof childSortable === 'undefined' ? sortable : childSortable,

stories/IconStories.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-array-index-key */
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';

stories/ModalStories.js

@@ -175,6 +175,7 @@ storiesOf('Modal', module)
                     <PicklistItem
                       value={i + 1}
                       label={`Item #${i + 1}`}
+                      // eslint-disable-next-line react/no-array-index-key
                       key={i}
                     />
                   ))}

test/breadcrumbs-spec.js

@@ -35,6 +35,7 @@ describe('BreadCrumbs', () => {
     const wrapper = shallow(
       <BreadCrumbs>
         {items.map((item, index) => (
+          // eslint-disable-next-line react/no-array-index-key
           <Crumb key={index} href={item.href}>
             {item.label}
           </Crumb>