[FLEX-28820] RadioButtonGroup sorts by group indices in breadth-first order while ignoring tabIndex resulting in incorrect keyboard navigation and accessibility labeling

• Type: Bug
• Status: Resolved
• Priority: Minor
• Resolution: Fixed
• Affects Version/s: Adobe Flex SDK 4.1 (Release)
• Fix Version/s: Adobe Flex SDK Next
• Component/s: Spark: RadioButton
• Environment: Affected OS(s): All OS Platforms; Affected OS(s): All OS Platforms; Language Found: English
• Assignee: Adobe JIRA
• Reporter: Adobe JIRA
• Created: 17/Oct/11 14:31
• Updated: 21/Oct/11 14:57
• Resolved: 21/Oct/11 14:57

Description

Steps to reproduce:
1. Create an MXML application containing more than two RadioButtons at different nestLevels in the same RadioButtonGroup. For example, the following MXML snippet groups the RadioButton items in columns and then tries to order them using tabIndex.

<s:FormItem label="Circle of Hell">
<s:HGroup width="80%">
<s:VGroup width="50%">
<s:Group>
<s:RadioButton
label="1: Limbo"
groupName="radioButtonGroup_1"
tabIndex="1"/>
</s:Group>
<s:RadioButton
label="3: Gluttony"
groupName="radioButtonGroup_1"
tabIndex="3"/>
<s:Group>
<s:RadioButton
label="5: Anger"
groupName="radioButtonGroup_1"
tabIndex="5"/>
</s:Group>
<s:RadioButton
label="7: Violence"
groupName="radioButtonGroup_1"
tabIndex="7"/>
<s:Group>
<s:RadioButton
label="9: Treachery"
groupName="radioButtonGroup_1"
tabIndex="9"/>
</s:Group>
</s:VGroup>
<s:VGroup width="50%">
<s:Group>
<s:RadioButton
label="2: Lust"
groupName="radioButtonGroup_1"
tabIndex="2"/>
</s:Group>
<s:RadioButton
label="4: Greed"
groupName="radioButtonGroup_1"
tabIndex="4"/>
<s:Group>
<s:RadioButton
label="6: Heresy"
groupName="radioButtonGroup_1"
tabIndex="6"/>
</s:Group>
<s:RadioButton
label="8: Fraud"
groupName="radioButtonGroup_1"
tabIndex="8"/>
</s:VGroup>
</s:HGroup>
</s:FormItem>

2. Publish the application.
3. Tab to the first RadioButton in the RadioButtonGroup. Use the down arrow key to select the next RadioButton.

Actual Results:

The arrow key seems to skip items.

This is because as the RadioButton items are added to the RadioButtonGroup, the group is sorted by nestLevel using the RadioButtonGroup.breadthOrderCompare() sorting function which ignores any specified tabIndex.

The RadioButtonAccImpl uses the index position of each RadioButton item in the RadioButtonGroup to append an "index of total" string to the item's accessibility name, which makes this behavior particularly confusing for screen reader users.

Expected Results:

RadioButtonGroup should respect tabIndex when sorting RadioButton items as they are added.
Navigating using the arrow keys should follow the tab order if tabIndices are specified.

Workaround (if any):

Don't create layouts of RadioButtons that have RadioButtons at different nestLevels. Or patch RadioButtonGroup.breadthOrderCompare() to account for tabIndex.