Fluentui: ChoiceGroup Component issue on firefox

[bowenqiang]

Bug Report

• __Package version(s)__: (5.52.0 and 6.5.0 )
• __Browser and OS versions__: (firefox 61.0.1, windows 10 1803)

Priorities and help requested:

Are you willing to submit a PR to fix? (No)

Requested priority: (Normal)

Products/sites affected: (if applicable)

Describe the issue:

ChoiceGroup Component behaves differently on Firefox and other browsers( IE, Edge, Chrome) when user presses 'tab' key. Assume we have an element before and after ChoiceGroup component and ChoiceGroup component contains three options. Current focus is on the very first element, then press tab. Focus should move to the first option in ChoiceGroup. So far so good. Then press tab key again. obverse the behavior.

Actual behavior:

On other browsers(IE, Edge, Chrome), the focus goes to the element after the ChoiceGroup.
On firefox, the focus goes to the second option in ChoiceGroup.

Expected behavior:

on Firefox, the focus goes to the element after the ChoiceGroup.

If applicable, please provide a codepen repro:

try your homepage demo for the ChoicGroup (https://developer.microsoft.com/en-us/fabric#/components/choicegroup). try it on the example for "ChoiceGroup with icons"

[dzearing]

This maybe be default behavior of input radios. Can you please investigate? @natalieethell

[natalieethell]

Hey! Just investigated and it looks like the default behavior of input radios on Firefox is different than in a browser like Chrome.

Here's a Codepen I made with both a radiogroup (made up of input radio elements) and a ChoiceGroup: https://codepen.io/naethell/pen/yqpZWo.

In Chrome, both the ChoiceGroup and the radiogroup have this expected behavior of focusing on the element immediately after.

In Edge, the ChoiceGroup has this expected behavior, and the radiogroup does not, which is interesting.

In Firefox, the ChoiceGroup and the radiogroup have the same, undesired behavior—the focus goes to the second option in the group.

In IE, I can't seem to get the CodePen to load, but the ChoiceGroup has the expected behavior on https://developer.microsoft.com/en-us/fabric#/components/choicegroup.

[cliffkoh]

Hi @bowenqiang, given that Firefox exhibits the same behavior for pure input radios, we will close this issue as being non-actionable (it is a default browser behavior).