feat(ConnectedForm, GridForm): Add aria-controls to nested checkboxes

[aresnik11]

Overview

Adds aria-controls to checkboxes that control children.

PR Checklist

• Related to designs:
• Related to JIRA ticket: GMT-1456
• I have run this code to verify it works
• This PR includes unit tests for the code change
• This PR includes testing instructions tests for the code change
• The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

1. Go to ConnectedForm
2. See that Frontend Technologies checkbox has aria-controls for all its children and grandchildren
3. See that React checkbox has aria-controls for all its children
4. See that Next.js checkbox does not include aria-controls
5. Check it with VO
6. Go to GridForm
7. Repeat 2-5
8. Finish and do a celebratory dance

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 26dfebf

---

☁️ Nx Cloud last updated this comment at 2025-11-14 19:15:35 UTC

[github-actions]

🚀 Styleguide deploy preview ready!

Preview URL: https://691b44c9db7b8100c10962e6--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/691b44c9db7b8100c10962e6

[codecademydev]

📬 Published Alpha Packages:

@codecademy/[email protected]
@codecademy/[email protected]

[LinKCoding]

Left a Q for my own edification.
Otherwise, QA'd and it looks great, nice addition of tests too!

[LinKCoding]

very much a nit: I don't think this will really affect anyone, but I do wonder if name can be set as the incoming name from the parameters.

That seems to be more like the HTML pattern. With react forms, this info will be sent in a different format, so this is more trying to understand a topic :) Gimme your thoughts please, thanks!

[aresnik11]

yeah the html pattern seems to like them grouped with the same name since thats how it gets submitted, but thats not the case with react hook form. in rhf it doesnt seem to be used at all so not sure it matters? this example doesn't even include name so maybe it can be omitted? https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox-mixed/
@sh0ji do you have thoughts?