@instructure/ui-select 10.16.0 → 10.16.1-snapshot-0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
+
+
+### Bug Fixes
+
+* **ui-select,ui-form-field:** fix iOS VoiceOver with Select and SimpleSelect announcing 'readonly' and 'textinput' ([d4378e7](https://github.com/instructure/instructure-ui/commit/d4378e757b2a07c86aa89fe84c063c0406741c10))
+
+
+
+
+
 # [10.16.0](https://github.com/instructure/instructure-ui/compare/v10.15.2...v10.16.0) (2025-04-11)
 
 **Note:** Version bump only for package @instructure/ui-select

package/es/Select/index.js

@@ -521,10 +521,14 @@ let Select = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gen
     // props to ensure screen readers treat uneditable selects as accessible
     // popup buttons rather than comboboxes.
     const overrideProps = !isEditable ? {
-      // Given that Safari with Voiceover does not support proper combobox
-      // handling, a button role is set as a workaround.
+      // 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
-      role: utils.isSafari() ? 'button' : 'combobox',
+      // 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',
       title: inputValue,
       'aria-autocomplete': void 0,
       'aria-readonly': true

package/lib/Select/index.js

@@ -533,10 +533,14 @@ let Select = exports.Select = (_dec = (0, _withDeterministicId.withDeterministic
     // props to ensure screen readers treat uneditable selects as accessible
     // popup buttons rather than comboboxes.
     const overrideProps = !isEditable ? {
-      // Given that Safari with Voiceover does not support proper combobox
-      // handling, a button role is set as a workaround.
+      // 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
-      role: utils.isSafari() ? 'button' : 'combobox',
+      // 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',
       title: inputValue,
       'aria-autocomplete': void 0,
       'aria-readonly': true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "10.16.0",
+  "version": "10.16.1-snapshot-0",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,12 +23,12 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.16.0",
-    "@instructure/ui-babel-preset": "10.16.0",
-    "@instructure/ui-color-utils": "10.16.0",
-    "@instructure/ui-scripts": "10.16.0",
-    "@instructure/ui-test-utils": "10.16.0",
-    "@instructure/ui-themes": "10.16.0",
+    "@instructure/ui-axe-check": "10.16.1-snapshot-0",
+    "@instructure/ui-babel-preset": "10.16.1-snapshot-0",
+    "@instructure/ui-color-utils": "10.16.1-snapshot-0",
+    "@instructure/ui-scripts": "10.16.1-snapshot-0",
+    "@instructure/ui-test-utils": "10.16.1-snapshot-0",
+    "@instructure/ui-themes": "10.16.1-snapshot-0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -36,22 +36,22 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/emotion": "10.16.0",
-    "@instructure/shared-types": "10.16.0",
-    "@instructure/ui-dom-utils": "10.16.0",
-    "@instructure/ui-form-field": "10.16.0",
-    "@instructure/ui-icons": "10.16.0",
-    "@instructure/ui-options": "10.16.0",
-    "@instructure/ui-popover": "10.16.0",
-    "@instructure/ui-position": "10.16.0",
-    "@instructure/ui-prop-types": "10.16.0",
-    "@instructure/ui-react-utils": "10.16.0",
-    "@instructure/ui-selectable": "10.16.0",
-    "@instructure/ui-testable": "10.16.0",
-    "@instructure/ui-text-input": "10.16.0",
-    "@instructure/ui-utils": "10.16.0",
-    "@instructure/ui-view": "10.16.0",
-    "@instructure/uid": "10.16.0",
+    "@instructure/emotion": "10.16.1-snapshot-0",
+    "@instructure/shared-types": "10.16.1-snapshot-0",
+    "@instructure/ui-dom-utils": "10.16.1-snapshot-0",
+    "@instructure/ui-form-field": "10.16.1-snapshot-0",
+    "@instructure/ui-icons": "10.16.1-snapshot-0",
+    "@instructure/ui-options": "10.16.1-snapshot-0",
+    "@instructure/ui-popover": "10.16.1-snapshot-0",
+    "@instructure/ui-position": "10.16.1-snapshot-0",
+    "@instructure/ui-prop-types": "10.16.1-snapshot-0",
+    "@instructure/ui-react-utils": "10.16.1-snapshot-0",
+    "@instructure/ui-selectable": "10.16.1-snapshot-0",
+    "@instructure/ui-testable": "10.16.1-snapshot-0",
+    "@instructure/ui-text-input": "10.16.1-snapshot-0",
+    "@instructure/ui-utils": "10.16.1-snapshot-0",
+    "@instructure/ui-view": "10.16.1-snapshot-0",
+    "@instructure/uid": "10.16.1-snapshot-0",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Select/index.tsx

@@ -697,10 +697,15 @@ class Select extends Component<SelectProps> {
     // popup buttons rather than comboboxes.
     const overrideProps: Partial<TextInputProps> = !isEditable
       ? {
-          // Given that Safari with Voiceover does not support proper combobox
-          // handling, a button role is set as a workaround.
+          // 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
-          role: utils.isSafari() ? 'button' : 'combobox',
+          // 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',
           title: inputValue,
           'aria-autocomplete': undefined,
           'aria-readonly': true