feat: improve keyboard navigation and screen reader accessibility for… #1767
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
… choice dropdown fields - Remove multiline prop from Choice Select fields to render as proper single-line combobox - Add aria-labelledby to link field labels for proper VoiceOver announcement - Use aria-label fallback for tabled fields without visible labels This ensures VoiceOver announces the field name (e.g., 'Smoking status, combo box') and enables standard keyboard navigation (Tab to focus, Arrow keys to navigate options, Enter to select, Escape to close). Fixes #1762
After removing multiline prop from Select fields, the component now renders as <input> instead of <textarea>. Updated test to query for 'input' element to match the new rendering.
Add openOnFocus prop to MUI Autocomplete components for Select choice fields. This enables the dropdown to open automatically when the field receives Tab focus, allowing full keyboard-only navigation without requiring mouse interaction. - Tab to field → dropdown opens automatically - Arrow keys → navigate options - Enter → select option - Escape → close dropdown
- Explicitly set role='combobox' on input element to ensure entire dropdown component (text input + arrow) is recognized as one unit - Removes 'openOnFocus' to prevent automatic dropdown opening that interferes with VoiceOver field name announcement - Maintains aria-labelledby for proper field name announcement This ensures VoiceOver announces 'Smoking status, combo box' and provides proper keyboard navigation instructions to users. Fixes #1762
clinnygee
approved these changes
Nov 19, 2025
Collaborator
clinnygee
left a comment
clinnygee
left a comment
There was a problem hiding this comment.
Looks good @MaryamMehd
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
… choice dropdown fields
This ensures VoiceOver announces the field name (e.g., 'Smoking status, combo box') and enables standard keyboard navigation (Tab to focus, Arrow keys to navigate options, Enter to select, Escape to close).
Fixes #1762