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

package/dist/main.js

@@ -35,139 +35,139 @@ $parcel$export($47925bd68062ac17$exports, "useColorArea", () => $47925bd68062ac1
 
 var $4f97b428b4cbcd4e$exports = {};
 var $f141a15c3076a67b$exports = {};
-$f141a15c3076a67b$exports = JSON.parse("{\"twoDimensionalSlider\":\"شريط تمرير ثنائي الأبعاد\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$f141a15c3076a67b$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"أداة انتقاء اللون\",\"twoDimensionalSlider\":\"مُنزلق 2D\"}");
 
 
 var $435ac2a9fdd2ae5e$exports = {};
-$435ac2a9fdd2ae5e$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D плъзгач\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$435ac2a9fdd2ae5e$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Средство за избиране на цвят\",\"twoDimensionalSlider\":\"2D плъзгач\"}");
 
 
 var $6b29758b432284f5$exports = {};
-$6b29758b432284f5$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D posuvník\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$6b29758b432284f5$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Výběr barvy\",\"twoDimensionalSlider\":\"2D posuvník\"}");
 
 
 var $357597bcf4afd6fb$exports = {};
-$357597bcf4afd6fb$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-skyder\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$357597bcf4afd6fb$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Farvevælger\",\"twoDimensionalSlider\":\"2D-skyder\"}");
 
 
 var $ddc6333960e2b591$exports = {};
-$ddc6333960e2b591$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-Schieberegler\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$ddc6333960e2b591$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Farbwähler\",\"twoDimensionalSlider\":\"2D-Schieberegler\"}");
 
 
 var $417ee93d3ca474c0$exports = {};
-$417ee93d3ca474c0$exports = JSON.parse("{\"twoDimensionalSlider\":\"Ρυθμιστικό 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$417ee93d3ca474c0$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Επιλογέας χρωμάτων\",\"twoDimensionalSlider\":\"Ρυθμιστικό 2D\"}");
 
 
 var $519561bc6dcff98b$exports = {};
-$519561bc6dcff98b$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D slider\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$519561bc6dcff98b$exports = JSON.parse("{\"colorPicker\":\"Color picker\",\"twoDimensionalSlider\":\"2D slider\",\"colorNameAndValue\":\"{name}: {value}\",\"colorInputLabel\":\"{label}, {channelLabel}\"}");
 
 
 var $7a34c3fcc03402b8$exports = {};
-$7a34c3fcc03402b8$exports = JSON.parse("{\"twoDimensionalSlider\":\"Control deslizante en 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$7a34c3fcc03402b8$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Selector de color\",\"twoDimensionalSlider\":\"Regulador 2D\"}");
 
 
 var $860f86d6eae22cba$exports = {};
-$860f86d6eae22cba$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-liugur\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$860f86d6eae22cba$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Värvivalija\",\"twoDimensionalSlider\":\"2D-liugur\"}");
 
 
 var $8525d3c77b8a51b0$exports = {};
-$8525d3c77b8a51b0$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-liukusäädin\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$8525d3c77b8a51b0$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Värimuokkain\",\"twoDimensionalSlider\":\"2D-liukusäädin\"}");
 
 
 var $8240fe6825e900ec$exports = {};
-$8240fe6825e900ec$exports = JSON.parse("{\"twoDimensionalSlider\":\"Curseur 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$8240fe6825e900ec$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name} : {value}\",\"colorPicker\":\"Sélecteur de couleurs\",\"twoDimensionalSlider\":\"Curseur 2D\"}");
 
 
 var $377849238307c673$exports = {};
-$377849238307c673$exports = JSON.parse("{\"twoDimensionalSlider\":\"מחוון דו-ממדי\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$377849238307c673$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"בוחר הצבעים\",\"twoDimensionalSlider\":\"מחוון דו מימדי\"}");
 
 
 var $5a6f44e0ec14b083$exports = {};
-$5a6f44e0ec14b083$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D kliznik\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$5a6f44e0ec14b083$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Odabir boje\",\"twoDimensionalSlider\":\"2D klizač\"}");
 
 
 var $82327d6e71e3e273$exports = {};
-$82327d6e71e3e273$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D csúszka\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$82327d6e71e3e273$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Színválasztó\",\"twoDimensionalSlider\":\"2D-csúszka\"}");
 
 
 var $b1e297275c248ab8$exports = {};
-$b1e297275c248ab8$exports = JSON.parse("{\"twoDimensionalSlider\":\"Dispositivo di scorrimento 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$b1e297275c248ab8$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Selettore colore\",\"twoDimensionalSlider\":\"Cursore 2D\"}");
 
 
 var $b39c9f2638b4d2b9$exports = {};
-$b39c9f2638b4d2b9$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D スライダー\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$b39c9f2638b4d2b9$exports = JSON.parse("{\"colorInputLabel\":\"{label}、{channelLabel}\",\"colorNameAndValue\":\"{name} : {value}\",\"colorPicker\":\"カラーピッカー\",\"twoDimensionalSlider\":\"2D スライダー\"}");
 
 
 var $2d2fbf4195848a62$exports = {};
-$2d2fbf4195848a62$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D 슬라이더\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$2d2fbf4195848a62$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"색상 피커\",\"twoDimensionalSlider\":\"2D 슬라이더\"}");
 
 
 var $ea88350d0828fa2c$exports = {};
-$ea88350d0828fa2c$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D slankiklis\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$ea88350d0828fa2c$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Spalvų parinkiklis\",\"twoDimensionalSlider\":\"2D slankiklis\"}");
 
 
 var $0e0acd541630120a$exports = {};
-$0e0acd541630120a$exports = JSON.parse("{\"twoDimensionalSlider\":\"Plaknes slīdnis\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$0e0acd541630120a$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Krāsu atlasītājs\",\"twoDimensionalSlider\":\"2D slīdnis\"}");
 
 
 var $952a458224052046$exports = {};
-$952a458224052046$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-glidebryter\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$952a458224052046$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Fargevelger\",\"twoDimensionalSlider\":\"2D-glidebryter\"}");
 
 
 var $2d8e195bc5683483$exports = {};
-$2d8e195bc5683483$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-schuifregelaar\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$2d8e195bc5683483$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Kleurkiezer\",\"twoDimensionalSlider\":\"2D-schuifregelaar\"}");
 
 
 var $750d83f83c5f38d4$exports = {};
-$750d83f83c5f38d4$exports = JSON.parse("{\"twoDimensionalSlider\":\"Suwak 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$750d83f83c5f38d4$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Próbnik kolorów\",\"twoDimensionalSlider\":\"Suwak 2D\"}");
 
 
 var $656b2846f611067c$exports = {};
-$656b2846f611067c$exports = JSON.parse("{\"twoDimensionalSlider\":\"Controle deslizante 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$656b2846f611067c$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Seletor de cores\",\"twoDimensionalSlider\":\"Controle deslizante 2D\"}");
 
 
 var $58ce120874d069dd$exports = {};
-$58ce120874d069dd$exports = JSON.parse("{\"twoDimensionalSlider\":\"Controlo de deslize 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$58ce120874d069dd$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Seletor de cores\",\"twoDimensionalSlider\":\"Controle deslizante 2D\"}");
 
 
 var $fd6c85b4eba18825$exports = {};
-$fd6c85b4eba18825$exports = JSON.parse("{\"twoDimensionalSlider\":\"Cursor 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$fd6c85b4eba18825$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Selector de culori\",\"twoDimensionalSlider\":\"Glisor 2D\"}");
 
 
 var $8849a15ecc435984$exports = {};
-$8849a15ecc435984$exports = JSON.parse("{\"twoDimensionalSlider\":\"Двумерный ползунок\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$8849a15ecc435984$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Палитра цветов\",\"twoDimensionalSlider\":\"Ползунок 2D\"}");
 
 
 var $5192372f064be783$exports = {};
-$5192372f064be783$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D jazdec\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$5192372f064be783$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Výber farieb\",\"twoDimensionalSlider\":\"2D jazdec\"}");
 
 
 var $094525f9176df65d$exports = {};
-$094525f9176df65d$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-drsnik\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$094525f9176df65d$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Izbirnik barv\",\"twoDimensionalSlider\":\"2D drsnik\"}");
 
 
 var $9795aa59b4ad40ed$exports = {};
-$9795aa59b4ad40ed$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D клизач\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$9795aa59b4ad40ed$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Birač boja\",\"twoDimensionalSlider\":\"2D klizač\"}");
 
 
 var $9ebaa0b485f13e4d$exports = {};
-$9ebaa0b485f13e4d$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-reglage\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$9ebaa0b485f13e4d$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Färgväljaren\",\"twoDimensionalSlider\":\"2D-reglage\"}");
 
 
 var $ad58e2e4e0f2e750$exports = {};
-$ad58e2e4e0f2e750$exports = JSON.parse("{\"twoDimensionalSlider\":\"2B slayt gösterisi\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$ad58e2e4e0f2e750$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Renk Seçici\",\"twoDimensionalSlider\":\"2D sürgü\"}");
 
 
 var $dafc19306f8b2dfc$exports = {};
-$dafc19306f8b2dfc$exports = JSON.parse("{\"twoDimensionalSlider\":\"Повзунок 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$dafc19306f8b2dfc$exports = JSON.parse("{\"colorInputLabel\":\"{label}, {channelLabel}\",\"colorNameAndValue\":\"{name}: {value}\",\"colorPicker\":\"Палітра кольорів\",\"twoDimensionalSlider\":\"Повзунок 2D\"}");
 
 
 var $d31a8b80af5acc16$exports = {};
-$d31a8b80af5acc16$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D 滑块\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$d31a8b80af5acc16$exports = JSON.parse("{\"colorInputLabel\":\"{label}、{channelLabel}\",\"colorNameAndValue\":\"{name}：{value}\",\"colorPicker\":\"拾色器\",\"twoDimensionalSlider\":\"2D 滑块\"}");
 
 
 var $7377d28aec5fa200$exports = {};
-$7377d28aec5fa200$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D 滑桿\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+$7377d28aec5fa200$exports = JSON.parse("{\"colorInputLabel\":\"{label}，{channelLabel}\",\"colorNameAndValue\":\"{name}：{value}\",\"colorPicker\":\"檢色器\",\"twoDimensionalSlider\":\"2D 滑桿\"}");
 
 
 $4f97b428b4cbcd4e$exports = {
@@ -425,7 +425,7 @@ function $99936ad0bf67c8c4$export$dd62420467d245ca({ direction: direction , stat
 
 
 function $47925bd68062ac17$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 = $kZqDi$reactariai18n.useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($4f97b428b4cbcd4e$exports)));
     let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener  } = $kZqDi$reactariautils.useGlobalListeners();
     let { direction: direction , locale: locale  } = $kZqDi$reactariai18n.useLocale();
@@ -452,6 +452,7 @@ function $47925bd68062ac17$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);
@@ -471,10 +472,7 @@ function $47925bd68062ac17$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 = {
@@ -486,6 +484,7 @@ function $47925bd68062ac17$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;
@@ -493,8 +492,9 @@ function $47925bd68062ac17$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;
@@ -505,10 +505,18 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
             isOnColorArea.current = undefined;
             stateRef.current.setDragging(false);
             focusInput(focusedInputRef.current ? focusedInputRef : inputXRef);
-            focusedInputRef.current = undefined;
         }
     };
     let { moveProps: movePropsThumb  } = $kZqDi$reactariainteractions.useMove(moveHandler);
+    let valueChangedViaKeyboard = $kZqDi$react.useRef(false);
+    let { focusWithinProps: focusWithinProps  } = $kZqDi$reactariainteractions.useFocusWithin({
+        onFocusWithinChange: (focusWithin)=>{
+            if (!focusWithin) {
+                valueChangedViaKeyboard.current = false;
+                focusedInputRef.current;
+            }
+        }
+    });
     let currentPointer = $kZqDi$react.useRef(undefined);
     let isOnColorArea = $kZqDi$react.useRef(false);
     let { moveProps: movePropsContainer  } = $kZqDi$reactariainteractions.useMove({
@@ -525,6 +533,7 @@ function $47925bd68062ac17$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);
@@ -539,6 +548,7 @@ function $47925bd68062ac17$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;
@@ -558,6 +568,7 @@ function $47925bd68062ac17$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();
@@ -575,6 +586,7 @@ function $47925bd68062ac17$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();
@@ -618,34 +630,53 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
                 onThumbDown(e.changedTouches[0].identifier);
             }
         }
-    }, keyboardProps, movePropsThumb);
+    }, focusWithinProps, keyboardProps, movePropsThumb);
+    let { focusProps: xInputFocusProps  } = $kZqDi$reactariainteractions.useFocus({
+        onFocus: ()=>{
+            focusedInputRef.current = inputXRef.current;
+        }
+    });
+    let { focusProps: yInputFocusProps  } = $kZqDi$reactariainteractions.useFocus({
+        onFocus: ()=>{
+            focusedInputRef.current = inputYRef.current;
+        }
+    });
     let isMobile = $kZqDi$reactariautils.isIOS() || $kZqDi$reactariautils.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 = $kZqDi$reactariautils.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 = $kZqDi$reactariautils.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 = $kZqDi$reactariautils.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 = $kZqDi$reactariautils.useLabels({
+        ...props,
+        'aria-label': ariaLabel ? `${ariaLabel} ${colorPickerLabel}` : undefined
+    }, isMobile ? colorPickerLabel : undefined);
+    let ariaRoleDescription = formatMessage('twoDimensionalSlider');
     let { visuallyHiddenProps: visuallyHiddenProps  } = $kZqDi$reactariavisuallyhidden.useVisuallyHidden({
         style: {
             opacity: '0.0001',
@@ -680,28 +711,21 @@ function $47925bd68062ac17$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));
             }
@@ -709,29 +733,22 @@ function $47925bd68062ac17$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));
             }