From b9a11c54c2b7bd6d003ef1952b59f63647143451 Mon Sep 17 00:00:00 2001
From: Valentyna <vkozlova@microsoft.com>
Date: Wed, 11 Dec 2024 10:23:41 -0800
Subject: [PATCH] fix(react-color-picker): active axis for ColorPicker (#33415)

---
 ...eview-efdd71e7-571d-48bf-9e41-37f6d220a529.json |  7 +++++++
 .../src/components/ColorArea/ColorArea.cy.tsx      | 12 ++++++------
 .../src/components/ColorArea/ColorArea.test.tsx    |  1 -
 .../src/components/ColorArea/useColorArea.ts       | 14 +-------------
 4 files changed, 14 insertions(+), 20 deletions(-)
 create mode 100644 change/@fluentui-react-color-picker-preview-efdd71e7-571d-48bf-9e41-37f6d220a529.json

diff --git a/change/@fluentui-react-color-picker-preview-efdd71e7-571d-48bf-9e41-37f6d220a529.json b/change/@fluentui-react-color-picker-preview-efdd71e7-571d-48bf-9e41-37f6d220a529.json
new file mode 100644
index 0000000000000..9af6e07321800
--- /dev/null
+++ b/change/@fluentui-react-color-picker-preview-efdd71e7-571d-48bf-9e41-37f6d220a529.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-color-picker): active axis for ColorPicker",
+  "packageName": "@fluentui/react-color-picker-preview",
+  "email": "vkozlova@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-color-picker-preview/library/src/components/ColorArea/ColorArea.cy.tsx b/packages/react-components/react-color-picker-preview/library/src/components/ColorArea/ColorArea.cy.tsx
index 7af7991004db3..2a9b49c4902bf 100644
--- a/packages/react-components/react-color-picker-preview/library/src/components/ColorArea/ColorArea.cy.tsx
+++ b/packages/react-components/react-color-picker-preview/library/src/components/ColorArea/ColorArea.cy.tsx
@@ -24,7 +24,7 @@ describe('ColorArea', () => {
   describe('keyboard navigation', () => {
     it('color should be changed correctly', () => {
       mountFluent(<ColorAreaNavigation color={{ h: 324, s: 0.5, v: 0.5 }} />);
-      cy.realPress('Tab');
+      cy.get('.fui-ColorArea__inputX').focus();
       cy.realPress('ArrowDown');
       cy.get('#color').should('have.text', '#7d3e64');
       cy.realPress('ArrowDown');
@@ -45,7 +45,7 @@ describe('ColorArea', () => {
     });
     it('color selected on right edge correctly', () => {
       mountFluent(<ColorAreaNavigation color={{ h: 106, s: 0.96, v: 0.1 }} />);
-      cy.realPress('Tab');
+      cy.get('.fui-ColorArea__inputX').focus();
       cy.realPress('ArrowRight');
       cy.get('#color').should('have.text', '#071a01');
       cy.realPress('ArrowRight');
@@ -55,7 +55,7 @@ describe('ColorArea', () => {
     });
     it('color selected on bottom edge correctly', () => {
       mountFluent(<ColorAreaNavigation color={{ h: 111, s: 1, v: 0.03 }} />);
-      cy.realPress('Tab');
+      cy.get('.fui-ColorArea__inputX').focus();
       cy.realPress('ArrowDown');
       cy.get('#color').should('have.text', '#010500');
       cy.realPress('ArrowDown');
@@ -65,7 +65,7 @@ describe('ColorArea', () => {
     });
     it('color selected on left edge correctly', () => {
       mountFluent(<ColorAreaNavigation color={{ h: 111, s: 0.03, v: 0.45 }} />);
-      cy.realPress('Tab');
+      cy.get('.fui-ColorArea__inputX').focus();
       cy.realPress('ArrowLeft');
       cy.get('#color').should('have.text', '#717370');
       cy.realPress('ArrowLeft');
@@ -75,7 +75,7 @@ describe('ColorArea', () => {
     });
     it('color selected on top edge correctly', () => {
       mountFluent(<ColorAreaNavigation color={{ h: 106, s: 1, v: 0.97 }} />);
-      cy.realPress('Tab');
+      cy.get('.fui-ColorArea__inputX').focus();
       cy.realPress('ArrowUp');
       cy.get('#color').should('have.text', '#3afa00');
       cy.realPress('ArrowUp');
@@ -85,7 +85,7 @@ describe('ColorArea', () => {
     });
     it('hue stays the same after achiving bottom edge', () => {
       mountFluent(<ColorAreaNavigation color={{ h: 111, s: 1, v: 0.03 }} />);
-      cy.realPress('Tab');
+      cy.get('.fui-ColorArea__inputX').focus();
       cy.realPress('ArrowDown');
       cy.realPress('ArrowDown');
       cy.realPress('ArrowDown');
diff --git a/packages/react-components/react-color-picker-preview/library/src/components/ColorArea/ColorArea.test.tsx b/packages/react-components/react-color-picker-preview/library/src/components/ColorArea/ColorArea.test.tsx
index 6030fffb24e8c..1c0cd4e4c23a8 100644
--- a/packages/react-components/react-color-picker-preview/library/src/components/ColorArea/ColorArea.test.tsx
+++ b/packages/react-components/react-color-picker-preview/library/src/components/ColorArea/ColorArea.test.tsx
@@ -23,7 +23,6 @@ describe('ColorArea', () => {
             <input
               class="fui-ColorArea__inputX"
               id="sliderX-15"
-              tabindex="0"
               type="range"
               value="100"
             />
diff --git a/packages/react-components/react-color-picker-preview/library/src/components/ColorArea/useColorArea.ts b/packages/react-components/react-color-picker-preview/library/src/components/ColorArea/useColorArea.ts
index 2a957cebcc4aa..e11b88384ff35 100644
--- a/packages/react-components/react-color-picker-preview/library/src/components/ColorArea/useColorArea.ts
+++ b/packages/react-components/react-color-picker-preview/library/src/components/ColorArea/useColorArea.ts
@@ -48,7 +48,7 @@ export const useColorArea_unstable = (props: ColorAreaProps, ref: React.Ref<HTML
   const saturation = Math.round(hsvColor.s * 100);
   const value = Math.round(hsvColor.v * 100);
 
-  const [activeAxis, setActiveAxis] = React.useState<'x' | 'y'>('x');
+  const [activeAxis, setActiveAxis] = React.useState<'x' | 'y' | null>(null);
 
   const requestColorChange = useEventCallback((event: MouseEvent) => {
     if (!rootRef.current) {
@@ -208,17 +208,5 @@ export const useColorArea_unstable = (props: ColorAreaProps, ref: React.Ref<HTML
   state.inputX.value = saturation;
   state.inputY.value = value;
 
-  React.useEffect(() => {
-    // Focus the active axis input only when the active axis changes
-
-    if (activeAxis === 'x' && targetDocument?.activeElement !== xRef.current) {
-      xRef.current?.focus();
-    }
-
-    if (activeAxis === 'y' && targetDocument?.activeElement !== yRef.current) {
-      yRef.current?.focus();
-    }
-  }, [activeAxis, targetDocument?.activeElement]);
-
   return state;
 };