Skip to content

fix: aria controls toggled fields#5938

Open
emilyjablonski wants to merge 1 commit intomainfrom
toggled-fields-aria-controls
Open

fix: aria controls toggled fields#5938
emilyjablonski wants to merge 1 commit intomainfrom
toggled-fields-aria-controls

Conversation

@emilyjablonski
Copy link
Collaborator

@emilyjablonski emilyjablonski commented Feb 20, 2026

This PR addresses parts of related issues like #2240 #2241

  • Addresses the issue in full
  • Addresses only certain aspects of the issue

Description

This targets our public application form, but in general: form fields that, when selected, show additional fields (like "I have a second phone number" or indicating you work in the county) need to have aria-controls set to the ID of the section that will be toggled on, and the ID must always be in the DOM. If it's a checkbox, it should also have aria-expanded. Voiceover is not consistent about this with testing, but JAWS relies on this more.

How Can This Be Tested/Reviewed?

Recommend reviewing with the hide whitespace toggle on - these announcements are not getting read in Voiceover which I believe is expected, but this is best practice afaik!

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-controls#:~:text=Explore%20now-,Description,of%20the%20element%20it%20controls.

Author Checklist:

  • Added QA notes to the issue with applicable URLs
  • Reviewed in a desktop view
  • Reviewed in a mobile view
  • Reviewed considering accessibility
  • Added tests covering the changes
  • Made corresponding changes to the documentation
  • Ran yarn generate:client and/or created a migration when required

Review Process:

  • Read and understand the issue
  • Ensure the author has added QA notes
  • Review the code itself from a style point of view
  • Pull the changes down locally and test that the acceptance criteria is met
  • Either (1) explicitly ask a clarifying question, (2) request changes, or (3) approve the PR, even if there are very small remaining changes, if you don't need to re-review after the updates

@netlify
Copy link

netlify bot commented Feb 20, 2026

Deploy Preview for partners-bloom-dev ready!

Name Link
🔨 Latest commit aa6d75a
🔍 Latest deploy log https://app.netlify.com/projects/partners-bloom-dev/deploys/6997a601210d940007f3248a
😎 Deploy Preview https://deploy-preview-5938--partners-bloom-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@netlify
Copy link

netlify bot commented Feb 20, 2026

Deploy Preview for bloom-angelopolis ready!

Name Link
🔨 Latest commit aa6d75a
🔍 Latest deploy log https://app.netlify.com/projects/bloom-angelopolis/deploys/6997a6011ad8d6000803971f
😎 Deploy Preview https://deploy-preview-5938--bloom-angelopolis.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@netlify
Copy link

netlify bot commented Feb 20, 2026

Deploy Preview for bloom-public-seeds ready!

Name Link
🔨 Latest commit aa6d75a
🔍 Latest deploy log https://app.netlify.com/projects/bloom-public-seeds/deploys/6997a601e27c550008697707
😎 Deploy Preview https://deploy-preview-5938--bloom-public-seeds.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@netlify
Copy link

netlify bot commented Feb 20, 2026

Deploy Preview for partners-bloom-msq2 ready!

Name Link
🔨 Latest commit aa6d75a
🔍 Latest deploy log https://app.netlify.com/projects/partners-bloom-msq2/deploys/6997a6013efb7e0008b3e597
😎 Deploy Preview https://deploy-preview-5938--partners-bloom-msq2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@netlify
Copy link

netlify bot commented Feb 20, 2026

Deploy Preview for bloom-exygy-dev ready!

Name Link
🔨 Latest commit aa6d75a
🔍 Latest deploy log https://app.netlify.com/projects/bloom-exygy-dev/deploys/6997a6014962e3000874cfdb
😎 Deploy Preview https://deploy-preview-5938--bloom-exygy-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@emilyjablonski emilyjablonski marked this pull request as ready for review February 20, 2026 00:35
@emilyjablonski emilyjablonski added a11y An accessibility bug 1 review needed Requires 1 more review before ready to merge labels Feb 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

1 review needed Requires 1 more review before ready to merge a11y An accessibility bug

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant