[Bug]: ChoiceGroup focus conflict when it's the first component inside a focus zone

liyatilahun commented 2 years ago

Library

React / v8 (@fluentui/react)

System Info

N/A

Are you reporting Accessibility issue?

yes

Reproduction

https://codesandbox.io/s/focustrapzone-choicegroup-focus-conflict-9d96j?file=/src/index.tsx:79-92 (Comment out the TextField inside the code to repro the issue)

Bug Description

Actual Behavior

The focus on the radio button does not focus on the selected option, but instead focus on the first option of the choice group. This happens when using keyboard navigation ( keyUp and keyDown and space). But it works as expected for shift-tab and tab. To repro this problem the ChoiceGroup should be the first component inside the focus zone.

Expected Behavior

The focus on the radio button should focus on the selected option instead of the first option when using keyboard navigation.

Logs

No response

Requested priority

Normal

Products/sites affected

word-online, ppt-online

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.

SavannahBourgeois commented 2 years ago

@smhigley as FYI since this is an accessibility bug we are seeing in some of our dialogs where the focus rect is not visible initially on a choicegroup

TristanWatanabe commented 1 year ago

@liyatilahun I seem to be unable to repro the issue with the latest v8. Can you please confirm if this has been fixed? Or if I'm missing something as far as how to repro the issue in which case, please let me know!

ChoiceGroup Focus

liyatilahun commented 1 year ago

Hi @TristanWatanabe, for the key down, I wasn't able to repro the issue.

For key up, I was able to repro the issue. When I press key up, the focus goes to Option D. I was expecting Option A since that is the choice above option B. choice_group_key_up_bug

For space key I'm still seeing the issue. When I press on Space key, the focus goes to the first option and not the selected option. choice_group_space_key_bug

TristanWatanabe commented 1 year ago

Ok I was finally able to repro this - the steps taken were: 1) Open control in a separate window: https://h7hp77.csb.app/ 2) Tab into ChoiceGroup (Option B will be focused) 3) Click anywhere outside of control 4) Observe as focus indicator goes to Option A 5) Pressing KeyUp will move focus to Option D instead of Option A

The root of the issue seems to be that when navigating away from the control(s) wrapped in a FocusTrapZone, focus always goes back to the first focusable element.