Alpha mm accessibility aria describedby #1669
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Issue #1641: Add aria-describedby to associate measurement units with input fields - Modified DisplayUnitText to accept an id prop - Updated DecimalField, QuantityField, IntegerField, StringField, TextField, and UrlField to: - Generate unique unit IDs - Pass ID to DisplayUnitText component - Add aria-describedby attribute to input elements - Screen readers now announce units (e.g., 'cm', 'kg') when fields receive focus - Issue #1640: Add aria-describedby to associate instruction text with input fields - Modified DisplayInstructions to accept an id prop - Updated ItemFieldGrid to: - Generate unique instruction IDs - Recursively add aria-describedby to input/textarea elements in field children - Pass ID to DisplayInstructions component - Screen readers now announce instructions when fields receive focus These changes improve accessibility compliance by ensuring screen readers announce supplementary information (units and instructions) when input fields receive focus.
- Extended addAriaDescribedBy function to handle elements with role='radiogroup' or role='group' - Note: This works for native HTML elements but may not fully work with MUI RadioGroup components - Boolean items may need a different approach (passing instructionsId as prop)
- Created qDisplayCategoryInstructionsString questionnaire - Phone number field with instruction text to test aria-describedby for string inputs - This demonstrates that Issue #1640 fix works for text input fields
- Created getInstructionsId helper function in ItemFieldGrid - Updated StringField to accept instructionsId prop and combine with unitId - Updated StringItem to calculate instructionsId and pass to StringField - Instructions now properly associated with string input fields via aria-describedby - This approach is more reliable than recursive element cloning
…1640 & #1641) ## Changes: ### Core Infrastructure: - ItemFieldGrid: Added getInstructionsId helper function - DisplayInstructions: Added id prop support - DisplayUnitText: Added id prop support (already done) ### Field Components - Added instructionsId prop and aria-describedby: - StringField: Combine unitId and instructionsId in aria-describedby - DecimalField: Combine unitId and instructionsId in aria-describedby - IntegerField: Combine unitId and instructionsId in aria-describedby - QuantityField: Combine unitId and instructionsId in aria-describedby - TextField: Combine unitId and instructionsId in aria-describedby - UrlField: Combine unitId and instructionsId in aria-describedby - BooleanField: Add aria-describedby to RadioGroup and Checkbox ### Item Components - Calculate and pass instructionsId: - StringItem, DecimalItem, IntegerItem, QuantityItem - TextItem, UrlItem, BooleanItem ### Testing: - Added qDisplayCategoryInstructionsString questionnaire - Added DisplayCategoryInstructionsStringField story ## Accessibility Improvements: - Screen readers now announce instructions immediately when field receives focus - Screen readers now announce units immediately when field receives focus - Both instruction and unit IDs are combined when both exist on same field
…#1641) - Replace non-working aria-describedby approach with aria-label - Implement for Decimal, Integer, and Quantity item types - Unit is now announced immediately by screen readers (e.g., Height (cm)) - Add accessibility tests in Storybook for all three item types - Confirmed working with VoiceOver testing
- Remove instructionsId prop from DecimalItem, IntegerItem, QuantityItem - Remove unused imports (getInstructionsId, useRenderingExtensions) - Field components now use aria-label instead of aria-describedby for units - Fixes all compilation and test failures
- Fix formatting in BooleanField, StringField, TextField, UrlField - These files still use instructionsId for issue #1640 (instruction text accessibility) - Resolves linter errors causing CI/CD failures
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.