Research radio group accessibility

[nakayan5]

Description

read this article and research radio accessibility

modify component if necessary

Problem Statement/Justification

none

Proposed Solution or API

No response

Alternatives

No response

Are you willing to participate in implementing this feature and create a pull request include the implementation?

None

Additional Information

No response

[taroj1205]

@yamada-ui/radio is applicable to this issue

Keyboard Interaction

• [Tab] and [Shift] + [Tab] move focus into and out of the radio group.
  • If a radio button is checked, focus is set on the checked button.
  • If none of the radio buttons are checked, focus is set on the first radio button in the group.
• [Space] If the focused radio button is not checked, unchecks the currently checked radio button and checks the focused radio button. Otherwise, does nothing.
• [Enter] (optional) If the focused radio button is not checked, unchecks the currently checked radio button and checks the focused radio button. Otherwise, does nothing.
• [Right Arrow]
  • When focus is on a radio button and that radio button is not the last radio button in the radio group, moves focus to the next radio button.
  • When focus is on the last radio button in the radio group and that radio button is not the last element in the toolbar, moves focus to the next element in the toolbar.
  • When focus is on the last radio button in the radio group and that radio button is also the last element in the toolbar, moves focus to the first element in the toolbar.
• [Left Arrow]
  • When focus is on a radio button and that radio button is not the first radio button in the radio group, moves focus to the previous radio button.
  • When focus is on the first radio button in the radio group and that radio button is not the first element in the toolbar, moves focus to the previous element in the toolbar.
  • When focus is on the first radio button in the radio group and that radio button is also the first element in the toolbar, moves focus to the last element in the toolbar.
• [Down Arrow] (optional) Moves focus to the next radio button in the radio group. If focus is on the last radio button in the radio group, moves focus to the first radio button in the group.
• [Up Arrow] (optional): Moves focus to the previous radio button in the radio group. If focus is on the first radio button in the radio group, moves focus to the last radio button in the group.

WAI-ARIA Roles, States, and Properties

• The radio buttons are contained in or owned by an element with role radiogroup.
• Each radio button element has role radio.
• If a radio button is checked, the radio element has aria-checked set to true. If it is not checked, it has aria-checked set to false.
• Each radio element is labelled by its content, has a visible label referenced by aria-labelledby, or has a label specified with aria-label.
• The radiogroup element has a visible label referenced by aria-labelledby or has a label specified with aria-label.
• If elements providing additional information about either the radio group or each radio button are present, those elements are referenced by the radiogroup element or radio elements with the aria-describedby property.

[taroj1205]

It seems like radio group:

• Has the role group instead of radiogroup.
• Each radio button does not have the role radio.
• They have data-checked instead of aria-checked.
• Does not have aria-label.
• Does not have aria-describedby

[illionillion]

It seems like radio group:

• Has the role group instead of radiogroup.
• Each radio button does not have the role radio.
• They have data-checked instead of aria-checked.
• Does not have aria-label.
• Does not have aria-describedby

@taroj1205
Do these need to be resolved?
If so, we need to create an Issue.

[illionillion]

[Space] If the focused radio button is not checked, unchecks the currently checked radio button and checks the focused radio button. Otherwise, does nothing.

This item is not optional and needs to be addressed.