feat(pie-radio-group): DSW-2632 add keyboard navigation and focusing

[jamieomaguire]

Describe your changes (can list changeset entries if preferable)

• Introduces keyboard navigation inside the Radio Group component. This functionality should adhere to the behaviours outlined in this W3 guide. Image attached below showing the relevant section.
• I have opted to mirror the Shift + Tab behaviour displayed in Chrome, whereby focusing the radio group when no option is selected will focus the last item.
• RTL support is included. When in RTL, the left arrow key will go forwards and the right array will go backwards.

Author Checklist (complete before requesting a review, do not delete any)

• I have performed a self-review of my code.
• I have added thorough tests where applicable (unit / component / visual).
• I have reviewed the PIE Storybook/PIE Docs PR preview.
• If changes will affect consumers of the package, I have created a changeset entry.
• If a changeset file has been created, I have tested these changes in PIE Aperture using the /test-aperture command.

Not-applicable Checklist items

Please move any Author checklist items that do not apply to this pull request here.

• I have reviewed visual test updates properly before approving.

---

Testing

How do I test my changes?

Task	Link
Aperture PR	🔗
NextJS 14 deployment	🔗
Nuxt 3 deployment	🔗
Vanilla deployment	🔗
Storybook Deployment	🔗

Reviewer checklists (complete before approving)

Mark items as [-] N/A if not applicable.

Reviewer 1 - @fernandofranca

• I have reviewed the PIE Storybook/PIE Docs PR preview.
• I have verified that all acceptance criteria for this ticket have been completed.
• I have reviewed the Aperture changes (if added)
• [-] N/A If there are visual test updates, I have reviewed them.

Reviewer 2

• I have reviewed the PIE Storybook/PIE Docs PR preview.
• I have verified that all acceptance criteria for this ticket have been completed.
• I have reviewed the Aperture changes (if added)
• [-] N/A If there are visual test updates, I have reviewed them.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9c3d4bf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@justeattakeaway/pie-radio	Minor
@justeattakeaway/pie-radio-group	Minor
pie-storybook	Patch
@justeattakeaway/pie-webc	Patch
wc-angular12	Patch
wc-nuxt2	Patch
wc-react17	Patch
wc-react18	Patch
wc-vue3	Patch

Not sure what this means? Click here to learn what changesets are.

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

[jamieomaguire]

/snapit

[pie-design-system-bot]

Starting a new snapshot build. You can view the logs here.

[pie-design-system-bot]

@jamieomaguire Your snapshots have been published to npm!

Test the snapshots by updating your package.json with the newly-published versions:

Note

If you have more than one of these packages installed, we suggest using the new snapshots for all of them to help avoid version conflicts.

yarn up @justeattakeaway/[email protected] --mode=update-lockfile

yarn up @justeattakeaway/[email protected] --mode=update-lockfile

yarn up @justeattakeaway/[email protected] --mode=update-lockfile

Then finally:

yarn install

[fernandofranca]

Awesome stuff!!!