[Draft] Make Slider and Hue Accessible

src/components/common/Hue.js

@@ -9,7 +9,9 @@ export class Hue extends (PureComponent || Component) {
 
   handleChange = (e) => {
     const change = hue.calculateChange(e, this.props.direction, this.props.hsl, this.container)
-    change && typeof this.props.onChange === 'function' && this.props.onChange(change, e)
+    if (change && typeof this.props.onChange === 'function') {
+      this.props.onChange(change, e)
+    }
   }
 
   handleMouseDown = (e) => {
@@ -74,6 +76,7 @@ export class Hue extends (PureComponent || Component) {
           onMouseDown={ this.handleMouseDown }
           onTouchMove={ this.handleChange }
           onTouchStart={ this.handleChange }
+          onKeyDown={ this.handleChange }
         >
           <style>{ `
             .hue-horizontal {

src/components/common/Swatch.js

@@ -4,8 +4,6 @@ import { handleFocus } from '../../helpers/interaction'
 
 import Checkboard from './Checkboard'
 
-const ENTER = 13
-
 export const Swatch = ({ color, style, onClick = () => {}, onHover, title = color,
   children, focus, focusStyle = {} }) => {
   const transparent = color === 'transparent'
@@ -25,7 +23,7 @@ export const Swatch = ({ color, style, onClick = () => {}, onHover, title = colo
   })
 
   const handleClick = e => onClick(color, e)
-  const handleKeyDown = e => e.keyCode === ENTER && onClick(color, e)
+  const handleKeyDown = e => e.key === 'Enter' && onClick(color, e)
   const handleHover = e => onHover(color, e)
 
   const optionalEvents = {}

src/components/slider/SliderPointer.js

@@ -16,7 +16,7 @@ export const SliderPointer = () => {
   })
 
   return (
-    <div style={ styles.picker } />
+    <div tabIndex={ 0 } style={ styles.picker } />
   )
 }
 

src/components/slider/SliderSwatch.js

@@ -35,8 +35,15 @@ export const SliderSwatch = ({ hsl, offset, onClick = () => {}, active, first, l
     source: 'hsl',
   }, e)
 
+  const handleKeyDown = e => e.key === 'Enter' && handleClick(e)
+
   return (
-    <div style={ styles.swatch } onClick={ handleClick } />
+    <div
+      tabIndex={ 0 }
+      style={ styles.swatch }
+      onClick={ e => handleClick(e) }
+      onKeyDown={ e => handleKeyDown(e) }
+    />
   )
 }
 

src/helpers/hue.js

@@ -1,12 +1,11 @@
 export const calculateChange = (e, direction, hsl, container) => {
   const containerWidth = container.clientWidth
   const containerHeight = container.clientHeight
-  const x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX
-  const y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY
-  const left = x - (container.getBoundingClientRect().left + window.pageXOffset)
-  const top = y - (container.getBoundingClientRect().top + window.pageYOffset)
 
   if (direction === 'vertical') {
+    const y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY
+    const top = y - (container.getBoundingClientRect().top + window.pageYOffset)
+
     let h
     if (top < 0) {
       h = 359
@@ -27,17 +26,41 @@ export const calculateChange = (e, direction, hsl, container) => {
       }
     }
   } else {
+    const prevH = hsl.h
+    // Each step is a 0.5% movement in the slider. Repeated key press is supported when
+    // onChange is used, but not onChangeComplete.
+    const ArrowStep = containerWidth / 200
+    const prevLeft = prevH * containerWidth / 360
+    let left
+    if (e.key === 'ArrowLeft') {
+      left = prevLeft - ArrowStep
+    }
+    if (e.key === 'ArrowRight') {
+      left = prevLeft + ArrowStep
+    }
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+      // Prevent web-app from scrolling horizontally, only the slider should be moving.
+      e.preventDefault()
+    }
+    if (!left && left !== 0) {
+      let x
+      if (typeof e.pageX === 'number') {
+        x = e.pageX
+      } else if (e.touches && e.touches.length) {
+        x = e.touches[0].pageX
+      }
+      left = x - (container.getBoundingClientRect().left + window.pageXOffset)
+    }
+
     let h
     if (left < 0) {
       h = 0
     } else if (left > containerWidth) {
       h = 359
     } else {
-      const percent = (left * 100) / containerWidth
-      h = ((360 * percent) / 100)
+      h = 360 * left / containerWidth
     }
-
-    if (hsl.h !== h) {
+    if ((h || h === 0) && prevH !== h) {
       return {
         h,
         s: hsl.s,