feat: accessibility #46 (#47)

Author: mikbry

src/components/ColorBox/AlphaSlider.jsx

@@ -37,18 +37,14 @@ export default styled(({ color, ...other }) => <Slider {...other} />)`
     border-radius: 4px;
   }
   & .MuiSlider-thumb {
-    width: 8px;
-    border: 1px solid #9e9e9e;
-    height: 20px;
-    opacity: 0.8;
-    margin-top: -2px;
-    margin-left: -4px;
-    border-radius: 4px;
-    background-color: #fff;
-    &:focus,
-    &:hover,
-    &$active {
-      box-shadow: inherit;
+    width: 16px;
+    height: 16px;
+    margin-top: 0px;
+    margin-left: -8px;
+    background-color: #f0f0f0;
+    box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
+    &:focus {
+      box-shadow: 0px 0px 0px 8px rgba(63, 81, 181, 0.16);
     }
   }
 `;

src/components/ColorBox/HSVGradient.jsx

@@ -11,6 +11,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import * as CommonTypes from '../../helpers/commonTypes';
+import useEventCallback from '../../helpers/useEventCallback';
 
 const getRGB = _h => {
   let rgb;
@@ -61,43 +62,62 @@ const StyledRoot = styled.div`
     position: absolute;
     top: 0px;
     left: 0px;
+    border: 1px solid #f0f0f0;
+    box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
+    transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    border-radius: 4px;
     cursor: ${props => !props.pressed && 'pointer'};
     zindex: 100;
+    transform: translate(-4px, -4px);
+  }
+  & .muicc-hsvgradient-cursor:hover {
+    box-shadow: 0px 0px 0px 8px rgba(63, 81, 181, 0.16);
+  }
+  & .muicc-hsvgradient-cursor:focus {
+    outline: none !important;
+    box-shadow: 0px 0px 0px 8px rgba(63, 81, 181, 0.16);
+  }
+  & .muicc-hsvgradient-cursor:focus > div {
+    // TODO
   }
   & .muicc-hsvgradient-cursor-c {
     width: 8px;
     height: 8px;
     border-radius: 4px;
-    box-shadow: rgb(255, 255, 255) 0px 0px 0px 1.5px, rgba(0, 0, 0, 0.3) 0px 0px 1px 1px inset,
-      rgba(0, 0, 0, 0.4) 0px 0px 1px 2px;
-    transform: translate(-4px, -4px);
+    box-shadow: white 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
   }
 `;
 
 const HSVGradient = ({ className, color, onChange, ...props }) => {
   const latestColor = React.useRef(color);
+  const [focus, onFocus] = React.useState(false);
+  const [pressed, setPressed] = React.useState(false);
   React.useEffect(() => {
     latestColor.current = color;
   });
   const box = React.useRef();
   const cursor = React.useRef();
+  let cursorPos = { x: 0, y: 0 };
   const rgb = getRGB(color.hsv[0]);
   const cssRgb = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
-  const [pressed, setPressed] = React.useState(false);
 
-  const setPosition = pos => {
+  const setPosition = (pos, f) => {
+    cursorPos = pos;
     cursor.current.style.top = `${pos.y}px`;
     cursor.current.style.left = `${pos.x}px`;
+    if (f) {
+      cursor.current.focus();
+    }
   };
 
   const initPosition = ref => {
     if (ref) {
       const { hsv } = color;
-      const pos = {
+      cursorPos = {
         x: Math.round((hsv[1] / 100) * (ref.clientWidth - 1)),
         y: Math.round((1 - hsv[2] / 100) * (ref.clientHeight - 1)),
       };
-      setPosition(pos);
+      setPosition(cursorPos);
     }
   };
 
@@ -106,10 +126,9 @@ const HSVGradient = ({ className, color, onChange, ...props }) => {
     box.current.style.background = `${cssRgb} none repeat scroll 0% 0%`;
   }
 
-  const convertMousePosition = (event, ref) => {
-    const { pageX, pageY } = event;
+  const convertMousePosition = ({ x, y }, ref) => {
     const bounds = ref.getBoundingClientRect();
-    const pos = { x: pageX - bounds.left, y: pageY - bounds.top };
+    const pos = { x: x - bounds.left, y: y - bounds.top };
     if (pos.x < 0) {
       pos.x = 0;
     }
@@ -122,7 +141,7 @@ const HSVGradient = ({ className, color, onChange, ...props }) => {
     if (pos.y >= ref.clientHeight) {
       pos.y = ref.clientHeight - 1;
     }
-    setPosition(pos);
+    setPosition(pos, true);
     const s = (pos.x / (ref.clientWidth - 1)) * 100;
     const v = (1 - pos.y / (ref.clientHeight - 1)) * 100;
     const c = latestColor.current;
@@ -132,39 +151,95 @@ const HSVGradient = ({ className, color, onChange, ...props }) => {
   React.useEffect(() => {
     const ref = box.current;
     initPosition(ref);
-    const handleDown = () => {
+    const handleDown = event => {
+      onFocus(true);
       setPressed(true);
+      event.preventDefault();
     };
     const handleUp = event => {
-      convertMousePosition(event, ref);
+      convertMousePosition({ x: event.pageX, y: event.pageY }, ref);
       setPressed(false);
+      event.preventDefault();
     };
     const handleMove = event => {
       if (pressed || event.buttons) {
-        convertMousePosition(event, ref);
+        convertMousePosition({ x: event.pageX, y: event.pageY }, ref);
+        event.preventDefault();
       }
     };
+    const handleTouch = event => {
+      const xy = { x: event.touches[0].pageX, y: event.touches[0].pageY };
+      convertMousePosition(xy, ref);
+      event.preventDefault();
+    };
+
     ref.addEventListener('mousedown', handleDown);
     ref.addEventListener('mouseup', handleUp);
     ref.addEventListener('mousemove', handleMove);
+    ref.addEventListener('touchdown', handleDown);
+    ref.addEventListener('touchup', handleUp);
+    ref.addEventListener('touchmove', handleTouch);
     return () => {
       ref.removeEventListener('mousedown', handleDown);
       ref.removeEventListener('mouseup', handleUp);
       ref.removeEventListener('mousemove', handleMove);
+      ref.removeEventListener('touchdown', handleDown);
+      ref.removeEventListener('touchup', handleUp);
+      ref.removeEventListener('touchmove', handleTouch);
     };
   }, []);
-
+  const handleKey = useEventCallback(event => {
+    if (!focus) return;
+    let { x, y } = cursorPos;
+    switch (event.key) {
+      case 'ArrowRight':
+        x += 1;
+        break;
+      case 'ArrowLeft':
+        x -= 1;
+        break;
+      case 'ArrowDown':
+        y += 1;
+        break;
+      case 'ArrowUp':
+        y -= 1;
+        break;
+      case 'Tab':
+        onFocus(false);
+        return;
+      default:
+        return;
+    }
+    event.preventDefault();
+    const bounds = box.current.getBoundingClientRect();
+    convertMousePosition({ x: x + bounds.left, y: y + bounds.top }, box.current);
+  });
+  const handleFocus = useEventCallback(event => {
+    onFocus(true);
+    event.preventDefault();
+  });
+  const handleBlur = useEventCallback(event => {
+    onFocus(false);
+    event.preventDefault();
+  });
   return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div className={className}>
       <StyledRoot {...props} ref={box} cssRgb={cssRgb} data-testid="hsvgradient-color">
         <div className="muicc-hsvgradient-s">
           <div className="muicc-hsvgradient-v">
             <div
               ref={cursor}
+              tabIndex="0"
+              role="slider"
+              aria-valuemax={100}
+              aria-valuemin={0}
+              aria-valuenow={color.hsv[1]}
               pressed={`${pressed}`}
               data-testid="hsvgradient-cursor"
               className="muicc-hsvgradient-cursor"
+              onKeyDown={handleKey}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
             >
               <div className="muicc-hsvgradient-cursor-c" />
             </div>

src/components/ColorBox/HueSlider.jsx

@@ -10,10 +10,10 @@ import Slider from '@material-ui/core/Slider';
 
 export default styled(Slider)`
   width: 100%;
-  height: 24px;
+  height: 16px;
   padding: 0;
   & .MuiSlider-rail {
-    height: 24px;
+    height: 16px;
     opacity: 1;
     background: rgba(0, 0, 0, 0)
       linear-gradient(
@@ -30,24 +30,20 @@ export default styled(Slider)`
     border-radius: 0;
   }
   & .MuiSlider-track {
-    height: 24px;
+    height: 16px;
     opacity: 0;
     border-radius: 4px;
     background-color: transparent;
   }
   & .MuiSlider-thumb {
-    width: 8px;
-    border: 1px solid #9e9e9e;
-    height: 28px;
-    opacity: 0.8;
-    margin-top: -2px;
-    margin-left: -4px;
-    border-radius: 4px;
-    background-color: #fff;
-    &:focus,
-    &:hover,
-    &$active {
-      box-shadow: inherit;
+    width: 16px;
+    height: 16px;
+    margin-top: 0px;
+    margin-left: -8px;
+    background-color: #f0f0f0;
+    box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
+    &:focus {
+      box-shadow: 0px 0px 0px 8px rgba(63, 81, 181, 0.16);
     }
   }
 `;

src/components/ColorBox/index.jsx

@@ -42,19 +42,20 @@ const StyledBox = styled.div`
   width: ${props => `${props.boxWidth}px`};
   padding: 0px;
   & .muicc-colorbox-hsvgradient {
-    width: ${props => `calc(${props.boxWidth}px - 12px)`};
-    height: calc(128px - 12px);
-    margin: 6px;
+    width: ${props => `calc(${props.boxWidth}px - 16px)`};
+    height: calc(128px - 16px);
+    margin: 8px;
   }
   & .muicc-colorbox-sliders {
     width: ${props => `${props.boxWidth}px`};
-    padding: 0 6px;
+    padding: 8px 8px 4px 8px;
   }
   & .muicc-colorbox-inputs {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    padding: 6px;
+    padding: 8px 4px 8px 8px;
+    justify-content: space-between;
   }
   & .muicc-colorbox-input {
     marginright: 14px;
@@ -67,18 +68,19 @@ const StyledBox = styled.div`
     background-size: 8px 8px;
     background-position: 0 0, 4px 0, 4px -4px, 0px 4px;
     background-color: white;
-    margin-right: 24px;
+    border-radius: 4px;
   }
   & .muicc-colorbox-color {
     width: 48px;
     height: 48px;
     background-color: ${props => props.backgroundColor};
+    border-radius: 4px;
   }
   & .muicc-colorbox-controls {
     display: flex;
     flex-direction: row-reverse;
     flex-wrap: wrap;
-    padding: 6px;
+    padding: 8px;
   }
 `;
 
@@ -173,7 +175,7 @@ const ColorBox = ({ value, palette, inputFormats, deferred, onChange: _onChange,
         {palette && (
           <>
             <Divider />
-            <ColorPalette palette={palette} onSelect={handlePaletteSelection} />
+            <ColorPalette size={26.65} palette={palette} onSelect={handlePaletteSelection} />
           </>
         )}
         {deferred && (

src/components/ColorPalette.jsx

@@ -17,15 +17,14 @@ const StyledRoot = styled.div`
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  padding: 6px;
+  padding: 8px 0 0 8px;
   & .muicc-palette-button {
-    margin-right: 4px;
-    margin-bottom: 4px;
+    margin: 0 8px 8px 0;
     padding: 0;
   }
 `;
 
-const ColorPalette = ({ borderWidth, palette, onSelect }) => {
+const ColorPalette = ({ size, borderWidth, palette, onSelect }) => {
   const handleSelectColor = name => {
     if (onSelect) onSelect(name, palette[name]);
   };
@@ -34,7 +33,7 @@ const ColorPalette = ({ borderWidth, palette, onSelect }) => {
     <StyledRoot>
       {Object.keys(palette).map(name => (
         <ColorButton
-          size={24}
+          size={size}
           key={`${name}`}
           color={palette[name]}
           className="muicc-palette-button"
@@ -49,13 +48,15 @@ const ColorPalette = ({ borderWidth, palette, onSelect }) => {
 
 ColorPalette.propTypes = {
   borderWidth: PropTypes.number,
+  size: PropTypes.number,
   palette: CommonTypes.palette.isRequired,
   forwardRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   onSelect: PropTypes.func,
 };
 
 ColorPalette.defaultProps = {
   borderWidth: 0,
+  size: 24,
   forwardRef: undefined,
   onSelect: undefined,
 };

src/helpers/useEventCallback.js

@@ -0,0 +1,17 @@
+/* istanbul ignore file */
+import * as React from 'react';
+
+const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+/**
+ * https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ *
+ * @param {function} fn
+ */
+export default function useEventCallback(fn) {
+  const ref = React.useRef(fn);
+  useEnhancedEffect(() => {
+    ref.current = fn;
+  });
+  return React.useCallback((...args) => (0, ref.current)(...args), []);
+}