fix(ui-top-nav-bar,ui-popover,ui-drilldown): automatically set aria-expanded, allow override with shouldSetAriaExpanded

This change adds a new prop (shouldSetAriaExpanded) to Popover and Drilldown as well. It defaults to true. It is needed for setting automatically the aria-expanded attribute on the DOM. This can have a side-effect of duplicating aria-expanded in certain edge cases or putting aria-expanded on triggers where it doesn't need to be there. These are very rare cases so we decided to have "break" these cases and fix all the orher ones where aria-expanded was missing

INSTUI-4544

Author: HerrTopi

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

@@ -121,7 +121,8 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
     shouldReturnFocus: true,
     withArrow: true,
     offsetX: 0,
-    offsetY: 0
+    offsetY: 0,
+    shouldSetAriaExpanded: true
   }
 
   static Group = DrilldownGroup
@@ -1494,11 +1495,13 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
       onFocus,
       onMouseOver,
       offsetX,
-      offsetY
+      offsetY,
+      shouldSetAriaExpanded
     } = this.props
 
     return trigger ? (
       <Popover
+        shouldSetAriaExpanded={shouldSetAriaExpanded}
         isShowingContent={show}
         defaultIsShowingContent={defaultShow}
         shouldCloseOnDocumentClick={true}

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

@@ -261,6 +261,12 @@ type DrilldownOwnProps = {
    * Works only if `trigger` is provided.
    */
   offsetY?: string | number
+  /**
+   * If true (default), then the aria-expanded prop is added to the trigger.
+   * If its supplied via the aria-expanded prop then it takes the given value,
+   * otherwise its calculated automatically based on whether the content is shown.
+   */
+  shouldSetAriaExpanded?: boolean
 }
 
 type PropKeys = keyof DrilldownOwnProps
@@ -338,7 +344,8 @@ const propTypes: PropValidators<PropKeys> = {
   shouldReturnFocus: PropTypes.bool,
   withArrow: PropTypes.bool,
   offsetX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  offsetY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  shouldSetAriaExpanded: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [

packages/ui-popover/src/Popover/index.tsx

@@ -98,7 +98,8 @@ class Popover extends Component<PopoverProps, PopoverState> {
     shouldReturnFocus: true,
     shouldCloseOnDocumentClick: true,
     shouldFocusContentOnTriggerBlur: false,
-    shouldCloseOnEscape: true
+    shouldCloseOnEscape: true,
+    shouldSetAriaExpanded: true
   }
 
   constructor(props: PopoverProps) {
@@ -437,7 +438,7 @@ class Popover extends Component<PopoverProps, PopoverState> {
     let trigger = this._renderTrigger
 
     if (trigger) {
-      const { on, shouldContainFocus } = this.props
+      const { on } = this.props
 
       let onClick: React.MouseEventHandler | undefined = undefined
       let onFocus: React.FocusEventHandler | undefined = undefined
@@ -468,13 +469,13 @@ class Popover extends Component<PopoverProps, PopoverState> {
         }
       }
 
-      if (shouldContainFocus) {
+      if (this.props.shouldSetAriaExpanded) {
         // only set aria-expanded if popover can contain focus
         expanded = this.shown ? 'true' : 'false'
 
         if ('aria-expanded' in this.props) {
           // @ts-expect-error It is an escape hatch, in case someone
-          // wants to remove/override aria-expanded even when shouldContainFocus
+          // wants to remove/override aria-expanded even when shouldSetAriaExpanded is set
           expanded = this.props['aria-expanded']
         }
       } else {

packages/ui-popover/src/Popover/props.ts

@@ -283,6 +283,12 @@ type PopoverOwnProps = {
    * Only applies to a Popover without an arrow.
    */
   borderWidth?: BorderWidth
+  /**
+   * If true (default), then the aria-expanded prop is added to the trigger.
+   * If its supplied via the aria-expanded prop then it takes the given value,
+   * otherwise its calculated automatically based on whether the content is shown.
+   */
+  shouldSetAriaExpanded?: boolean
 }
 
 type PopoverProps = PopoverOwnProps &
@@ -353,7 +359,8 @@ const propTypes: PropValidators<PropKeys> = {
   renderTrigger: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   elementRef: PropTypes.func,
-  borderWidth: ThemeablePropTypes.borderWidth
+  borderWidth: ThemeablePropTypes.borderWidth,
+  shouldSetAriaExpanded: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -399,7 +406,8 @@ const allowedProps: AllowedPropKeys = [
   'renderTrigger',
   'children',
   'elementRef',
-  'borderWidth'
+  'borderWidth',
+  'shouldSetAriaExpanded'
 ]
 
 export type { PopoverOwnProps, PopoverProps, PopoverState, PopoverStyle }

packages/ui-tooltip/src/Tooltip/index.tsx

@@ -177,6 +177,7 @@ class Tooltip extends Component<TooltipProps, TooltipState> {
         elementRef={this.handleRef}
         shouldCloseOnDocumentClick={false}
         shouldCloseOnEscape
+        shouldSetAriaExpanded={false}
       >
         {!preventTooltip ? (
           <span id={this._id} css={styles?.tooltip} role="tooltip">

packages/ui-top-nav-bar/src/TopNavBar/TopNavBarActionItems/index.tsx

@@ -223,7 +223,10 @@ class TopNavBarActionItems extends Component<
         tooltip={tooltip}
         showSubmenuChevron={false}
         renderSubmenu={
-          <Drilldown rootPageId={this._hiddenActionItemsMenuId}>
+          <Drilldown
+            shouldSetAriaExpanded={false}
+            rootPageId={this._hiddenActionItemsMenuId}
+          >
             {[
               <Drilldown.Page
                 id={this._hiddenActionItemsMenuId}

packages/ui-top-nav-bar/src/TopNavBar/TopNavBarMenuItems/index.tsx

@@ -163,7 +163,10 @@ class TopNavBarMenuItems extends Component<
         id={this._hiddenMenuItemsMenuTriggerId}
         status={hasActiveChild ? 'active' : 'default'}
         renderSubmenu={
-          <Drilldown rootPageId={this._hiddenItemsMenuId}>
+          <Drilldown
+            shouldSetAriaExpanded={false}
+            rootPageId={this._hiddenItemsMenuId}
+          >
             {[
               <Drilldown.Page
                 id={this._hiddenItemsMenuId}

packages/ui-top-nav-bar/src/TopNavBar/utils/exampleHelpers.tsx

@@ -84,7 +84,7 @@ const avatarExample = {
 }
 
 const itemSubmenuExample = (
-  <Drilldown rootPageId="root">
+  <Drilldown shouldSetAriaExpanded={false} rootPageId="root">
     <Drilldown.Page id="root">
       <Drilldown.Option id="linkExampleOption1" href="/#One">
         Link One