Skip to content

Commit 6cc3320

Browse files
committed
fix(ui-utils,ui-select): make screenreader annouce disabled Select as dimmed in Chrome
INSTUI-4485
1 parent cf52c34 commit 6cc3320

2 files changed

Lines changed: 8 additions & 2 deletions

File tree

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -711,11 +711,17 @@ class Select extends Component<SelectProps> {
711711
// Also on iOS Chrome with role='combobox' it announces unnecessarily
712712
// that its 'read-only' and that this is a 'textfield', see INSTUI-4500
713713
role:
714-
utils.isSafari() || utils.isAndroidOrIOS() ? 'button' : 'combobox',
714+
utils.isSafari() ||
715+
utils.isAndroidOrIOS() ||
716+
(interaction === 'disabled' && utils.isChromium())
717+
? 'button'
718+
: 'combobox',
715719
title: inputValue,
716720
'aria-autocomplete': undefined,
717721
'aria-readonly': true
718722
}
723+
: interaction === 'disabled' && utils.isChromium()
724+
? { role: 'button' }
719725
: {}
720726

721727
// backdoor to autocomplete attr to work around chrome autofill issues

packages/ui-utils/src/getBrowser.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const isIE = () => {
5555
const isChromium = () => {
5656
const chromiumBasedBrowsers = ['Chrome', 'Chromium', 'Opera', 'Edge']
5757
return chromiumBasedBrowsers.some((browser) => {
58-
getBrowser().name?.includes(browser)
58+
return getBrowser().name?.includes(browser)
5959
})
6060
}
6161

0 commit comments

Comments
 (0)