ColorSlider and ColorWheel labeling improvements (#1552)

* ColorSlider, ColorWheel localization strings for color channel names

* ColorSlider: refactor i18n into @react-aria package

* fix lint errors

* ColorSlider: fix additional input labelling issues per code review

* ColorSlider: include localized channel name when labelled externally

* ColorSlider fix failing unit tests due to console warnings whne useSlider is called without a label

* Move default labels into Spectrum and add tests

Co-authored-by: Michael Jordan <[email protected]>
Co-authored-by: Danni <[email protected]>

Author: 3 people

packages/@react-aria/color/src/useColorSlider.ts

@@ -29,18 +29,22 @@ interface ColorSliderAria {
   inputProps: HTMLAttributes<HTMLElement>,
   thumbProps: HTMLAttributes<HTMLElement>,
   labelProps: HTMLAttributes<HTMLElement>,
+  outputProps: HTMLAttributes<HTMLElement>,
   gradientProps: HTMLAttributes<HTMLElement>
 }
 
 export function useColorSlider(props: ColorSliderAriaOptions, state: ColorSliderState): ColorSliderAria {
-  let {trackRef, orientation, channel} = props;
+  let {trackRef, inputRef, orientation, channel} = props;
 
   let {direction} = useLocale();
 
-  let {groupProps, trackProps, labelProps} = useSlider(props, state, trackRef);
+  let {groupProps, trackProps, labelProps, outputProps} = useSlider(props, state, trackRef);
   let {inputProps, thumbProps} = useSliderThumb({
-    ...props,
-    index: 0
+    index: 0,
+    orientation,
+    isDisabled: props.isDisabled,
+    trackRef,
+    inputRef
   }, state);
 
   let generateBackground = () => {
@@ -87,6 +91,7 @@ export function useColorSlider(props: ColorSliderAriaOptions, state: ColorSlider
     inputProps,
     thumbProps,
     labelProps,
+    outputProps,
     gradientProps: {
       style: {
         background: generateBackground()

packages/@react-aria/color/src/useColorWheel.ts

@@ -10,13 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorWheelProps} from '@react-types/color';
+import {AriaColorWheelProps} from '@react-types/color';
 import {ColorWheelState} from '@react-stately/color';
-import {focusWithoutScrolling, mergeProps, useGlobalListeners} from '@react-aria/utils';
+import {focusWithoutScrolling, mergeProps, useGlobalListeners, useLabels} from '@react-aria/utils';
 import React, {ChangeEvent, HTMLAttributes, InputHTMLAttributes, RefObject, useCallback, useRef} from 'react';
 import {useKeyboard, useMove} from '@react-aria/interactions';
 
-interface ColorWheelAriaProps extends ColorWheelProps {
+interface ColorWheelAriaProps extends AriaColorWheelProps {
   inputRef: RefObject<HTMLElement>,
   containerRef: RefObject<HTMLElement>,
   innerRadius: number,
@@ -53,7 +53,14 @@ function cartesianToAngle(x: number, y: number, radius: number): number {
 }
 
 export function useColorWheel(props: ColorWheelAriaProps, state: ColorWheelState): ColorWheelAria {
-  let {inputRef, containerRef, isDisabled, step = 1, innerRadius, outerRadius} = props;
+  let {
+    inputRef,
+    containerRef,
+    isDisabled,
+    step = 1,
+    innerRadius,
+    outerRadius
+  } = props;
 
   let {addGlobalListener, removeGlobalListener} = useGlobalListeners();
 
@@ -192,6 +199,8 @@ export function useColorWheel(props: ColorWheelAriaProps, state: ColorWheelState
     }
   });
 
+  let inputLabellingProps = useLabels(props);
+
   return {
     groupProps: isDisabled ? {} : mergeProps({
       onMouseDown: (e: React.MouseEvent) => {onTrackDown(undefined, e.pageX, e.pageY);},
@@ -203,18 +212,20 @@ export function useColorWheel(props: ColorWheelAriaProps, state: ColorWheelState
       onPointerDown: (e: React.PointerEvent) => {onThumbDown(e.pointerId);},
       onTouchStart: (e: React.TouchEvent) => {onThumbDown(e.changedTouches[0].identifier);}
     }, movePropsThumb, keyboardProps),
-    inputProps: {
-      type: 'range',
-      'aria-label': 'hue',
-      min: '0',
-      max: '360',
-      step: String(step),
-      disabled: isDisabled,
-      value: `${state.value.getChannelValue('hue')}`,
-      onChange: (e: ChangeEvent<HTMLInputElement>) => {
-        state.setHue(parseFloat(e.target.value));
+    inputProps: mergeProps(
+      inputLabellingProps,
+      {
+        type: 'range',
+        min: '0',
+        max: '360',
+        step: String(step),
+        disabled: isDisabled,
+        value: `${state.value.getChannelValue('hue')}`,
+        onChange: (e: ChangeEvent<HTMLInputElement>) => {
+          state.setHue(parseFloat(e.target.value));
+        }
       }
-    },
+    ),
     thumbPosition: angleToCartesian(state.value.getChannelValue('hue'), thumbRadius)
   };
 }

packages/@react-aria/color/test/useColorWheel.test.tsx

@@ -79,7 +79,6 @@ describe('useColorWheel', () => {
     let slider = getByRole('slider');
 
     expect(slider).toHaveAttribute('type', 'range');
-    expect(slider).toHaveAttribute('aria-label', 'hue');
     expect(slider).toHaveAttribute('min', '0');
     expect(slider).toHaveAttribute('max', '360');
     expect(slider).toHaveAttribute('step', '1');

packages/@react-spectrum/color/intl/ar-AE.json

@@ -0,0 +1,10 @@
+{
+  "hue": "تدرج اللون",
+  "saturation": "‏‏الإشباع",
+  "lightness": "الإضاءة",
+  "brightness": "والقيمة",
+  "red": "أحمر",
+  "green": "أخضر",
+  "blue": "أزرق",
+  "alpha": "أولي"
+}

packages/@react-spectrum/color/intl/bg-BG.json

@@ -0,0 +1,10 @@
+{
+  "hue": "Нюанс",
+  "saturation": "Наситеност",
+  "lightness": "Осветеност",
+  "brightness": "Яркост",
+  "red": "Червено",
+  "green": "Зелено",
+  "blue": "Синьо",
+  "alpha": "Алфа"
+}

packages/@react-spectrum/color/intl/cs-CZ.json

@@ -0,0 +1,10 @@
+{
+  "hue": "Odstín",
+  "saturation": "Sytost",
+  "lightness": "Světlost",
+  "brightness": "Jas",
+  "red": "Červená",
+  "green": "Zelená",
+  "blue": "Modrá",
+  "alpha": "Alfa"
+}

packages/@react-spectrum/color/intl/da-DK.json

@@ -0,0 +1,10 @@
+{
+  "hue": "Nuance",
+  "saturation": "Mætning",
+  "lightness": "Lysstyrke",
+  "brightness": "Værdi",
+  "red": "Rød",
+  "green": "Grøn",
+  "blue": "Blå",
+  "alpha": "Alfa"
+}

packages/@react-spectrum/color/intl/de-DE.json

@@ -0,0 +1,10 @@
+{
+  "hue": "Farbton",
+  "saturation": "Sättigung",
+  "lightness": "Leuchtkraft",
+  "brightness": "Helligkeit",
+  "red": "Rot",
+  "green": "Grün",
+  "blue": "Blau",
+  "alpha": "Alpha"
+}

packages/@react-spectrum/color/intl/el-GR.json

@@ -0,0 +1,10 @@
+{
+  "hue": "Απόχρωση",
+  "saturation": "Κορεσμού",
+  "lightness": "Φωτεινότητα",
+  "brightness": "Τιμή",
+  "red": "Κόκκινο",
+  "green": "Πράσινο",
+  "blue": "Μπλε",
+  "alpha": "Αλφα"
+}

packages/@react-spectrum/color/intl/en-US.json

@@ -0,0 +1,10 @@
+{
+  "hue": "Hue",
+  "saturation": "Saturation",
+  "lightness": "Lightness",
+  "brightness": "Brightness",
+  "red": "Red",
+  "green": "Green",
+  "blue": "Blue",
+  "alpha": "Alpha"
+}