fix(react-color-picker): Y axis focus fix (#33899)

ValentinaKozlova · web-flow · commit a218a5dc65fa · 2025-02-25T15:33:14.000+01:00
diff --git a/change/@fluentui-react-color-picker-preview-a6dae465-96e2-4e2c-918b-fe5bedd1404f.json b/change/@fluentui-react-color-picker-preview-a6dae465-96e2-4e2c-918b-fe5bedd1404f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: focus on Y axis",
+  "packageName": "@fluentui/react-color-picker-preview",
+  "email": "v.kozlova13@gmail.com",
+  "dependentChangeType": "patch"
+}
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
@@ -29,6 +29,7 @@ describe('ColorArea', () => {
             <input
               class="fui-ColorArea__inputY"
               id="sliderY-16"
+              tabindex="-1"
               type="range"
               value="50"
             />
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
@@ -184,7 +184,7 @@ export const useColorArea_unstable = (props: ColorAreaProps, ref: React.Ref<HTML
       defaultProps: {
         id: useId('sliderY-'),
         type: 'range',
-        ...(activeAxis && { tabIndex: activeAxis === 'y' ? 0 : -1 }),
+        tabIndex: activeAxis && activeAxis === 'y' ? 0 : -1,
       },
       elementType: 'input',
     }),
