Implemented omgovich#177 PR

Author: royeden

src/components/common/Alpha.tsx

@@ -35,6 +35,7 @@ export const Alpha = ({ className, hsva, onChange }: Props): JSX.Element => {
   };
 
   const nodeClassName = formatClassName(["react-colorful__alpha", className]);
+  const ariaValue = round(hsva.a * 100);
 
   return (
     <div className={nodeClassName}>
@@ -43,7 +44,10 @@ export const Alpha = ({ className, hsva, onChange }: Props): JSX.Element => {
         onMove={handleMove}
         onKey={handleKey}
         aria-label="Alpha"
-        aria-valuetext={`${round(hsva.a * 100)}%`}
+        aria-valuetext={`${ariaValue}%`}
+        aria-valuenow={ariaValue}
+        aria-valuemin="0"
+        aria-valuemax="100"
       >
         <Pointer
           className="react-colorful__alpha-pointer"

src/components/common/Hue.tsx

@@ -34,7 +34,9 @@ const HueBase = ({ className, hue, onChange }: Props) => {
         onMove={handleMove}
         onKey={handleKey}
         aria-label="Hue"
-        aria-valuetext={round(hue)}
+        aria-valuenow={round(hue)}
+        aria-valuemax="360"
+        aria-valuemin="0"
       >
         <Pointer
           className="react-colorful__hue-pointer"

tests/__snapshots__/components.test.js.snap

@@ -33,7 +33,9 @@ exports[`Accepts any valid \`div\` attributes 1`] = `
   >
     <div
       aria-label="Hue"
-      aria-valuetext="0"
+      aria-valuemax="360"
+      aria-valuemin="0"
+      aria-valuenow="0"
       class="react-colorful__interactive"
       role="slider"
       tabindex="0"
@@ -92,7 +94,9 @@ exports[`Renders proper alpha color picker markup 1`] = `
   >
     <div
       aria-label="Hue"
-      aria-valuetext="0"
+      aria-valuemax="360"
+      aria-valuemin="0"
+      aria-valuenow="0"
       class="react-colorful__interactive"
       role="slider"
       tabindex="0"
@@ -116,6 +120,9 @@ exports[`Renders proper alpha color picker markup 1`] = `
     />
     <div
       aria-label="Alpha"
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="50"
       aria-valuetext="50%"
       class="react-colorful__interactive"
       role="slider"
@@ -166,7 +173,9 @@ exports[`Renders proper color picker markup 1`] = `
   >
     <div
       aria-label="Hue"
-      aria-valuetext="0"
+      aria-valuemax="360"
+      aria-valuemin="0"
+      aria-valuenow="0"
       class="react-colorful__interactive"
       role="slider"
       tabindex="0"
@@ -216,7 +225,9 @@ exports[`Works with no props 1`] = `
   >
     <div
       aria-label="Hue"
-      aria-valuetext="0"
+      aria-valuemax="360"
+      aria-valuemin="0"
+      aria-valuenow="0"
       class="react-colorful__interactive"
       role="slider"
       tabindex="0"