@instructure/ui-select 11.7.6-snapshot-30 → 11.7.6

package/CHANGELOG.md

@@ -3,12 +3,11 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.6-snapshot-30](https://github.com/instructure/instructure-ui/compare/v11.7.5...v11.7.6-snapshot-30) (2026-09-14)
-
-**Note:** Version bump only for package @instructure/ui-select
-
+## [11.7.6](https://github.com/instructure/instructure-ui/compare/v11.7.5...v11.7.6) (2026-09-14)
 
+### Bug Fixes
 
+* **ui-select,ui-simple-select:** remove aria-readonly from Select when it has a button role ([9c2a412](https://github.com/instructure/instructure-ui/commit/9c2a41253c1e7b431708b16b4c27dbe693e4d4fa))
 
 
 ## [11.7.5](https://github.com/instructure/instructure-ui/compare/v11.7.4...v11.7.5) (2026-08-25)

package/es/Select/v1/index.js

@@ -569,24 +569,14 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
       ...passthroughProps
     });
     const isEditable = typeof onInputChange !== 'undefined';
-
-    // props to ensure screen readers treat uneditable selects as accessible
-    // popup buttons rather than comboboxes.
-    const overrideProps = !isEditable ? {
-      // We need role="combobox" for the 'open list' button shortcut to work
-      // with desktop screenreaders.
-      // But desktop Safari with Voiceover does not support proper combobox
-      // handling, a 'button' role is set as a workaround.
-      // See https://bugs.webkit.org/show_bug.cgi?id=236881
-      // 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() || interaction === 'disabled' && utils.isChromium() ? 'button' : 'combobox',
-      title: inputValue,
-      'aria-autocomplete': undefined,
-      'aria-readonly': true
-    } : interaction === 'disabled' && utils.isChromium() ? {
-      role: 'button'
-    } : {};
+    let overrideProps = {};
+    if (!isEditable) {
+      overrideProps = {
+        role: 'combobox',
+        title: inputValue,
+        'aria-autocomplete': undefined
+      };
+    }
 
     // backdoor to autocomplete attr to work around chrome autofill issues
     if (passthroughProps['autoComplete']) {

package/es/Select/v2/index.js

@@ -578,24 +578,14 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyleNew(generateStyle),
       ...passthroughProps
     });
     const isEditable = typeof onInputChange !== 'undefined';
-
-    // props to ensure screen readers treat uneditable selects as accessible
-    // popup buttons rather than comboboxes.
-    const overrideProps = !isEditable ? {
-      // We need role="combobox" for the 'open list' button shortcut to work
-      // with desktop screenreaders.
-      // But desktop Safari with Voiceover does not support proper combobox
-      // handling, a 'button' role is set as a workaround.
-      // See https://bugs.webkit.org/show_bug.cgi?id=236881
-      // 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() || interaction === 'disabled' && utils.isChromium() ? 'button' : 'combobox',
-      title: inputValue,
-      'aria-autocomplete': undefined,
-      'aria-readonly': true
-    } : interaction === 'disabled' && utils.isChromium() ? {
-      role: 'button'
-    } : {};
+    let overrideProps = {};
+    if (!isEditable) {
+      overrideProps = {
+        role: 'combobox',
+        title: inputValue,
+        'aria-autocomplete': undefined
+      };
+    }
 
     // backdoor to autocomplete attr to work around chrome autofill issues
     if (passthroughProps['autoComplete']) {

package/lib/Select/v1/index.js

@@ -581,24 +581,14 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
       ...passthroughProps
     });
     const isEditable = typeof onInputChange !== 'undefined';
-
-    // props to ensure screen readers treat uneditable selects as accessible
-    // popup buttons rather than comboboxes.
-    const overrideProps = !isEditable ? {
-      // We need role="combobox" for the 'open list' button shortcut to work
-      // with desktop screenreaders.
-      // But desktop Safari with Voiceover does not support proper combobox
-      // handling, a 'button' role is set as a workaround.
-      // See https://bugs.webkit.org/show_bug.cgi?id=236881
-      // 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() || interaction === 'disabled' && utils.isChromium() ? 'button' : 'combobox',
-      title: inputValue,
-      'aria-autocomplete': undefined,
-      'aria-readonly': true
-    } : interaction === 'disabled' && utils.isChromium() ? {
-      role: 'button'
-    } : {};
+    let overrideProps = {};
+    if (!isEditable) {
+      overrideProps = {
+        role: 'combobox',
+        title: inputValue,
+        'aria-autocomplete': undefined
+      };
+    }
 
     // backdoor to autocomplete attr to work around chrome autofill issues
     if (passthroughProps['autoComplete']) {

package/lib/Select/v2/index.js

@@ -589,24 +589,14 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
       ...passthroughProps
     });
     const isEditable = typeof onInputChange !== 'undefined';
-
-    // props to ensure screen readers treat uneditable selects as accessible
-    // popup buttons rather than comboboxes.
-    const overrideProps = !isEditable ? {
-      // We need role="combobox" for the 'open list' button shortcut to work
-      // with desktop screenreaders.
-      // But desktop Safari with Voiceover does not support proper combobox
-      // handling, a 'button' role is set as a workaround.
-      // See https://bugs.webkit.org/show_bug.cgi?id=236881
-      // 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() || interaction === 'disabled' && utils.isChromium() ? 'button' : 'combobox',
-      title: inputValue,
-      'aria-autocomplete': undefined,
-      'aria-readonly': true
-    } : interaction === 'disabled' && utils.isChromium() ? {
-      role: 'button'
-    } : {};
+    let overrideProps = {};
+    if (!isEditable) {
+      overrideProps = {
+        role: 'combobox',
+        title: inputValue,
+        'aria-autocomplete': undefined
+      };
+    }
 
     // backdoor to autocomplete attr to work around chrome autofill issues
     if (passthroughProps['autoComplete']) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "11.7.6-snapshot-30",
+  "version": "11.7.6",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,27 +15,27 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.29.7",
-    "@instructure/emotion": "11.7.6-snapshot-30",
-    "@instructure/shared-types": "11.7.6-snapshot-30",
-    "@instructure/ui-dom-utils": "11.7.6-snapshot-30",
-    "@instructure/ui-icons": "11.7.6-snapshot-30",
-    "@instructure/ui-form-field": "11.7.6-snapshot-30",
-    "@instructure/ui-options": "11.7.6-snapshot-30",
-    "@instructure/ui-popover": "11.7.6-snapshot-30",
-    "@instructure/ui-react-utils": "11.7.6-snapshot-30",
-    "@instructure/ui-position": "11.7.6-snapshot-30",
-    "@instructure/ui-text-input": "11.7.6-snapshot-30",
-    "@instructure/ui-themes": "11.7.6-snapshot-30",
-    "@instructure/ui-utils": "11.7.6-snapshot-30",
-    "@instructure/ui-selectable": "11.7.6-snapshot-30",
-    "@instructure/ui-view": "11.7.6-snapshot-30",
-    "@instructure/uid": "11.7.6-snapshot-30"
+    "@instructure/emotion": "11.7.6",
+    "@instructure/shared-types": "11.7.6",
+    "@instructure/ui-form-field": "11.7.6",
+    "@instructure/ui-icons": "11.7.6",
+    "@instructure/ui-dom-utils": "11.7.6",
+    "@instructure/ui-options": "11.7.6",
+    "@instructure/ui-popover": "11.7.6",
+    "@instructure/ui-react-utils": "11.7.6",
+    "@instructure/ui-selectable": "11.7.6",
+    "@instructure/ui-position": "11.7.6",
+    "@instructure/ui-text-input": "11.7.6",
+    "@instructure/ui-themes": "11.7.6",
+    "@instructure/ui-utils": "11.7.6",
+    "@instructure/ui-view": "11.7.6",
+    "@instructure/uid": "11.7.6"
   },
   "devDependencies": {
     "vitest": "^5.0.0",
-    "@instructure/ui-babel-preset": "11.7.6-snapshot-30",
-    "@instructure/ui-color-utils": "11.7.6-snapshot-30",
-    "@instructure/ui-scripts": "11.7.6-snapshot-30"
+    "@instructure/ui-babel-preset": "11.7.6",
+    "@instructure/ui-color-utils": "11.7.6",
+    "@instructure/ui-scripts": "11.7.6"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Select/v1/index.tsx

@@ -702,30 +702,14 @@ class Select extends Component<SelectProps> {
     const { ref, ...triggerProps } = getTriggerProps({ ...passthroughProps })
     const isEditable = typeof onInputChange !== 'undefined'
 
-    // props to ensure screen readers treat uneditable selects as accessible
-    // popup buttons rather than comboboxes.
-    const overrideProps: Partial<TextInputProps> = !isEditable
-      ? {
-          // We need role="combobox" for the 'open list' button shortcut to work
-          // with desktop screenreaders.
-          // But desktop Safari with Voiceover does not support proper combobox
-          // handling, a 'button' role is set as a workaround.
-          // See https://bugs.webkit.org/show_bug.cgi?id=236881
-          // 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() ||
-            (interaction === 'disabled' && utils.isChromium())
-              ? 'button'
-              : 'combobox',
-          title: inputValue,
-          'aria-autocomplete': undefined,
-          'aria-readonly': true
-        }
-      : interaction === 'disabled' && utils.isChromium()
-      ? { role: 'button' }
-      : {}
+    let overrideProps: Partial<TextInputProps> = {}
+    if (!isEditable) {
+      overrideProps = {
+        role: 'combobox',
+        title: inputValue,
+        'aria-autocomplete': undefined
+      }
+    }
 
     // backdoor to autocomplete attr to work around chrome autofill issues
     if (passthroughProps['autoComplete']) {

package/src/Select/v2/index.tsx

@@ -720,30 +720,14 @@ class Select extends Component<SelectProps> {
     const { ref, ...triggerProps } = getTriggerProps({ ...passthroughProps })
     const isEditable = typeof onInputChange !== 'undefined'
 
-    // props to ensure screen readers treat uneditable selects as accessible
-    // popup buttons rather than comboboxes.
-    const overrideProps: Partial<TextInputProps> = !isEditable
-      ? {
-          // We need role="combobox" for the 'open list' button shortcut to work
-          // with desktop screenreaders.
-          // But desktop Safari with Voiceover does not support proper combobox
-          // handling, a 'button' role is set as a workaround.
-          // See https://bugs.webkit.org/show_bug.cgi?id=236881
-          // 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() ||
-            (interaction === 'disabled' && utils.isChromium())
-              ? 'button'
-              : 'combobox',
-          title: inputValue,
-          'aria-autocomplete': undefined,
-          'aria-readonly': true
-        }
-      : interaction === 'disabled' && utils.isChromium()
-      ? { role: 'button' }
-      : {}
+    let overrideProps: Partial<TextInputProps> = {}
+    if (!isEditable) {
+      overrideProps = {
+        role: 'combobox',
+        title: inputValue,
+        'aria-autocomplete': undefined
+      }
+    }
 
     // backdoor to autocomplete attr to work around chrome autofill issues
     if (passthroughProps['autoComplete']) {