@react-aria/color 3.0.0-beta.10 → 3.0.0-beta.13

package/dist/module.js

@@ -1,6 +1,6 @@
 import {useGlobalListeners as $7KHxM$useGlobalListeners, focusWithoutScrolling as $7KHxM$focusWithoutScrolling, mergeProps as $7KHxM$mergeProps, isIOS as $7KHxM$isIOS, isAndroid as $7KHxM$isAndroid, useLabels as $7KHxM$useLabels, useId as $7KHxM$useId} from "@react-aria/utils";
 import {useRef as $7KHxM$useRef, useCallback as $7KHxM$useCallback, useMemo as $7KHxM$useMemo, useState as $7KHxM$useState} from "react";
-import {useKeyboard as $7KHxM$useKeyboard, useMove as $7KHxM$useMove, useFocusWithin as $7KHxM$useFocusWithin, useScrollWheel as $7KHxM$useScrollWheel} from "@react-aria/interactions";
+import {useKeyboard as $7KHxM$useKeyboard, useMove as $7KHxM$useMove, useFocusWithin as $7KHxM$useFocusWithin, useFocus as $7KHxM$useFocus, useScrollWheel as $7KHxM$useScrollWheel} from "@react-aria/interactions";
 import {useMessageFormatter as $7KHxM$useMessageFormatter, useLocale as $7KHxM$useLocale} from "@react-aria/i18n";
 import {useVisuallyHidden as $7KHxM$useVisuallyHidden} from "@react-aria/visually-hidden";
 import {useSlider as $7KHxM$useSlider, useSliderThumb as $7KHxM$useSliderThumb} from "@react-aria/slider";
@@ -19,139 +19,139 @@ $parcel$export($60bd7d6e45dcddfa$exports, "useColorArea", () => $60bd7d6e45dcddf
 
 var $052cfdf4c32eb7c3$exports = {};
 var $eccab2b0118aef08$exports = {};
-$eccab2b0118aef08$exports = JSON.parse("{\"twoDimensionalSlider\":\"شريط تمرير ثنائي الأبعاد\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$eccab2b0118aef08$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"أداة انتقاء اللون\",\"twoDimensionalSlider\":\"مُنزلق 2D\"}");
 
 
 var $bf2b4507594e3d45$exports = {};
-$bf2b4507594e3d45$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D плъзгач\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$bf2b4507594e3d45$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Средство за избиране на цвят\",\"twoDimensionalSlider\":\"2D плъзгач\"}");
 
 
 var $01c08487af7ecd14$exports = {};
-$01c08487af7ecd14$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D posuvník\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$01c08487af7ecd14$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Výběr barvy\",\"twoDimensionalSlider\":\"2D posuvník\"}");
 
 
 var $5e997db6ea0d10f6$exports = {};
-$5e997db6ea0d10f6$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-skyder\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$5e997db6ea0d10f6$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Farvevælger\",\"twoDimensionalSlider\":\"2D-skyder\"}");
 
 
 var $fe5998f640a79fd2$exports = {};
-$fe5998f640a79fd2$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-Schieberegler\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$fe5998f640a79fd2$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Farbwähler\",\"twoDimensionalSlider\":\"2D-Schieberegler\"}");
 
 
 var $18e4d1d5b500a9ee$exports = {};
-$18e4d1d5b500a9ee$exports = JSON.parse("{\"twoDimensionalSlider\":\"Ρυθμιστικό 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$18e4d1d5b500a9ee$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Επιλογέας χρωμάτων\",\"twoDimensionalSlider\":\"Ρυθμιστικό 2D\"}");
 
 
 var $bf90a11a7a42a0f7$exports = {};
-$bf90a11a7a42a0f7$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D slider\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$bf90a11a7a42a0f7$exports = JSON.parse("{\"colorPicker\":\"Color picker\",\"twoDimensionalSlider\":\"2D slider\",\"colorNameAndValue\":\"{name}: {value}\",\"colorInputLabel\":\"{label}, {channelLabel}\"}");
 
 
 var $dd0d25f885b5c5f3$exports = {};
-$dd0d25f885b5c5f3$exports = JSON.parse("{\"twoDimensionalSlider\":\"Control deslizante en 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$dd0d25f885b5c5f3$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Selector de color\",\"twoDimensionalSlider\":\"Regulador 2D\"}");
 
 
 var $d950967017e3485b$exports = {};
-$d950967017e3485b$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-liugur\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$d950967017e3485b$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Värvivalija\",\"twoDimensionalSlider\":\"2D-liugur\"}");
 
 
 var $00a415a3f0ab315a$exports = {};
-$00a415a3f0ab315a$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-liukusäädin\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$00a415a3f0ab315a$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Värimuokkain\",\"twoDimensionalSlider\":\"2D-liukusäädin\"}");
 
 
 var $d80f30fe86c95741$exports = {};
-$d80f30fe86c95741$exports = JSON.parse("{\"twoDimensionalSlider\":\"Curseur 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$d80f30fe86c95741$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name} : {value}\",\"colorPicker\":\"Sélecteur de couleurs\",\"twoDimensionalSlider\":\"Curseur 2D\"}");
 
 
 var $6912afb584340a2e$exports = {};
-$6912afb584340a2e$exports = JSON.parse("{\"twoDimensionalSlider\":\"מחוון דו-ממדי\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$6912afb584340a2e$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"בוחר הצבעים\",\"twoDimensionalSlider\":\"מחוון דו מימדי\"}");
 
 
 var $7b97fcacd84ec90f$exports = {};
-$7b97fcacd84ec90f$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D kliznik\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$7b97fcacd84ec90f$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Odabir boje\",\"twoDimensionalSlider\":\"2D klizač\"}");
 
 
 var $da9b443e89eebc6b$exports = {};
-$da9b443e89eebc6b$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D csúszka\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$da9b443e89eebc6b$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Színválasztó\",\"twoDimensionalSlider\":\"2D-csúszka\"}");
 
 
 var $35f135b45eb4d95b$exports = {};
-$35f135b45eb4d95b$exports = JSON.parse("{\"twoDimensionalSlider\":\"Dispositivo di scorrimento 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$35f135b45eb4d95b$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Selettore colore\",\"twoDimensionalSlider\":\"Cursore 2D\"}");
 
 
 var $760b09448e39c6cd$exports = {};
-$760b09448e39c6cd$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D スライダー\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$760b09448e39c6cd$exports = JSON.parse("{\"colorInputLabel\":\"{label}、{channelLabel}\",\"colorNameAndValue\":\"{name} : {value}\",\"colorPicker\":\"カラーピッカー\",\"twoDimensionalSlider\":\"2D スライダー\"}");
 
 
 var $fc7b7d43be9703ec$exports = {};
-$fc7b7d43be9703ec$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D 슬라이더\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$fc7b7d43be9703ec$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"색상 피커\",\"twoDimensionalSlider\":\"2D 슬라이더\"}");
 
 
 var $74918a1664156912$exports = {};
-$74918a1664156912$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D slankiklis\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$74918a1664156912$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Spalvų parinkiklis\",\"twoDimensionalSlider\":\"2D slankiklis\"}");
 
 
 var $4e6cde11c2bc9840$exports = {};
-$4e6cde11c2bc9840$exports = JSON.parse("{\"twoDimensionalSlider\":\"Plaknes slīdnis\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$4e6cde11c2bc9840$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Krāsu atlasītājs\",\"twoDimensionalSlider\":\"2D slīdnis\"}");
 
 
 var $6faa3defebc3eb72$exports = {};
-$6faa3defebc3eb72$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-glidebryter\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$6faa3defebc3eb72$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Fargevelger\",\"twoDimensionalSlider\":\"2D-glidebryter\"}");
 
 
 var $6ac9b6b1b7e3ca12$exports = {};
-$6ac9b6b1b7e3ca12$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-schuifregelaar\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$6ac9b6b1b7e3ca12$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Kleurkiezer\",\"twoDimensionalSlider\":\"2D-schuifregelaar\"}");
 
 
 var $1be8b0ee8841f1e7$exports = {};
-$1be8b0ee8841f1e7$exports = JSON.parse("{\"twoDimensionalSlider\":\"Suwak 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$1be8b0ee8841f1e7$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Próbnik kolorów\",\"twoDimensionalSlider\":\"Suwak 2D\"}");
 
 
 var $f9507c2d404ed689$exports = {};
-$f9507c2d404ed689$exports = JSON.parse("{\"twoDimensionalSlider\":\"Controle deslizante 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$f9507c2d404ed689$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Seletor de cores\",\"twoDimensionalSlider\":\"Controle deslizante 2D\"}");
 
 
 var $8f872ea59c02d67e$exports = {};
-$8f872ea59c02d67e$exports = JSON.parse("{\"twoDimensionalSlider\":\"Controlo de deslize 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$8f872ea59c02d67e$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Seletor de cores\",\"twoDimensionalSlider\":\"Controle deslizante 2D\"}");
 
 
 var $b03b45b62a7ccae4$exports = {};
-$b03b45b62a7ccae4$exports = JSON.parse("{\"twoDimensionalSlider\":\"Cursor 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$b03b45b62a7ccae4$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Selector de culori\",\"twoDimensionalSlider\":\"Glisor 2D\"}");
 
 
 var $f1107d94c09df9b8$exports = {};
-$f1107d94c09df9b8$exports = JSON.parse("{\"twoDimensionalSlider\":\"Двумерный ползунок\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$f1107d94c09df9b8$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Палитра цветов\",\"twoDimensionalSlider\":\"Ползунок 2D\"}");
 
 
 var $b61325f242fafc7c$exports = {};
-$b61325f242fafc7c$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D jazdec\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$b61325f242fafc7c$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Výber farieb\",\"twoDimensionalSlider\":\"2D jazdec\"}");
 
 
 var $f44b7cf39ac8f315$exports = {};
-$f44b7cf39ac8f315$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-drsnik\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$f44b7cf39ac8f315$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Izbirnik barv\",\"twoDimensionalSlider\":\"2D drsnik\"}");
 
 
 var $aa8cd83fc8d4982b$exports = {};
-$aa8cd83fc8d4982b$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D клизач\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$aa8cd83fc8d4982b$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Birač boja\",\"twoDimensionalSlider\":\"2D klizač\"}");
 
 
 var $7c4f4e5bb7c06f1e$exports = {};
-$7c4f4e5bb7c06f1e$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-reglage\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$7c4f4e5bb7c06f1e$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Färgväljaren\",\"twoDimensionalSlider\":\"2D-reglage\"}");
 
 
 var $8045cf930ef745aa$exports = {};
-$8045cf930ef745aa$exports = JSON.parse("{\"twoDimensionalSlider\":\"2B slayt gösterisi\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$8045cf930ef745aa$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Renk Seçici\",\"twoDimensionalSlider\":\"2D sürgü\"}");
 
 
 var $ee2044a77f24b118$exports = {};
-$ee2044a77f24b118$exports = JSON.parse("{\"twoDimensionalSlider\":\"Повзунок 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$ee2044a77f24b118$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Палітра кольорів\",\"twoDimensionalSlider\":\"Повзунок 2D\"}");
 
 
 var $4e1dbc65a687dd93$exports = {};
-$4e1dbc65a687dd93$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D 滑块\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$4e1dbc65a687dd93$exports = JSON.parse("{\"colorInputLabel\":\"{label}、{channelLabel}\",\"colorNameAndValue\":\"{name}：{value}\",\"colorPicker\":\"拾色器\",\"twoDimensionalSlider\":\"2D 滑块\"}");
 
 
 var $b0fef28529309aa6$exports = {};
-$b0fef28529309aa6$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D 滑桿\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$b0fef28529309aa6$exports = JSON.parse("{\"colorInputLabel\":\"{label}，{channelLabel}\",\"colorNameAndValue\":\"{name}：{value}\",\"colorPicker\":\"檢色器\",\"twoDimensionalSlider\":\"2D 滑桿\"}");
 
 
 $052cfdf4c32eb7c3$exports = {
@@ -409,7 +409,7 @@ function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction , stat
 
 
 function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
-    let { isDisabled: isDisabled , inputXRef: inputXRef , inputYRef: inputYRef , containerRef: containerRef  } = props;
+    let { isDisabled: isDisabled , inputXRef: inputXRef , inputYRef: inputYRef , containerRef: containerRef , 'aria-label': ariaLabel  } = props;
     let formatMessage = $7KHxM$useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($052cfdf4c32eb7c3$exports)));
     let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener  } = $7KHxM$useGlobalListeners();
     let { direction: direction , locale: locale  } = $7KHxM$useLocale();
@@ -436,6 +436,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
             e.preventDefault();
             // remember to set this and unset it so that onChangeEnd is fired
             stateRef.current.setDragging(true);
+            valueChangedViaKeyboard.current = true;
             switch(e.key){
                 case 'PageUp':
                     stateRef.current.incrementY(stateRef.current.yChannelPageStep);
@@ -455,10 +456,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
                     break;
             }
             stateRef.current.setDragging(false);
-            if (focusedInputRef.current) {
-                focusInput(focusedInputRef.current ? focusedInputRef : inputXRef);
-                focusedInputRef.current = undefined;
-            }
+            if (focusedInputRef.current) focusInput(focusedInputRef.current ? focusedInputRef : inputXRef);
         }
     });
     let moveHandler = {
@@ -470,6 +468,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
             let { incrementX: incrementX , decrementX: decrementX , incrementY: incrementY , decrementY: decrementY , xChannelPageStep: xChannelPageStep , xChannelStep: xChannelStep , yChannelPageStep: yChannelPageStep , yChannelStep: yChannelStep , getThumbPosition: getThumbPosition , setColorFromPoint: setColorFromPoint  } = stateRef.current;
             if (currentPosition.current == null) currentPosition.current = getThumbPosition();
             let { width: width , height: height  } = containerRef.current.getBoundingClientRect();
+            let valueChanged = deltaX !== 0 || deltaY !== 0;
             if (pointerType === 'keyboard') {
                 let deltaXValue = shiftKey && xChannelPageStep > xChannelStep ? xChannelPageStep : xChannelStep;
                 let deltaYValue = shiftKey && yChannelPageStep > yChannelStep ? yChannelPageStep : yChannelStep;
@@ -477,8 +476,9 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
                 else if (deltaX < 0 && direction === 'ltr' || deltaX > 0 && direction === 'rtl') decrementX(deltaXValue);
                 else if (deltaY > 0) decrementY(deltaYValue);
                 else if (deltaY < 0) incrementY(deltaYValue);
+                valueChangedViaKeyboard.current = valueChanged;
                 // set the focused input based on which axis has the greater delta
-                focusedInputRef.current = (deltaX !== 0 || deltaY !== 0) && Math.abs(deltaY) > Math.abs(deltaX) ? inputYRef.current : inputXRef.current;
+                focusedInputRef.current = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? inputYRef.current : inputXRef.current;
             } else {
                 currentPosition.current.x += (direction === 'rtl' ? -1 : 1) * deltaX / width;
                 currentPosition.current.y += deltaY / height;
@@ -489,10 +489,18 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
             isOnColorArea.current = undefined;
             stateRef.current.setDragging(false);
             focusInput(focusedInputRef.current ? focusedInputRef : inputXRef);
-            focusedInputRef.current = undefined;
         }
     };
     let { moveProps: movePropsThumb  } = $7KHxM$useMove(moveHandler);
+    let valueChangedViaKeyboard = $7KHxM$useRef(false);
+    let { focusWithinProps: focusWithinProps  } = $7KHxM$useFocusWithin({
+        onFocusWithinChange: (focusWithin)=>{
+            if (!focusWithin) {
+                valueChangedViaKeyboard.current = false;
+                focusedInputRef.current;
+            }
+        }
+    });
     let currentPointer = $7KHxM$useRef(undefined);
     let isOnColorArea = $7KHxM$useRef(false);
     let { moveProps: movePropsContainer  } = $7KHxM$useMove({
@@ -509,6 +517,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
     let onThumbDown = (id)=>{
         if (!state.isDragging) {
             currentPointer.current = id;
+            valueChangedViaKeyboard.current = false;
             focusInput();
             state.setDragging(true);
             if (typeof PointerEvent !== 'undefined') addGlobalListener(window, 'pointerup', onThumbUp, false);
@@ -523,6 +532,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
         var _pointerId;
         let id = (_pointerId = e.pointerId) !== null && _pointerId !== void 0 ? _pointerId : (ref = e.changedTouches) === null || ref === void 0 ? void 0 : ref[0].identifier;
         if (id === currentPointer.current) {
+            valueChangedViaKeyboard.current = false;
             focusInput();
             state.setDragging(false);
             currentPointer.current = undefined;
@@ -542,6 +552,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
         if (direction === 'rtl') x = 1 - x;
         if (x >= 0 && x <= 1 && y >= 0 && y <= 1 && !state.isDragging && currentPointer.current === undefined) {
             isOnColorArea.current = true;
+            valueChangedViaKeyboard.current = false;
             currentPointer.current = id;
             state.setColorFromPoint(x, y);
             focusInput();
@@ -559,6 +570,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
         let id = (_pointerId = e.pointerId) !== null && _pointerId !== void 0 ? _pointerId : (ref = e.changedTouches) === null || ref === void 0 ? void 0 : ref[0].identifier;
         if (isOnColorArea.current && id === currentPointer.current) {
             isOnColorArea.current = false;
+            valueChangedViaKeyboard.current = false;
             currentPointer.current = undefined;
             state.setDragging(false);
             focusInput();
@@ -602,34 +614,53 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
                 onThumbDown(e.changedTouches[0].identifier);
             }
         }
-    }, keyboardProps, movePropsThumb);
+    }, focusWithinProps, keyboardProps, movePropsThumb);
+    let { focusProps: xInputFocusProps  } = $7KHxM$useFocus({
+        onFocus: ()=>{
+            focusedInputRef.current = inputXRef.current;
+        }
+    });
+    let { focusProps: yInputFocusProps  } = $7KHxM$useFocus({
+        onFocus: ()=>{
+            focusedInputRef.current = inputYRef.current;
+        }
+    });
     let isMobile = $7KHxM$isIOS() || $7KHxM$isAndroid();
+    function getAriaValueTextForChannel(channel) {
+        return valueChangedViaKeyboard.current ? formatMessage('colorNameAndValue', {
+            name: state.value.getChannelName(channel, locale),
+            value: state.value.formatChannelValue(channel, locale)
+        }) : [
+            formatMessage('colorNameAndValue', {
+                name: state.value.getChannelName(channel, locale),
+                value: state.value.formatChannelValue(channel, locale)
+            }),
+            formatMessage('colorNameAndValue', {
+                name: state.value.getChannelName(channel === yChannel ? xChannel : yChannel, locale),
+                value: state.value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)
+            })
+        ].join(', ');
+    }
+    let colorPickerLabel = formatMessage('colorPicker');
     let xInputLabellingProps = $7KHxM$useLabels({
         ...props,
-        'aria-label': isMobile ? state.value.getChannelName(xChannel, locale) : formatMessage('x/y', {
-            x: state.value.getChannelName(xChannel, locale),
-            y: state.value.getChannelName(yChannel, locale)
-        })
+        'aria-label': ariaLabel ? formatMessage('colorInputLabel', {
+            label: ariaLabel,
+            channelLabel: colorPickerLabel
+        }) : colorPickerLabel
     });
     let yInputLabellingProps = $7KHxM$useLabels({
         ...props,
-        'aria-label': isMobile ? state.value.getChannelName(yChannel, locale) : formatMessage('x/y', {
-            x: state.value.getChannelName(xChannel, locale),
-            y: state.value.getChannelName(yChannel, locale)
-        })
+        'aria-label': ariaLabel ? formatMessage('colorInputLabel', {
+            label: ariaLabel,
+            channelLabel: colorPickerLabel
+        }) : colorPickerLabel
     });
-    let colorAriaLabellingProps = $7KHxM$useLabels(props);
-    let getValueTitle = ()=>{
-        const channels = state.value.getColorChannels();
-        const colorNamesAndValues = [];
-        channels.forEach((channel)=>colorNamesAndValues.push(formatMessage('colorNameAndValue', {
-                name: state.value.getChannelName(channel, locale),
-                value: state.value.formatChannelValue(channel, locale)
-            }))
-        );
-        return colorNamesAndValues.length ? colorNamesAndValues.join(', ') : null;
-    };
-    let ariaRoleDescription = isMobile ? null : formatMessage('twoDimensionalSlider');
+    let colorAriaLabellingProps = $7KHxM$useLabels({
+        ...props,
+        'aria-label': ariaLabel ? `${ariaLabel} ${colorPickerLabel}` : undefined
+    }, isMobile ? colorPickerLabel : undefined);
+    let ariaRoleDescription = formatMessage('twoDimensionalSlider');
     let { visuallyHiddenProps: visuallyHiddenProps  } = $7KHxM$useVisuallyHidden({
         style: {
             opacity: '0.0001',
@@ -664,28 +695,21 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
         xInputProps: {
             ...xInputLabellingProps,
             ...visuallyHiddenProps,
+            ...xInputFocusProps,
             type: 'range',
             min: state.value.getChannelRange(xChannel).minValue,
             max: state.value.getChannelRange(xChannel).maxValue,
             step: xChannelStep1,
             'aria-roledescription': ariaRoleDescription,
-            'aria-valuetext': isMobile ? formatMessage('colorNameAndValue', {
-                name: state.value.getChannelName(xChannel, locale),
-                value: state.value.formatChannelValue(xChannel, locale)
-            }) : [
-                formatMessage('colorNameAndValue', {
-                    name: state.value.getChannelName(xChannel, locale),
-                    value: state.value.formatChannelValue(xChannel, locale)
-                }),
-                formatMessage('colorNameAndValue', {
-                    name: state.value.getChannelName(yChannel, locale),
-                    value: state.value.formatChannelValue(yChannel, locale)
-                })
-            ].join(', '),
-            title: getValueTitle(),
+            'aria-valuetext': getAriaValueTextForChannel(xChannel),
             disabled: isDisabled,
             value: state.value.getChannelValue(xChannel),
-            tabIndex: 0,
+            tabIndex: isMobile || !focusedInputRef.current || focusedInputRef.current === inputXRef.current ? undefined : -1,
+            /*
+        So that only a single "2d slider" control shows up when listing form elements for screen readers,
+        add aria-hidden="true" to the unfocused control when the value has not changed via the keyboard,
+        but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
+      */ 'aria-hidden': !isMobile && focusedInputRef.current === inputYRef.current && !valueChangedViaKeyboard.current ? 'true' : undefined,
             onChange: (e)=>{
                 state.setXValue(parseFloat(e.target.value));
             }
@@ -693,29 +717,22 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
         yInputProps: {
             ...yInputLabellingProps,
             ...visuallyHiddenProps,
+            ...yInputFocusProps,
             type: 'range',
             min: state.value.getChannelRange(yChannel).minValue,
             max: state.value.getChannelRange(yChannel).maxValue,
             step: yChannelStep1,
             'aria-roledescription': ariaRoleDescription,
-            'aria-valuetext': isMobile ? formatMessage('colorNameAndValue', {
-                name: state.value.getChannelName(yChannel, locale),
-                value: state.value.formatChannelValue(yChannel, locale)
-            }) : [
-                formatMessage('colorNameAndValue', {
-                    name: state.value.getChannelName(yChannel, locale),
-                    value: state.value.formatChannelValue(yChannel, locale)
-                }),
-                formatMessage('colorNameAndValue', {
-                    name: state.value.getChannelName(xChannel, locale),
-                    value: state.value.formatChannelValue(xChannel, locale)
-                })
-            ].join(', '),
+            'aria-valuetext': getAriaValueTextForChannel(yChannel),
             'aria-orientation': 'vertical',
-            title: getValueTitle(),
             disabled: isDisabled,
             value: state.value.getChannelValue(yChannel),
-            tabIndex: -1,
+            tabIndex: isMobile || focusedInputRef.current === inputYRef.current ? undefined : -1,
+            /*
+        So that only a single "2d slider" control shows up when listing form elements for screen readers,
+        add aria-hidden="true" to the unfocused input when the value has not changed via the keyboard,
+        but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
+      */ 'aria-hidden': isMobile || focusedInputRef.current === inputYRef.current || valueChangedViaKeyboard.current ? undefined : 'true',
             onChange: (e)=>{
                 state.setYValue(parseFloat(e.target.value));
             }