[Bug]: Swatch Picker onKeyDown Handling (Tab) + (Shift + Tab)

[Cam-Bloom]

Component

SwatchPicker

Package version

9.54.2

React version

18.3.1

Environment

System:
    OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (20) x64 Intel(R) Core(TM) Ultra 7 265
    Memory: 32.18 GB / 45.94 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  npmPackages:
    @fluentui/react: ^8.91.1 => 8.110.2 
    @fluentui/react-components: 9.54.2 => 9.72.7 
    @fluentui/react-datepicker-compat: 0.4.50 => 0.6.20 
    @fluentui/react-icons: ^2.0.232 => 2.0.256 
    @fluentui/react-migration-v8-v9: ^9.2.16 => 9.2.16 
    @fluentui/theme-samples: ^8.6.20 => 8.6.20 
    @types/react: 18.3.1 => 18.3.1 
    @types/react-dom: 18.3.1 => 18.3.1 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1

Current Behavior

Currently the onKeyDown handing is not firing for tab or shift + tab, keyboard events on the swatch picker, making it unable to add side effects to tab handling for the component. In my case this is needed as integrating the Swatch Picker with AG Grid as a cell editor and this onKeyDown handling is need.

The radiogroup role used for the SwatchPicker does not fully match standard radio keyboard behavior because color selection must be confirmed by pressing enter/space, unlike Radiogroup. But because this pattern has more robust cross-platform support, the radiogroup role will be used for the row layout.

I understand from the documentation that some keyboard handling differs from the radiogroup role, however i can understand differences for handling that the component itself uses, such as any of the arrow keys, enter or spacebar, but believe the onKeyDown should be fired for tab or shift + tab keyboard input.

Expected Behavior

onKeyDown to be fired in similar way to handled on HTML5 button or radio.

Reproduction

https://stackblitz.com/edit/nxpw7wzg?file=src%2Fexample.tsx

Steps to reproduce

The reproduction provided is adjusted from the docs. I have added a function handleKeyDown the purpose of this function is to console.log when on key down and if the key is tab or shift + tab console.log 'forwards' or 'backwards' respectively. This is applied to both of the Swatch Pickers then a HTML 5 button and radio. I have labelled which added elements have handler attached.

1. Open Dev tools and console
2. From top of document use 'tab' to navigate through elements to bottom
3. Use 'shift' + 'tab' to navigate back to top of document
4. Observe the console as you do this

From tabbing top to bottom and then bottom to top should get the following console output

example.tsx:47 ---------------------------------------------
example.tsx:48 hit keydown
example.tsx:49 Target:  Button
example.tsx:53 forwards
example.tsx:47 ---------------------------------------------
example.tsx:48 hit keydown
example.tsx:49 Target:  Radio
example.tsx:53 forwards
example.tsx:47 ---------------------------------------------
example.tsx:48 hit keydown
example.tsx:49 Target:  Radio
example.tsx:53 backward
example.tsx:47 ---------------------------------------------
example.tsx:48 hit keydown
example.tsx:49 Target:  Button
example.tsx:53 backward

So like with the radio input and fieldset i would expect ColourSwatch and SwatchPicker respectively to behave in the same way.

Are you reporting an Accessibility issue?

None

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.