Fix Multiselect, NumericStepper, Radio & RadioGroup lint issues

react/components/MultiSelect/DropdownList.js

@@ -34,6 +34,9 @@ export default class DropdownList extends PureComponent {
           key={index}
           onClick={() => this.handleSelect(index)}
           onMouseEnter={() => this.handleFocus(index)}
+          role="menuitem"
+          tabIndex="0"
+          onKeyPress={() => null}
         />
       )
     })
@@ -44,7 +47,9 @@ export default class DropdownList extends PureComponent {
           dangerouslySetInnerHTML={{ __html: emptyState }}
         />
       ) : (
-        <ul className="ph0 mv0 list">{optionList}</ul>
+        <ul role="menu" className="ph0 mv0 list">
+          {optionList}
+        </ul>
       )
 
     return (

react/components/NumericStepper/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-globals */
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
@@ -6,7 +7,7 @@ import styles from '../Input/Input.css'
 const normalizeMin = min => (min == null ? -Infinity : min)
 const normalizeMax = max => (max == null ? Infinity : max)
 
-const validateValue = (value, min, max, defaultValue) => {
+const validateValue = ({ value, min, max, defaultValue }) => {
   // This function always return a valid numeric value from the current input.
   // Compare with the function validateDisplayValue
   min = normalizeMin(min)
@@ -77,12 +78,12 @@ class NumericStepper extends Component {
   static getDerivedStateFromProps(props, state) {
     const { value, minValue, maxValue, defaultValue } = props
 
-    const validatedValue = validateValue(
+    const validatedValue = validateValue({
       value,
-      minValue,
-      maxValue,
-      defaultValue
-    )
+      min: minValue,
+      max: maxValue,
+      defaultValue,
+    })
 
     return {
       value: validatedValue,
@@ -111,15 +112,15 @@ class NumericStepper extends Component {
       displayValue,
     })
 
-    if (this.state.value !== validatedValue && onChange) {
-      // React synthetic events are reused for performance reasons.
-      // New properties added to it are never released.
-      // Calling event.persist() releases the event from the pool
-      // https://reactjs.org/docs/events.html#event-pooling
-      event.persist()
-      event.value = validatedValue
-      onChange(event)
-    }
+    if (this.state.value === validatedValue || !onChange) return
+
+    // React synthetic events are reused for performance reasons.
+    // New properties added to it are never released.
+    // Calling event.persist() releases the event from the pool
+    // https://reactjs.org/docs/events.html#event-pooling
+    event.persist()
+    event.value = validatedValue
+    onChange(event)
   }
 
   handleTypeQuantity = event => {

react/components/Radio/index.js

@@ -37,6 +37,9 @@ class Radio extends PureComponent {
         })}
         ref={this.container}
         onClick={this.handleContainerClick}
+        role="button"
+        tabIndex="0"
+        onKeyPress={() => null}
       >
         {/* This empty div is used so that the radio circle is not a direct child of
          * a flex element, and thus can set a fixed width. Otherwise, the width would

react/components/RadioGroup/index.js

@@ -61,6 +61,7 @@ class RadioGroup extends React.Component {
                     borderBottomRightRadius: 0,
                   }),
                 }}
+                htmlFor={id}
               >
                 <div className={classNames({ mt3: !hideBorder })}>
                   <Radio