feat(radio): add pf-radio

[ArathyKumar]

What I did

Developed a custom pf-radio component utilizing the standard <input type="radio" /> element for enhanced functionality and styling.

Testing Instructions

Deploy preview demo

1. Mouse Interaction

• Single Click: Clicking a radio button should select it.
• Subsequent Click: Clicking an already selected radio button should not deselect it.
• Group Selection: When clicking a different radio button within the same group, the previously selected radio button should be deselected, and the new radio button should be selected.

2. Keyboard Navigation

• Tab Key(on page navigation): Pressing the Tab key should focus on the first radio button in the group. If a radio button is already selected, that selected button should be focused instead of the first one.
• Shift + Tab(on page navigation): Pressing Shift + Tab should focus on the last radio button in the group. If a radio button is already selected, that selected button should be focused instead of the last one.
• Radio Selection: A radio button can be selected using the Space, or arrow keys.
• Arrow Keys:
• Arrow Down or Right: Pressing the Down Arrow or Right Arrow should move the focus in a clockwise direction within the radio group.
• Arrow Up or Left: Pressing the Up Arrow or Left Arrow should move the focus in a counterclockwise direction within the radio group.

Notes to Reviewers

Please note that the CSS variables, code comments, test cases, and updated documentation will be added asap.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3ed8f18

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for patternfly-elements ready!

Name	Link
🔨 Latest commit	82275a1
🔍 Latest deploy log	https://app.netlify.com/sites/patternfly-elements/deploys/67472a8652868300086a6c36
😎 Deploy Preview	https://deploy-preview-2882--patternfly-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[hellogreg]

So far, this is passing the tests you listed. However, I noticed that all the radio buttons are reading as "1 of 1" in screen readers, and not "1 of X."

[adamjohnson]

Tabbing Behavior

Looking at the "Multiple Groups" demo in Safari 18.1.1, there's currently some very strange tabbing behavior.

This can be fixed by giving unique values to the name attributes for each radio group. For example:

<p><code>&lt;pf-radio&gt;</code> group with same name inside different parent</p> <div class="radio-group-container"> <div class="radio-group"> <p>Score: </p> <pf-radio value="a" name="score2" label="A"></pf-radio> <pf-radio value="b" name="score2" label="B"></pf-radio> <pf-radio value="c" name="score2" label="C"></pf-radio> </div> ... </div> 

Note the unique score2 value for name. The name attributes in the other radio groups should be made unique as well.

Fieldset and legend

Instead of using <div class="radio-group"> and <p> tags for labels, use <fieldset> and <legend> for optimum accessibility. WebAIM fieldset / legend reference.

Screen Reader Testing

When this component is close to being "done", it's probably a good idea to have @hellogreg test it out with various screen readers to ensure it's accessible everywhere.