feat(react-swatch-picker): Add focusMode prop for tab/arrow key navigation

[Copilot]

• Explore SwatchPicker and Breadcrumb components to understand the pattern
• Add focusMode?: 'arrow' | 'tab' prop to SwatchPicker.types.ts (default: 'arrow')
• Update useSwatchPicker.ts to conditionally apply arrow navigation based on focusMode
• Remove focusMode tests from SwatchPicker.test.tsx
• Add Cypress focus behavior tests for focusMode="tab" in SwatchPicker.cy.tsx
• Add a Storybook story SwatchPickerFocusMode.stories.tsx demonstrating both modes
• Export new story from index.stories.tsx
• All Jest tests pass

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Feature]: Provide tab functionalities similar to v8 color picker every aspect.</issue_title>
<issue_description>### Area

React Components (@fluentui/react-components)

Describe the feature that you would like added

1. Want seamless navigation with tab between two color swatch.
2. Want seamless navigation with tab between two color sets.
3. Want if I am at last cell of of a color set it automatically shift to first cell of next color set.(moving to next line and cyclic)

Additional context

No response

Have you discussed this feature with our team

Yes, Fluent Team [Valentyna, Toshie, Gouttierre]

Validations

• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Priority

High

What needs to be done:

1. Add focusMode?: 'arrow' | 'tab' to SwatchPicker.types.ts where 'arrow' is a default one
2. Update usesSwatchPicker.ts with focusMode for tab</issue_description>

<agent_instructions>What needs to be done:

1. Add focusMode?: 'arrow' | 'tab' to SwatchPicker.types.ts where 'arrow' is a default one
2. Update usesSwatchPicker.ts with focusMode for tab
3. use react-breadcrumb for inspiration as it has the same focusMode
4. Add tests</agent_instructions>

Comments on the Issue (you are @copilot in this section)

@gouttierre 📢 - Spoken with @ValentinaKozlova who believes that it should be feasible to implement support for both tab and arrow key navigation. But will need to confirm with Ling. - Design (Toshie) is looped in to the conversations on Teams. - This request will go through backlog review in the next iteration. - This is to request will support Web Growth migrations.

cc ~ @tudorpopams, @paulgildea, @JustSlone

@ValentinaKozlova keep open

• Fixes [Feature]: Provide tab functionalities similar to v8 color picker every aspect. #33077

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[github-actions]

Pull request demo site: URL

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-components react-components: entire library	1.292 MB 323.045 kB	1.292 MB 323.065 kB	35 B 20 B
react-swatch-picker @fluentui/react-swatch-picker - package	104.27 kB 29.925 kB	104.305 kB 29.944 kB	35 B 19 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	70.397 kB 19.96 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	236.537 kB 68.697 kB
react-components react-components: FluentProvider & webLightTheme	43.612 kB 14.022 kB
react-portal-compat PortalCompatProvider	8.386 kB 2.624 kB
react-timepicker-compat TimePicker	108.174 kB 35.695 kB

_{🤖 This report was generated against 40043a9b44a1f6e27c89fa868fca83196fe82f4f}