[Bug]: V9 Card: when card is focusable (focusMode='tab-only'), onKeyDown events for pressing Enter are not executed

[katiearriagam]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 10 10.0.22631
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1265U
    Memory: 14.86 GB / 31.83 GB
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.3527

Are you reporting Accessibility issue?

yes

Reproduction

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

Bug Description

tab-only focusMode replicates the no-tab "Press Enter to focus content" behaviour but it should not (because it's already covered by pressing "tab"), and this in turn disallows applying the "onClick" behaviour to the "Enter key" event (which breaks a11y, because the onClick and "press Enter" behaviours should match).

Actual Behavior

When a card is using focusMode='tab-only' and it has an event handler onKeyDown that handles Enter logic, this logic is not executed. In the example on the repro provided, when the Card is focused, onKeyDown should be executed by pressing Enter, it instead navigates to the action button.

Expected Behavior

The onKeyDown event provided in the Card component should be executed. Example scenario: the card itself might navigate on Enter and tabbing might navigation into, across and out of the Card containers by using focusMode="tab-only".

Logs

No response

Requested priority

Normal

Products/sites affected

Microsoft Loop

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.

[katiearriagam]

Related to: #31529

[kolaps33]

I have experience the same behavior... would be nice to fix it...