From 2cca1ce6ed49176b9ba8d9007cf882d2b1aa7bb3 Mon Sep 17 00:00:00 2001
From: Tamas Kovacs <tamas.kovacs@instructure.com>
Date: Tue, 8 Oct 2024 16:06:01 +0200
Subject: [PATCH] fix(ui-options,ui-utils): subgroup titles in Options are not
 announced by TalkBack and iOS VoiceOver

Closes: INSTUI-4235
---
 packages/ui-options/src/Options/index.tsx |  4 +++-
 packages/ui-utils/src/getBrowser.ts       | 16 +++++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/ui-options/src/Options/index.tsx b/packages/ui-options/src/Options/index.tsx
index 8f0c5f7aba..17bb86d56b 100644
--- a/packages/ui-options/src/Options/index.tsx
+++ b/packages/ui-options/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)}
diff --git a/packages/ui-utils/src/getBrowser.ts b/packages/ui-utils/src/getBrowser.ts
index c9731d4ee7..b0ba95435d 100644
--- a/packages/ui-utils/src/getBrowser.ts
+++ b/packages/ui-utils/src/getBrowser.ts
@@ -63,4 +63,18 @@ const isFirefox = () => {
   return getBrowser().name === 'Firefox'
 }
 
-export { getBrowser, isSafari, isEdge, isIE, isFirefox, isChromium }
+const isAndroidOrIOS = (): boolean => {
+  const parser = new UAParser()
+  const result = parser.getResult()
+  return result.os.name === 'Android' || result.os.name === 'iOS' ? true : false
+}
+
+export {
+  getBrowser,
+  isSafari,
+  isEdge,
+  isIE,
+  isFirefox,
+  isChromium,
+  isAndroidOrIOS
+}