fix(ui-options,ui-utils): subgroup titles in Options are not announced by TalkBack and iOS VoiceOver

Closes: INSTUI-4235

Author: ToMESSKa

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)}

packages/ui-utils/src/getBrowser.ts

@@ -63,4 +63,23 @@ const isFirefox = () => {
   return getBrowser().name === 'Firefox'
 }
 
-export { getBrowser, isSafari, isEdge, isIE, isFirefox, isChromium }
+const isAndroidOrIOS = (): boolean => {
+  const parser = new UAParser()
+  const result = parser.getResult()
+  const device = parser.getDevice()
+  return result.os.name === 'Android' ||
+    device.model === 'iPhone' ||
+    device.model === 'iPad'
+    ? true
+    : false
+}
+
+export {
+  getBrowser,
+  isSafari,
+  isEdge,
+  isIE,
+  isFirefox,
+  isChromium,
+  isAndroidOrIOS
+}