Skip to content

fix(ui-utils,ui-select): make screenreader announce disabled Select as dimmed in Chrome#1946

Merged
ToMESSKa merged 1 commit into
masterfrom
INSTUI-4485_disabled_simple_select_is_skipped_by_voice_over
Jun 5, 2025
Merged

fix(ui-utils,ui-select): make screenreader announce disabled Select as dimmed in Chrome#1946
ToMESSKa merged 1 commit into
masterfrom
INSTUI-4485_disabled_simple_select_is_skipped_by_voice_over

Conversation

@ToMESSKa

@ToMESSKa ToMESSKa commented Apr 22, 2025

Copy link
Copy Markdown
Contributor

INSTUI-4485

ISUUE:

  • in Chrome, disabled Select's and SimpleSelect's input field is skipped over by VoiceOver

TEST PLAN:

  • set the prop interaction="disabled" in every example in Select and SimpleSelect
  • go through the example with VoiceOver on Chrome
  • the input field should not be skipped and it should be announced as 'dimmed'

@ToMESSKa ToMESSKa self-assigned this Apr 22, 2025
@github-actions

github-actions Bot commented Apr 22, 2025

Copy link
Copy Markdown
PR Preview Action v1.6.1
Preview removed because the pull request was closed.
2025-06-05 10:14 UTC

@ToMESSKa ToMESSKa force-pushed the INSTUI-4485_disabled_simple_select_is_skipped_by_voice_over branch from b4f94ba to 6cc3320 Compare May 28, 2025 14:57
@ToMESSKa ToMESSKa changed the title fix(ui-text-input,ui-simple-select,ui-select): diabled is replaced wi… fix(ui-text-input,ui-simple-select,ui-select): make screenreader annouce disabled Select as dimmed in Chrome May 28, 2025
const chromiumBasedBrowsers = ['Chrome', 'Chromium', 'Opera', 'Edge']
return chromiumBasedBrowsers.some((browser) => {
getBrowser().name?.includes(browser)
return getBrowser().name?.includes(browser)

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

this did not work properly

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

nice catch :)

utils.isSafari() || utils.isAndroidOrIOS() ? 'button' : 'combobox',
utils.isSafari() ||
utils.isAndroidOrIOS() ||
(interaction === 'disabled' && utils.isChromium())

@ToMESSKa ToMESSKa May 28, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

unfortunately VoiceOver with Chrome skips over the input if the role combobox and it's disabled. Might not be the best solution, but tried every configuration and solution I could think of but it only gets focused if the role is something other than combobox...

@ToMESSKa ToMESSKa changed the title fix(ui-text-input,ui-simple-select,ui-select): make screenreader annouce disabled Select as dimmed in Chrome fix(ui-utils,ui-select): make screenreader annouce disabled Select as dimmed in Chrome May 28, 2025
@ToMESSKa ToMESSKa changed the title fix(ui-utils,ui-select): make screenreader annouce disabled Select as dimmed in Chrome fix(ui-utils,ui-select): make screenreader announce disabled Select as dimmed in Chrome May 28, 2025
@ToMESSKa ToMESSKa requested review from balzss and matyasf May 28, 2025 15:13
@ToMESSKa ToMESSKa marked this pull request as ready for review May 29, 2025 08:00

@matyasf matyasf left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

nice work!

@ToMESSKa ToMESSKa merged commit c547c31 into master Jun 5, 2025
8 checks passed
@ToMESSKa ToMESSKa deleted the INSTUI-4485_disabled_simple_select_is_skipped_by_voice_over branch June 5, 2025 10:14
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.

3 participants