Skip to content

Conversation

@MaryamMehd
Copy link
Collaborator

…edby (#1640)

This commit implements accessibility improvements by associating instructional text with their parent form fields using the aria-describedby attribute.

Changes:

  • Modified ItemFieldGrid to recursively add aria-describedby to input/textarea elements and radio/checkbox groups when instructions are present
  • Added getInstructionsId helper function to generate instruction IDs
  • Updated DisplayInstructions component to accept an optional id prop
  • Added Storybook tests for String, Boolean, and Text items to verify aria-describedby functionality with instruction text

Screen readers will now announce instructional text when a field receives focus, improving the accessibility experience for users with visual impairments.

Fixes #1640

…edby (#1640)

This commit implements accessibility improvements by associating instructional
text with their parent form fields using the aria-describedby attribute.

Changes:
- Modified ItemFieldGrid to recursively add aria-describedby to input/textarea
  elements and radio/checkbox groups when instructions are present
- Added getInstructionsId helper function to generate instruction IDs
- Updated DisplayInstructions component to accept an optional id prop
- Added Storybook tests for String, Boolean, and Text items to verify
  aria-describedby functionality with instruction text

Screen readers will now announce instructional text when a field receives focus,
improving the accessibility experience for users with visual impairments.

Fixes #1640
@MaryamMehd MaryamMehd closed this Oct 22, 2025
@MaryamMehd MaryamMehd reopened this Oct 22, 2025
@MaryamMehd MaryamMehd changed the base branch from main to alpha October 22, 2025 09:04
@MaryamMehd MaryamMehd requested a review from fongsean October 22, 2025 09:05
Base automatically changed from alpha to main October 23, 2025 06:01
Copy link
Contributor

@fongsean fongsean left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this actually fixed the problem. I went into the stories and tried Voiceover - couldn't get the instructions to be read out.

Can you try using aria-describedby in the MUI components instead of getting React to create them dynamically?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar to #1699, can you add them under the testing folder instead? Something like title: 'Testing/Accessibility' is fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Associate item instruction content to its parent item (accessibility)

4 participants