fix(ui-options,ui-utils): subgroup titles in Options are not announce…

…d by TalkBack and iOS VoiceOver Closes: INSTUI-4235
instructure · Oct 8, 2024 · a0e7284 · a0e7284
1 parent 1fa63c4
commit a0e7284
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git 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 '../../../ui-utils/src/getBrowser'
 
 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
@@ -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
+}