feat(pie-radio-group): DSW-2634 make screenreaders narrate index and selected

[jamieomaguire]

Describe your changes (can list changeset entries if preferable)

• Updates the Radio and Radio Group components to ensure screenreaders correctly announce the index and selection size of inputs in a group. For example "2 of 6".
• Updates Radio to apply an aria-checked attribute to itself that reflects the checked state, so that screenreaders will say "selected" or similar when the radio is selected.
• New tests to check the features above

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?

• Please visit each Aperture Radio Group page below and, with screen readers enabled, navigate through the radio buttons using your keyboard. The screenreader should correctly identify which position your selected radio button is in the group. For example "2 of 4" and it should say it is selected.

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

Reviewer checklists (complete before approving)

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

Reviewer 1

• 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)
• 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)
• If there are visual test updates, I have reviewed them.

[changeset-bot]

🦋 Changeset detected

Latest commit: 8f4901f

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-group	Minor
@justeattakeaway/pie-radio	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]

/test-aperture

[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

[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

[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

[pie-design-system-bot]

	Fails
🚫	You have unchecked checklist items outside the "Not-applicable Checklist items" section. Please ensure all unchecked checkboxes are moved to the appropriate section.
🚫	You have unchecked checklist items in Reviewer 1's section. Please ensure all items are addressed before approval.
🚫	You have unchecked checklist items in Reviewer 2's section. Please ensure all items are addressed before approval.

Generated by 🚫 dangerJS against bf226ba