@instructure/ui-options 10.4.1 → 10.4.2-pr-snapshot-1730913754131

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.4.2-pr-snapshot-1730913754131](https://github.com/instructure/instructure-ui/compare/v10.4.1...v10.4.2-pr-snapshot-1730913754131) (2024-11-06)
+
+
+### Bug Fixes
+
+* **ui-options,ui-utils:** subgroup titles in Options are not announced by TalkBack and iOS VoiceOver ([ebdf8f0](https://github.com/instructure/instructure-ui/commit/ebdf8f047cf8541723d494b16432c8248ef5fe1e))
+
+
+
+
+
 ## [10.4.1](https://github.com/instructure/instructure-ui/compare/v10.4.0...v10.4.1) (2024-10-28)
 
 

package/es/Options/index.js

@@ -34,6 +34,7 @@ import generateComponentTheme from './theme';
 import { Item } from './Item';
 import { Separator } from './Separator';
 import { allowedProps, propTypes } from './props';
+import { isAndroidOrIOS } from '@instructure/ui-utils';
 /**
 ---
 category: components
@@ -69,8 +70,10 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
       styles = _this$props3.styles;
     return jsx("span", {
       id: this._labelId,
-      role: "presentation",
-      "aria-hidden": "true",
+      role: "presentation"
+      // because TalkBack and iOS VoiceOver don't announce sub-menu labels, aria-hidden needs to be false to achive that
+      ,
+      "aria-hidden": isAndroidOrIOS() ? 'false' : 'true',
       css: styles === null || styles === void 0 ? void 0 : styles.label
     }, callRenderProp(renderLabel));
   }

package/lib/Options/index.js

@@ -16,6 +16,7 @@ var _theme = _interopRequireDefault(require("./theme"));
 var _Item = require("./Item");
 var _Separator = require("./Separator");
 var _props = require("./props");
+var _uiUtils = require("@instructure/ui-utils");
 var _dec, _dec2, _dec3, _class, _Options;
 /*
  * The MIT License (MIT)
@@ -76,8 +77,10 @@ let Options = exports.Options = (_dec = (0, _uiReactUtils.withDeterministicId)()
       styles = _this$props3.styles;
     return (0, _emotion.jsx)("span", {
       id: this._labelId,
-      role: "presentation",
-      "aria-hidden": "true",
+      role: "presentation"
+      // because TalkBack and iOS VoiceOver don't announce sub-menu labels, aria-hidden needs to be false to achive that
+      ,
+      "aria-hidden": (0, _uiUtils.isAndroidOrIOS)() ? 'false' : 'true',
       css: styles === null || styles === void 0 ? void 0 : styles.label
     }, (0, _uiReactUtils.callRenderProp)(renderLabel));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-options",
-  "version": "10.4.1",
+  "version": "10.4.2-pr-snapshot-1730913754131",
   "description": "A view-only component for composing interactive lists and menus.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,21 +23,21 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.4.1",
-    "@instructure/ui-color-utils": "10.4.1",
-    "@instructure/ui-test-locator": "10.4.1",
-    "@instructure/ui-test-utils": "10.4.1",
-    "@instructure/ui-themes": "10.4.1"
+    "@instructure/ui-babel-preset": "10.4.2-pr-snapshot-1730913754131",
+    "@instructure/ui-color-utils": "10.4.2-pr-snapshot-1730913754131",
+    "@instructure/ui-test-locator": "10.4.2-pr-snapshot-1730913754131",
+    "@instructure/ui-test-utils": "10.4.2-pr-snapshot-1730913754131",
+    "@instructure/ui-themes": "10.4.2-pr-snapshot-1730913754131"
   },
   "dependencies": {
     "@babel/runtime": "^7.25.6",
-    "@instructure/emotion": "10.4.1",
-    "@instructure/shared-types": "10.4.1",
-    "@instructure/ui-icons": "10.4.1",
-    "@instructure/ui-prop-types": "10.4.1",
-    "@instructure/ui-react-utils": "10.4.1",
-    "@instructure/ui-testable": "10.4.1",
-    "@instructure/ui-view": "10.4.1",
+    "@instructure/emotion": "10.4.2-pr-snapshot-1730913754131",
+    "@instructure/shared-types": "10.4.2-pr-snapshot-1730913754131",
+    "@instructure/ui-icons": "10.4.2-pr-snapshot-1730913754131",
+    "@instructure/ui-prop-types": "10.4.2-pr-snapshot-1730913754131",
+    "@instructure/ui-react-utils": "10.4.2-pr-snapshot-1730913754131",
+    "@instructure/ui-testable": "10.4.2-pr-snapshot-1730913754131",
+    "@instructure/ui-view": "10.4.2-pr-snapshot-1730913754131",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/Options/index.tsx

@@ -48,6 +48,7 @@ import type { OptionsSeparatorProps } from './Separator/props'
 
 import type { OptionsProps } from './props'
 import { allowedProps, propTypes } from './props'
+import { isAndroidOrIOS } from '@instructure/ui-utils'
 
 type ItemChild = React.ComponentElement<OptionsItemProps, Item>
 type SeparatorChild = React.ComponentElement<OptionsSeparatorProps, Separator>
@@ -108,7 +109,8 @@ class Options extends Component<OptionsProps> {
       <span
         id={this._labelId}
         role="presentation"
-        aria-hidden="true"
+        // because TalkBack and iOS VoiceOver don't announce sub-menu labels, aria-hidden needs to be false to achive that
+        aria-hidden={isAndroidOrIOS() ? 'false' : 'true'}
         css={styles?.label}
       >
         {callRenderProp(renderLabel)}