fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

[Bug]: useArrowNavigationGroup with grid or grid-linear navigation in RadioGroup doesn't update checked option as expected

Open marciat opened this issue 1 year ago • 0 comments

Library

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

System Info

System:
    OS: Linux 6.2 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD EPYC 7763 64-Core Processor
    Memory: 58.24 GB / 62.78 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash

Are you reporting Accessibility issue?

yes

Reproduction

https://codesandbox.io/p/sandbox/intelligent-bird-j5wnhr?file=%2Fsrc%2Fexample.tsx

Bug Description

Scenario description: We want to have radio buttons displayed in a grid. Since there are 25 items, we want to facilitate keyboard navigation by having bi-dimensional grid navigation. We tried using useArrowNavigationGroup with grid and grid-linear axis. The radio group is not inside a toolbar.

Actual Behavior

When navigating through the radio buttons with the arrow keys, the selected option is not always the option in focus. Only in some cases does moving the focus also change the selected option. With grid-linear axis the selected option only moves with the focus in the following cases:

  • when focus is on the first row and the user presses Up arrow, or in the last row when user presses Down arrow;
  • when focus is on the first option and the user presses Left/Up arrow, or in the last option when the user presses Right/Down arrow.

With grid axis, it also happens when the focus is on the the first column and the user presses Left arrow, or in the last column when the user presses Right arrow.

In all other cases, the focus moves around the options, but the checked option doesn't change. User needs to press Space key to select the focused option.

Expected Behavior

We expect that the selected option will be the option that is focused. As the focus moves around the options, the selected option would also update. Radio Group Pattern - Keyboard Interaction

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

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

marciat avatar Feb 15 '24 16:02 marciat