fix(ui-top-nav-bar,ui-buttons): display a focus ring in TopNavBar if a button has a Popover open

When a menu is active, it should be indicated as the “active” element for a11y reasons

Fixes part of INSTUI-4323

Author: matyasf

packages/ui-buttons/src/BaseButton/index.tsx

@@ -251,6 +251,7 @@ class BaseButton extends Component<BaseButtonProps> {
       tabIndex,
       styles,
       makeStyles,
+      withFocusOutline,
       ...props
     } = this.props
 
@@ -307,6 +308,7 @@ class BaseButton extends Component<BaseButtonProps> {
         focusRingBorderRadius={String(
           (styles?.content as { borderRadius?: string | number })?.borderRadius
         )}
+        withFocusOutline={withFocusOutline}
       >
         <span css={styles?.content}>{this.renderChildren()}</span>
       </View>

packages/ui-buttons/src/BaseButton/props.ts

@@ -159,9 +159,16 @@ type BaseButtonOwnProps = {
 
   /**
    * Specifies the tabindex of the `Button`.
-   *
    */
   tabIndex?: number
+
+  /**
+   * Manually control if the `Button` should display a focus outline.
+   *
+   * When left `undefined` (which is the default) the focus outline will display
+   * if this component is focusable and receives focus.
+   */
+  withFocusOutline?: boolean
 }
 
 type BaseButtonStyleProps = {
@@ -218,7 +225,8 @@ const propTypes: PropValidators<PropKeys> = {
   onClick: PropTypes.func,
   onKeyDown: PropTypes.func,
   renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  tabIndex: PropTypes.number
+  tabIndex: PropTypes.number,
+  withFocusOutline: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [

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

@@ -431,7 +431,8 @@ class TopNavBarItem extends Component<TopNavBarItemProps, TopNavBarItemState> {
       themeOverride: this.buttonThemeOverride,
       elementRef: (e) => {
         this.handleItemRef(e as HTMLButtonElement | HTMLLinkElement)
-      }
+      },
+      withFocusOutline: this.hasOpenPopover
     }
   }
 

packages/ui-view/src/View/props.ts

@@ -135,7 +135,8 @@ type ViewOwnProps = {
    */
   insetBlockEnd?: string
   /**
-   * Manually control if the `View` should display a focus outline.<br/>
+   * Manually control if the `View` should display a focus outline.
+   *
    * When left `undefined` (which is the default) the focus outline will display
    * automatically if the `View` is focusable and receives focus.
    */