fix(ui-utils,ui-drilldown): make NDVA read options in Drilldown.Group correctly in Firefox

INSTUI-4330

Author: ToMESSKa

packages/ui-drilldown/src/Drilldown/DrilldownGroup/index.tsx

@@ -29,6 +29,7 @@ import { optionsThemeGenerator } from '@instructure/ui-options'
 
 import { propTypes, allowedProps } from './props'
 import type { DrilldownGroupProps } from './props'
+import { isMac, isFirefox } from '@instructure/ui-utils'
 
 /**
 ---
@@ -48,7 +49,9 @@ class DrilldownGroup extends Component<DrilldownGroupProps> {
   static defaultProps = {
     disabled: false,
     withoutSeparators: false,
-    role: 'group'
+    // Firefox with NVDA does not read Drilldown.Group with role="group" correctly
+    // but setting role="menu" on all other platforms results in Drilldown.Group label not being read
+    role: !isMac() && isFirefox() ? 'menu' : 'group'
   }
 
   render() {

packages/ui-utils/src/getBrowser.ts

@@ -74,12 +74,19 @@ const isAndroidOrIOS = (): boolean => {
     : false
 }
 
+const isMac = (): boolean => {
+  const parser = new UAParser()
+  const result = parser.getResult()
+  return result.os.name === 'Mac OS'
+}
+
 export {
   getBrowser,
   isSafari,
   isEdge,
   isIE,
   isFirefox,
   isChromium,
-  isAndroidOrIOS
+  isAndroidOrIOS,
+  isMac
 }

packages/ui-utils/src/index.ts

@@ -44,5 +44,6 @@ export {
   isIE,
   isFirefox,
   isChromium,
-  isAndroidOrIOS
+  isAndroidOrIOS,
+  isMac
 } from './getBrowser'