feat(RadioButton): Add guidelines to avoid nesting elements

What does this MR do?

Adds a guideline to the behavior section of radio buttons that discourages mixing interactive elements between radio buttons. Avoiding this pattern prevents an accessibility issue from reaching the product. Inspired by this blog post: https://www.magentaa11y.com/checklist-web/radio/

Radio mixed with interactive elements

Avoid this pattern when possible! Radio groups are not supposed to consist of nested interactive elements. Radio button focus order is not what you may expect.

• By default, it is not expected behavior that each radio button can be tabbed to. This is how radio buttons naturally behave
• As soon as a radio button is selected, the selected radio input receives focus first from the group. As a result screen reader users may not discover a nested control for an option if they start switching between radio buttons alone

Does this MR meet the acceptance criteria?

• The MR title and commit messages meet the Pajamas commit conventions.
• The “What does this MR do?” section in the MR description is filled out, explaining the reasons for and scope of the proposed changes, per “Say why not just what”.
  • For example, if the MR is focused on usage guidelines, addressing accessibility challenges could be added in a separate MR.
• Relevant label(s) are applied to the MR.
• The MR is added to a milestone.
• If creating a new component page from scratch, it follows the page template structure.
• Content follows the Pajamas voice and tone guidelines, falling back on the GitLab Documentation Style Guide when needed.
• Related pages are cross-linked, where helpful. Component pages have related components and patterns defined in their Markdown front matter.
• If embedding a Figma file, it follows the Figma embed guide.
• Review requested from any GitLab designer or directly from a maintainer or trainee maintainer.

Links