@instructure/ui-simple-select 10.16.1 → 10.16.3

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.16.3](https://github.com/instructure/instructure-ui/compare/v10.16.1...v10.16.3) (2025-04-30)
+
+
+### Bug Fixes
+
+* **ui-time-select,ui-simple-select,ui-select:** make Select accessible for iOS VoiceOver ([b501a7b](https://github.com/instructure/instructure-ui/commit/b501a7b38bfa491298085a173a49a1baa0a19b29))
+
+
+
+
+
+## [10.16.2](https://github.com/instructure/instructure-ui/compare/v10.16.1...v10.16.2) (2025-04-22)
+
+**Note:** Version bump only for package @instructure/ui-simple-select
+
+
+
+
+
 ## [10.16.1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1) (2025-04-22)
 
 **Note:** Version bump only for package @instructure/ui-simple-select

package/es/SimpleSelect/index.js

@@ -28,6 +28,7 @@ var _dec, _dec2, _class, _SimpleSelect;
  */
 
 import { isValidElement, Component, Children } from 'react';
+import * as utils from '@instructure/ui-utils';
 import { testable } from '@instructure/ui-testable';
 import { matchComponentTypes, passthroughProps, callRenderProp, getInteraction, withDeterministicId } from '@instructure/ui-react-utils';
 import { Select } from '@instructure/ui-select';
@@ -125,6 +126,13 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
       }
       const option = this.getOption('id', id);
       const value = option && option.props.value;
+
+      // Focus needs to be reapplied to input
+      // after selecting an item to make sure VoiceOver behaves correctly on iOS
+      if (utils.isAndroidOrIOS()) {
+        this.blur();
+        this.focus();
+      }
       if (this.isControlled) {
         this.setState({
           isShowingOptions: false
@@ -163,6 +171,9 @@ let SimpleSelect = (_dec = withDeterministicId(), _dec2 = testable(), _dec(_clas
   focus() {
     this.ref && this.ref.focus();
   }
+  blur() {
+    this.ref && this.ref.blur();
+  }
   get focused() {
     return this.ref ? this.ref.focused : false;
   }

package/lib/SimpleSelect/index.js

@@ -1,12 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SimpleSelect = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
+var utils = _interopRequireWildcard(require("@instructure/ui-utils"));
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
@@ -135,6 +137,13 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
       }
       const option = this.getOption('id', id);
       const value = option && option.props.value;
+
+      // Focus needs to be reapplied to input
+      // after selecting an item to make sure VoiceOver behaves correctly on iOS
+      if (utils.isAndroidOrIOS()) {
+        this.blur();
+        this.focus();
+      }
       if (this.isControlled) {
         this.setState({
           isShowingOptions: false
@@ -173,6 +182,9 @@ let SimpleSelect = exports.SimpleSelect = (_dec = (0, _withDeterministicId.withD
   focus() {
     this.ref && this.ref.focus();
   }
+  blur() {
+    this.ref && this.ref.blur();
+  }
   get focused() {
     return this.ref ? this.ref.focused : false;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-simple-select",
-  "version": "10.16.1",
+  "version": "10.16.3",
   "description": "A component for standard select element behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,23 +24,23 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.16.1",
-    "@instructure/shared-types": "10.16.1",
-    "@instructure/ui-form-field": "10.16.1",
-    "@instructure/ui-position": "10.16.1",
-    "@instructure/ui-prop-types": "10.16.1",
-    "@instructure/ui-react-utils": "10.16.1",
-    "@instructure/ui-select": "10.16.1",
-    "@instructure/ui-testable": "10.16.1",
+    "@instructure/console": "10.16.3",
+    "@instructure/shared-types": "10.16.3",
+    "@instructure/ui-form-field": "10.16.3",
+    "@instructure/ui-position": "10.16.3",
+    "@instructure/ui-prop-types": "10.16.3",
+    "@instructure/ui-react-utils": "10.16.3",
+    "@instructure/ui-select": "10.16.3",
+    "@instructure/ui-testable": "10.16.3",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.16.1",
-    "@instructure/ui-babel-preset": "10.16.1",
-    "@instructure/ui-color-utils": "10.16.1",
-    "@instructure/ui-icons": "10.16.1",
-    "@instructure/ui-test-utils": "10.16.1",
-    "@instructure/ui-utils": "10.16.1",
+    "@instructure/ui-axe-check": "10.16.3",
+    "@instructure/ui-babel-preset": "10.16.3",
+    "@instructure/ui-color-utils": "10.16.3",
+    "@instructure/ui-icons": "10.16.3",
+    "@instructure/ui-test-utils": "10.16.3",
+    "@instructure/ui-utils": "10.16.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",

package/src/SimpleSelect/index.tsx

@@ -24,6 +24,7 @@
 
 import { isValidElement, ComponentElement, Component, Children } from 'react'
 
+import * as utils from '@instructure/ui-utils'
 import { testable } from '@instructure/ui-testable'
 import {
   matchComponentTypes,
@@ -115,6 +116,10 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
     this.ref && this.ref.focus()
   }
 
+  blur() {
+    this.ref && this.ref.blur()
+  }
+
   get focused() {
     return this.ref ? this.ref.focused : false
   }
@@ -304,6 +309,13 @@ class SimpleSelect extends Component<SimpleSelectProps, SimpleSelectState> {
     const option = this.getOption('id', id)
     const value = option && option.props.value
 
+    // Focus needs to be reapplied to input
+    // after selecting an item to make sure VoiceOver behaves correctly on iOS
+    if (utils.isAndroidOrIOS()) {
+      this.blur()
+      this.focus()
+    }
+
     if (this.isControlled) {
       this.setState({ isShowingOptions: false })
     } else {