Uploaded image for project: 'Apache Flex'
  1. Apache Flex
  2. FLEX-28820

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

    XMLWordPrintableJSON

Details

    • Bug
    • Status: Resolved
    • Minor
    • Resolution: Fixed
    • Adobe Flex SDK 4.1 (Release)
    • Adobe Flex SDK Next
    • Spark: RadioButton
    • None
    • Affected OS(s): All OS Platforms
      Affected OS(s): All OS Platforms
      Language Found: English

    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.

      Attachments

        Activity

          People

            adobejira Adobe JIRA
            adobejira Adobe JIRA
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: