Skip to content

[Bug]: Card component - If focusMode = 'tab-only', and the Card has an onClick event handler, then focusMode regresses to no-tab behaviour #31529

@katiearriagam

Description

@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

If focusMode = 'tab-only', and the Card has an event handler (especially 'onClick'), then focusMode regresses to no-tab behaviour (which is both undocumented and unexpected).
This behaviour is introduced here.

Actual Behavior

When the card is focusable, onClick event handlers are not allowed and adding them regresses the focusMode to no-tab.

Expected Behavior

When the card is focused, onClick event handlers should be supported. As well as the onKeyDown/onKeyUp for pressing Enter which should match the onClick behavior.

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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions