[Feature]: Provide tab functionalities similar to v8 color picker every aspect.

[divya7shahi]

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

[pradeept95]

Hi @divya7shahi ,

FYI: Here is the spec for the SwatchPicker Component which explains current possible keyboard navigations along with other design choice for the it.
https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-swatch-picker/library/docs/Spec.md#keyboard

[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