diff --git a/packages/ui-drilldown/src/Drilldown/index.tsx b/packages/ui-drilldown/src/Drilldown/index.tsx index 01fc808827..0ab586e00d 100644 --- a/packages/ui-drilldown/src/Drilldown/index.tsx +++ b/packages/ui-drilldown/src/Drilldown/index.tsx @@ -121,7 +121,8 @@ class Drilldown extends Component { shouldReturnFocus: true, withArrow: true, offsetX: 0, - offsetY: 0 + offsetY: 0, + shouldSetAriaExpanded: true } static Group = DrilldownGroup @@ -1494,11 +1495,13 @@ class Drilldown extends Component { onFocus, onMouseOver, offsetX, - offsetY + offsetY, + shouldSetAriaExpanded } = this.props return trigger ? ( = { 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 index 122159aa73..58a3f77d76 100644 --- a/packages/ui-popover/src/Popover/index.tsx +++ b/packages/ui-popover/src/Popover/index.tsx @@ -98,7 +98,8 @@ class Popover extends Component { shouldReturnFocus: true, shouldCloseOnDocumentClick: true, shouldFocusContentOnTriggerBlur: false, - shouldCloseOnEscape: true + shouldCloseOnEscape: true, + shouldSetAriaExpanded: true } constructor(props: PopoverProps) { @@ -437,7 +438,7 @@ class Popover extends Component { 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 { } } - 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 index 9ef38432a5..c0baf1770c 100644 --- 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 = { 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 index fec54714e5..0573ede3ed 100644 --- a/packages/ui-tooltip/src/Tooltip/index.tsx +++ b/packages/ui-tooltip/src/Tooltip/index.tsx @@ -177,6 +177,7 @@ class Tooltip extends Component { elementRef={this.handleRef} shouldCloseOnDocumentClick={false} shouldCloseOnEscape + shouldSetAriaExpanded={false} > {!preventTooltip ? ( diff --git a/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarActionItems/index.tsx b/packages/ui-top-nav-bar/src/TopNavBar/TopNavBarActionItems/index.tsx index 4a4d198f6e..674e041878 100644 --- 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={ - + {[ + {[ + Link One