From f3f47bb93c40d368635a1685a580f4007cc8104f Mon Sep 17 00:00:00 2001
From: eddyionescu <eddyionescu@gmail.com>
Date: Sun, 26 Dec 2021 21:56:42 -0500
Subject: [PATCH] Make Slider and Hue Accessible

This commit addresses issue
https://github.com/casesandberg/react-color/issues/847 by making the hue
and slider swatch focusable and controllable using arrow keys.

It does this by setting tabIndex to zero and  adding onKeyDown
handlers to the SliderSwatch and Hue components.

It also changes the detection of keys to the key property rather than
keyCode which is deprecated
(https://www.w3schools.com/jsref/event_key_keycode.asp).

For updating the hue, changing the hue on the slider is
implemented in hue.js for horizontal sliders only.

For repeated key presses to work (ie. arrow key held down) the usage of
onChange is required, in addition to onChangeComplete, otherwise the
slider won't move while the arrow key is held down, rather needing to be
pressed many times. Resolving this within the package is the scope of a
future commit, as are tests and docs.
---
 src/components/common/Hue.js           |  5 +++-
 src/components/common/Swatch.js        |  4 +--
 src/components/slider/SliderPointer.js |  2 +-
 src/components/slider/SliderSwatch.js  |  9 +++++-
 src/helpers/hue.js                     | 39 ++++++++++++++++++++------
 5 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/src/components/common/Hue.js b/src/components/common/Hue.js
index 96c6e87d..92fc6cfa 100644
--- a/src/components/common/Hue.js
+++ b/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 {
diff --git a/src/components/common/Swatch.js b/src/components/common/Swatch.js
index 436dc62f..a01bda52 100644
--- a/src/components/common/Swatch.js
+++ b/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 = {}
diff --git a/src/components/slider/SliderPointer.js b/src/components/slider/SliderPointer.js
index 4d4d62fd..3ab283b1 100644
--- a/src/components/slider/SliderPointer.js
+++ b/src/components/slider/SliderPointer.js
@@ -16,7 +16,7 @@ export const SliderPointer = () => {
   })
 
   return (
-    <div style={ styles.picker } />
+    <div tabIndex={ 0 } style={ styles.picker } />
   )
 }
 
diff --git a/src/components/slider/SliderSwatch.js b/src/components/slider/SliderSwatch.js
index 933824cf..d982fb72 100644
--- a/src/components/slider/SliderSwatch.js
+++ b/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) }
+    />
   )
 }
 
diff --git a/src/helpers/hue.js b/src/helpers/hue.js
index fd94637d..2c5f40ef 100644
--- a/src/helpers/hue.js
+++ b/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,