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

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}
@@ -1553,6 +1556,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
             this._trigger = el
           },
           'aria-haspopup': this.props.role,
+          'aria-expanded': 'true',
           id: this._triggerId,
           disabled: !!((trigger as ReactElement).props.disabled || disabled),
           'aria-disabled':

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

@@ -261,6 +261,10 @@ type DrilldownOwnProps = {
    * Works only if `trigger` is provided.
    */
   offsetY?: string | number
+  /**
+   * If `true` (default), aria-expanded is calculated automatically on the trigger
+   */
+  shouldSetARIAExpanded?: boolean
 }
 
 type PropKeys = keyof DrilldownOwnProps
@@ -338,7 +342,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,7 +469,7 @@ 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'
 

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

@@ -283,6 +283,10 @@ type PopoverOwnProps = {
    * Only applies to a Popover without an arrow.
    */
   borderWidth?: BorderWidth
+  /**
+   * If `true` (default), aria-expanded is calculated automatically on the trigger
+   */
+  shouldSetARIAExpanded?: boolean
 }
 
 type PopoverProps = PopoverOwnProps &
@@ -353,7 +357,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 +404,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