feat(useFocusZone): update active descendant on mousemove

Author: dgreif

package-lock.json

@@ -129,7 +129,7 @@
     "rollup-plugin-visualizer": "5.5.0",
     "semver": "7.3.5",
     "styled-components": "4.4.1",
-    "typescript": "4.3.2"
+    "typescript": "4.2.2"
   },
   "peerDependencies": {
     "react": "^17.0.0",

package.json

@@ -122,6 +122,7 @@ export interface ItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, '
 }
 
 export const itemActiveDescendantClass = `${uniqueId()}active-descendant`
+export const itemPassiveActiveDescendantClass = `${uniqueId()}passive-active-descendant`
 
 const getItemVariant = (variant = 'default', disabled?: boolean) => {
   if (disabled) {
@@ -226,6 +227,11 @@ const StyledItem = styled.div<
     outline: none;
   }
 
+  // Passive active descendant is still an active descendant, but not focused by keyboard navigation (e.g. default item, hover, etc)
+  &.${itemPassiveActiveDescendantClass} {
+    background: ${({hoverBackground}) => hoverBackground};
+  }
+
   ${sx}
 `
 

src/ActionList/Item.tsx

@@ -7,7 +7,7 @@ import {ActionList} from '../ActionList'
 import Spinner from '../Spinner'
 import {useFocusZone} from '../hooks/useFocusZone'
 import {uniqueId} from '../utils/uniqueId'
-import {itemActiveDescendantClass} from '../ActionList/Item'
+import {itemActiveDescendantClass, itemPassiveActiveDescendantClass} from '../ActionList/Item'
 import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
 import styled from 'styled-components'
 import {get} from '../constants'
@@ -100,17 +100,20 @@ export function FilteredActionList({
       return true
     },
     activeDescendantFocus: inputRef,
-    onActiveDescendantChanged: (current, previous) => {
+    onActiveDescendantChanged: (current, previous, activatedByKeyboardNavigation) => {
       activeDescendantRef.current = current
 
       if (previous) {
         previous.classList.remove(itemActiveDescendantClass)
+        previous.classList.remove(itemPassiveActiveDescendantClass)
       }
 
       if (current) {
-        current.classList.add(itemActiveDescendantClass)
+        current.classList.add(
+          activatedByKeyboardNavigation ? itemActiveDescendantClass : itemPassiveActiveDescendantClass
+        )
 
-        if (listContainerRef.current) {
+        if (listContainerRef.current && activatedByKeyboardNavigation) {
           scrollIntoViewingArea(current, listContainerRef.current)
         }
       }

src/FilteredActionList/FilteredActionList.tsx

@@ -189,7 +189,8 @@ export interface FocusZoneSettings {
    */
   onActiveDescendantChanged?: (
     newActiveDescendant: HTMLElement | undefined,
-    previousActiveDescendant: HTMLElement | undefined
+    previousActiveDescendant: HTMLElement | undefined,
+    activatedByKeyboardNavigation: boolean
   ) => void
 
   /**
@@ -337,13 +338,13 @@ export function focusZone(container: HTMLElement, settings?: FocusZoneSettings):
     return document.activeElement === activeDescendantControl
   }
 
-  function updateFocusedElement(to?: HTMLElement) {
+  function updateFocusedElement(to?: HTMLElement, causedByKeyboardNavigation = false) {
     const from = currentFocusedElement
     currentFocusedElement = to
 
     if (activeDescendantControl) {
       if (to && isActiveDescendantInputFocused()) {
-        setActiveDescendant(from, to)
+        setActiveDescendant(from, to, causedByKeyboardNavigation)
       } else {
         clearActiveDescendant()
       }
@@ -358,13 +359,21 @@ export function focusZone(container: HTMLElement, settings?: FocusZoneSettings):
     to?.setAttribute('tabindex', '0')
   }
 
-  function setActiveDescendant(from: HTMLElement | undefined, to: HTMLElement) {
+  function setActiveDescendant(from: HTMLElement | undefined, to: HTMLElement, activatedByKeyboardNavigation = false) {
     if (!to.id) {
       to.setAttribute('id', uniqueId())
     }
 
-    activeDescendantControl?.setAttribute('aria-activedescendant', to.id)
-    activeDescendantCallback?.(to, from === to ? undefined : from)
+    if (
+      !activeDescendantControl ||
+      (!activatedByKeyboardNavigation && activeDescendantControl.getAttribute('aria-activedescendant') === to.id)
+    ) {
+      // prevent active descendant callback from being called repeatedly if the same element is activated (e.g. via mousemove)
+      return
+    }
+
+    activeDescendantControl.setAttribute('aria-activedescendant', to.id)
+    activeDescendantCallback?.(to, from, activatedByKeyboardNavigation)
   }
 
   function clearActiveDescendant(previouslyActiveElement = currentFocusedElement) {
@@ -373,7 +382,7 @@ export function focusZone(container: HTMLElement, settings?: FocusZoneSettings):
     }
 
     activeDescendantControl?.removeAttribute('aria-activedescendant')
-    activeDescendantCallback?.(undefined, previouslyActiveElement)
+    activeDescendantCallback?.(undefined, previouslyActiveElement, false)
   }
 
   function beginFocusManagement(...elements: HTMLElement[]) {
@@ -484,6 +493,23 @@ export function focusZone(container: HTMLElement, settings?: FocusZoneSettings):
         updateFocusedElement(event.target)
       }
     })
+    container.addEventListener(
+      'mousemove',
+      ({target}) => {
+        if (!(target instanceof HTMLElement)) {
+          return
+        }
+
+        const focusableElement = focusableElements.find(element => element.contains(target))
+
+        if (focusableElement) {
+          updateFocusedElement(focusableElement)
+        }
+      },
+      {signal, capture: true}
+    )
+
+    // Listeners specifically on the controlling element
     activeDescendantControl.addEventListener('focusin', () => {
       // Focus moved into the active descendant input.  Activate current or first descendant.
       if (!currentFocusedElement) {
@@ -637,13 +663,13 @@ export function focusZone(container: HTMLElement, settings?: FocusZoneSettings):
             }
           }
 
-          if (nextElementToFocus) {
-            if (activeDescendantControl) {
-              updateFocusedElement(nextElementToFocus)
-            } else {
-              lastKeyboardFocusDirection = direction
-              nextElementToFocus.focus()
-            }
+          if (activeDescendantControl) {
+            updateFocusedElement(nextElementToFocus || currentFocusedElement, true)
+          } else if (nextElementToFocus) {
+            lastKeyboardFocusDirection = direction
+
+            // updateFocusedElement will be called implicitly when focus moves, as long as the event isn't prevented somehow
+            nextElementToFocus.focus()
           }
           // Tab should always allow escaping from this container, so only
           // preventDefault if tab key press already resulted in a focus movement