Skip to content

fix(ui-select,ui-form-field): fix iOS VoiceOver with Select and SimpleSelect announcing 'readonly' and 'textinput'#1935

Merged
matyasf merged 1 commit intomasterfrom
fix_select_readonly_ios
Apr 15, 2025
Merged

fix(ui-select,ui-form-field): fix iOS VoiceOver with Select and SimpleSelect announcing 'readonly' and 'textinput'#1935
matyasf merged 1 commit intomasterfrom
fix_select_readonly_ios

Conversation

@matyasf
Copy link
Collaborator

@matyasf matyasf commented Apr 8, 2025

Also fix formFieldLayout spacing issue if there are multiple messages and the first one is an empty string

To test:
Check Select read-only, SimpleSelect, TimeSelect examples with VoiceOver on iOS and Desktop. It should never say 'Read-only'

Fixes INSTUI-4500

@matyasf matyasf self-assigned this Apr 8, 2025
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

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

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

packages/ui-select/src/Select/index.tsx:708

  • Confirm that the condition 'utils.isAndroidOrIOS()' strictly targets iOS Chrome as intended; if Android devices do not exhibit the issue, consider refining the condition to avoid unintentional role assignment changes.
utils.isSafari() || utils.isAndroidOrIOS() ? 'button' : 'combobox',

@matyasf matyasf requested a review from HerrTopi April 8, 2025 20:27
@github-actions
Copy link

github-actions bot commented Apr 8, 2025

PR Preview Action v1.6.1

🚀 View preview at
https://instructure.design/pr-preview/pr-1935/

Built to branch gh-pages at 2025-04-15 13:43 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

// Also on iOS Chrome with role='combobox' it announces unnecessarily
// that its 'read-only' and that this is a 'textfield', see INSTUI-4500
role:
utils.isSafari() || utils.isAndroidOrIOS() ? 'button' : 'combobox',
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This is the fix. When we use combobox role, it doesnt seem to change the role of the trigger element itself, just speaks extra stuff like that it can be opened. If we use the button role, it does not announce that its actually an input, and neither that its read-only.

On Android sadly its still broken (so no change), I did not use something like isIOS because I want to minimize the number of different browser detectors.

Copy link
Contributor

@joyenjoyer joyenjoyer left a comment

Choose a reason for hiding this comment

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

It works on desktop. I could not test it on iOS but the code looks good to me. @HerrTopi @ToMESSKa please test this on iOS devices.

@instructure instructure deleted a comment from Copilot AI Apr 15, 2025
…eSelect announcing 'readonly' and 'textinput'

Also fix formFieldLayout spacing issue if there are multiple messages and the first one is an empty
string

Fixes INSTUI-4500
@matyasf matyasf force-pushed the fix_select_readonly_ios branch from 9ebde49 to 3a6e1c2 Compare April 15, 2025 13:38
@matyasf matyasf merged commit d4378e7 into master Apr 15, 2025
8 checks passed
@matyasf matyasf deleted the fix_select_readonly_ios branch April 15, 2025 13:38
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.

4 participants