fix(ui-top-nav-bar,ui-drilldown): fix Drilldown's and TopNavBar's keyboard navigation issues

INSTUI-4494

Author: ToMESSKa

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

@@ -889,7 +889,14 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
   handleToggle = (event: React.UIEvent | React.FocusEvent, shown: boolean) => {
     const { onToggle } = this.props
 
-    this.setState({ isShowingPopover: shown })
+    const mouseEvent = event as React.MouseEvent
+
+    this.setState({ isShowingPopover: shown }, () => {
+      //  Focus first item when it's a keyboard event (mouseEvent.detail === 0)
+      if (mouseEvent.detail === 0 && shown) {
+        this.focusFirstAvailableItem()
+      }
+    })
 
     if (typeof onToggle === 'function') {
       onToggle(event, {
@@ -900,6 +907,24 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
     }
   }
 
+  focusFirstAvailableItem() {
+    if (!this.currentPage) return
+
+    // Check for action option
+    const actionLabel = callRenderProp(this.currentPage.renderActionLabel)
+    // Use action ID if exists, otherwise first non-action option's ID
+    const targetId = actionLabel
+      ? this._headerActionId
+      : this.currentPage.children[0]?.props.id
+
+    if (!targetId) return
+
+    this.setState({ highlightedOptionId: targetId }, () => {
+      // A slight delay is needed to focus the first item after the popover appears.
+      setTimeout(() => this.focusOption(targetId), 10)
+    })
+  }
+
   renderList(
     getOptionProps: SelectableRender['getOptionProps'],
     getDisabledOptionProps: SelectableRender['getDisabledOptionProps']
@@ -1055,7 +1080,8 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
       role,
       elementRef,
       variant: 'default',
-      tabIndex: -1
+      // header should not get focused (role === 'presentation')
+      tabIndex: role === 'presentation' ? -1 : 0
     }
 
     // extra data we need track on the option,
@@ -1378,7 +1404,6 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
             borderWidth="small"
             as="div"
             elementRef={this.handleDrilldownRef}
-            tabIndex={0}
             css={styles?.drilldown}
             position="relative"
             borderRadius="small"
@@ -1481,7 +1506,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
           this.handleToggle(event, false)
         }}
         onShowContent={(event) => this.handleToggle(event, true)}
-        mountNode={mountNode}
+        mountNode={mountNode || this.ref}
         placement={placement}
         withArrow={withArrow}
         positionTarget={positionTarget}

packages/ui-drilldown/src/Drilldown/props.ts

@@ -207,7 +207,7 @@ type DrilldownOwnProps = {
 
   /**
    * If a trigger is supplied, an element or a function returning an element
-   * to use as the mount node for the `<Drilldown />` (defaults to `document.body`)
+   * to use as the mount node for the `<Drilldown />` (defaults to the component itself)
    */
   mountNode?: PositionMountNode
 

packages/ui-top-nav-bar/src/TopNavBar/README.md

@@ -648,12 +648,12 @@ class PlaygroundExample extends React.Component {
 
                       {...item.submenu && {
                         renderSubmenu: this.generateSubmenu(item),
-                        'aria-label': `Open for ${item.label} menu`
+                        'aria-label': `${item.label} menu`
                       }}
 
                       {...item.customPopoverConfig && {
                         customPopoverConfig: item.customPopoverConfig,
-                        'aria-label': `Open for ${item.label} menu`
+                        'aria-label': `${item.label} menu`
                       }}
 
                       {...!item.submenu && !item.customPopoverConfig ? {
@@ -720,7 +720,7 @@ class PlaygroundExample extends React.Component {
                   <TopNavBar.Item
                     id="Info"
                     renderIcon={<IconQuestionLine />}
-                    aria-label="Open for info menu"
+                    aria-label="info menu"
                     renderSubmenu={this.generateSubmenu({
                       id: 'Info',
                       submenu: ['Contact', 'Map', 'Career'].map(item => ({

packages/ui-top-nav-bar/src/TopNavBar/TopNavBarLayout/DesktopLayout/styles.ts

@@ -66,10 +66,9 @@ const generateStyle = (
       alignItems: 'stretch',
       justifyContent: 'space-between',
       height: componentTheme.desktopHeight,
-      position: 'relative',
       zIndex: componentTheme.desktopZIndex,
       maxWidth: '100%',
-      overflow: 'hidden',
+      overflow: 'visible',
       paddingInline: componentTheme.desktopInlinePadding,
       paddingBlock: 0,
       ...(hasBrandBlock && {
@@ -113,7 +112,6 @@ const generateStyle = (
       marginInline: componentTheme.desktopUserContainerInlineMargin,
 
       ...(hasUserSeparator && {
-        position: 'relative',
         paddingInlineStart: componentTheme.desktopUserSeparatorGap,
 
         '&::before': {

packages/ui-top-nav-bar/src/TopNavBar/TopNavBarMenuItems/styles.ts

@@ -51,7 +51,8 @@ const generateStyle = (
       flexDirection: 'row',
       alignItems: 'stretch',
       // padding to prevent focus ring getting cropped by `overflow: hidden`
-      padding: '0 0.125rem'
+      padding: '0 0.125rem',
+      overflow: 'visible'
     },
     submenuOption: {
       label: 'topNavBarMenuItems__submenuOption',