feat(ActionList): prevent hover state if another item is active/focused

Author: dgreif

src/ActionList/Item.tsx

@@ -181,7 +181,8 @@ const StyledItem = styled.div<
 
   @media (hover: hover) and (pointer: fine) {
     :hover {
-      background: ${({hoverBackground}) => hoverBackground};
+      // allow override in case another item in the list is active/focused
+      background: var(--item-hover-bg-override, ${({hoverBackground}) => hoverBackground});
       cursor: ${({variant, item}) => getItemVariant(variant, item?.disabled).hoverCursor};
     }
   }
@@ -207,7 +208,11 @@ const StyledItem = styled.div<
   &:hover ${StyledItemContent}::before,
   // - below Hovered
   // '*' instead of '&' because '&' maps to separate class names depending on 'variant'
-  :hover + * ${StyledItemContent}::before,
+  :hover + * ${StyledItemContent}::before {
+    // allow override in case another item in the list is active/focused
+    border-color: var(--item-hover-divider-border-color-override, transparent) !important;
+  }
+
   // - above Focused
   &:focus ${StyledItemContent}::before,
   // - below Focused

src/ActionList/List.tsx

@@ -6,6 +6,7 @@ import {Divider} from './Divider'
 import styled from 'styled-components'
 import {get} from '../constants'
 import {SystemCssProperties} from '@styled-system/css'
+import {hasActiveDescendantAttribute} from '../behaviors/focusZone'
 
 export type ItemInput = ItemProps | (Partial<ItemProps> & {renderItem: typeof Item})
 
@@ -102,6 +103,11 @@ const StyledList = styled.div`
    * hardcoded '20px'
    */
   line-height: 20px;
+
+  &[${hasActiveDescendantAttribute}], &:focus-within {
+    --item-hover-bg-override: none;
+    --item-hover-divider-border-color-override: ${get('colors.selectMenu.borderSecondary')};
+  }
 `
 
 /**

src/behaviors/focusZone.ts

@@ -315,6 +315,7 @@ function shouldIgnoreFocusHandling(keyboardEvent: KeyboardEvent, activeElement:
 export const isActiveDescendantAttribute = 'data-is-active-descendant'
 export const activeDescendantActivatedDirectly = 'activated-directly'
 export const activeDescendantActivatedIndirectly = 'activated-indirectly'
+export const hasActiveDescendantAttribute = 'data-has-active-descendant'
 
 /**
  * Sets up the arrow key focus behavior for all focusable elements in the given `container`.
@@ -381,6 +382,7 @@ export function focusZone(container: HTMLElement, settings?: FocusZoneSettings):
     }
 
     activeDescendantControl.setAttribute('aria-activedescendant', to.id)
+    container.setAttribute(hasActiveDescendantAttribute, to.id)
     to.setAttribute(
       isActiveDescendantAttribute,
       directlyActivated ? activeDescendantActivatedDirectly : activeDescendantActivatedIndirectly
@@ -394,6 +396,7 @@ export function focusZone(container: HTMLElement, settings?: FocusZoneSettings):
     }
 
     activeDescendantControl?.removeAttribute('aria-activedescendant')
+    container.removeAttribute(hasActiveDescendantAttribute)
     previouslyActiveElement?.removeAttribute(isActiveDescendantAttribute)
     activeDescendantCallback?.(undefined, previouslyActiveElement, false)
   }