instructure · HerrTopi · Jun 13, 2025 · Jun 11, 2025
diff --git a/packages/ui-drilldown/src/Drilldown/index.tsx b/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}

diff --git a/packages/ui-drilldown/src/Drilldown/props.ts b/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 = [

diff --git a/packages/ui-popover/src/Popover/index.tsx b/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 {

diff --git a/packages/ui-popover/src/Popover/props.ts b/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 }

diff --git a/packages/ui-tooltip/src/Tooltip/index.tsx b/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">

diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarActionItems/index.tsx b/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}

diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarMenuItems/index.tsx b/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}

diff --git a/packages/ui-top-nav-bar/src/TopNavBar/utils/exampleHelpers.tsx b/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