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

@@ -128,7 +128,8 @@ class TopNavBarItem extends Component<TopNavBarItemProps, TopNavBarItemState> {
 
     this.state = {
       isSubmenuOpen: false,
-      isPopoverOpen: false
+      isPopoverOpen: false,
+      isFocused: false
     }
   }
 
@@ -347,7 +348,8 @@ class TopNavBarItem extends Component<TopNavBarItemProps, TopNavBarItemState> {
       renderSubmenu,
       status: statusOriginal,
       renderAvatar,
-      renderIcon
+      renderIcon,
+      withFocusOutline
     } = this.props
 
     let href = hrefOriginal
@@ -423,18 +425,28 @@ class TopNavBarItem extends Component<TopNavBarItemProps, TopNavBarItemState> {
       onClick,
       onMouseOver,
       onMouseOut,
-      onFocus,
-      onBlur,
+      onFocus: createChainedFunction(onFocus, this.onFocus),
+      onBlur: createChainedFunction(onBlur, this.onBlur),
       onKeyDown: createChainedFunction(onKeyDown, this.handleKeyDown),
       onKeyUp,
       renderIcon,
       themeOverride: this.buttonThemeOverride,
       elementRef: (e) => {
         this.handleItemRef(e as HTMLButtonElement | HTMLLinkElement)
-      }
+      },
+      withFocusOutline:
+        withFocusOutline || this.hasOpenPopover || this.state.isFocused
     }
   }
 
+  onFocus = () => {
+    this.setState({ isFocused: true })
+  }
+
+  onBlur = () => {
+    this.setState({ isFocused: false })
+  }
+
   handleKeyDown: TopNavBarItemProps['onKeyDown'] = (e) => {
     if (e.key === 'ArrowDown') {
       if (

packages/ui-top-nav-bar/src/TopNavBar/TopNavBarItem/props.ts

@@ -254,6 +254,14 @@ type TopNavBarItemOwnProps = {
    * Should close the container menu component, if clicked on the option marked with this prop
    */
   shouldCloseOnClick?: ShouldCloseOnClick
+
+  /**
+   * Manually control if this component 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 or has an open popover.
+   */
+  withFocusOutline?: boolean
 }
 
 type PropKeys = keyof TopNavBarItemOwnProps
@@ -281,6 +289,7 @@ type TopNavBarItemStyle = ComponentStyle<
 type TopNavBarItemState = {
   isSubmenuOpen: boolean
   isPopoverOpen: boolean
+  isFocused: boolean
 }
 
 type TopNavBarItemStyleProps = {
@@ -316,7 +325,8 @@ const propTypes: PropValidators<PropKeys> = {
   onKeyUp: PropTypes.func,
   elementRef: PropTypes.func,
   itemRef: PropTypes.func,
-  shouldCloseOnClick: PropTypes.oneOf(['auto', 'always', 'never'])
+  shouldCloseOnClick: PropTypes.oneOf(['auto', 'always', 'never']),
+  withFocusOutline: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -343,7 +353,8 @@ const allowedProps: AllowedPropKeys = [
   'onKeyUp',
   'elementRef',
   'itemRef',
-  'shouldCloseOnClick'
+  'shouldCloseOnClick',
+  'withFocusOutline'
 ]
 
 export type {

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

@@ -400,7 +400,8 @@ class TopNavBarSmallViewportLayout extends Component<
         tooltip: dropdownMenuToggleButtonTooltip,
         themeOverride: { itemSpacing: '0.375rem' },
         'aria-haspopup': 'menu',
-        'aria-expanded': isDropdownMenuOpen
+        'aria-expanded': isDropdownMenuOpen,
+        withFocusOutline: isDropdownMenuOpen ? true : undefined
       }
 
       const alternativeTitleIconProps = {

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.
    */