AvatarStack: Add keyboard support to AvatarStack

.changeset/shy-seahorses-mix.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+AvatarStack: Adds keyboard support to `AvatarStack`

packages/react/src/AvatarStack/AvatarStack.tsx

@@ -1,5 +1,5 @@
 import {clsx} from 'clsx'
-import React from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
 import {get} from '../constants'
 import Box from '../Box'
@@ -12,6 +12,8 @@ import {isResponsiveValue} from '../hooks/useResponsiveValue'
 import {getBreakpointDeclarations} from '../utils/getBreakpointDeclarations'
 import {defaultSxProp} from '../utils/defaultSxProp'
 import type {WidthOnlyViewportRangeKeys} from '../utils/types/ViewportRangeKeys'
+import {getInteractiveNodes} from '../internal/utils/getInteractiveNodes'
+import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles'
 
 type StyledAvatarStackWrapperProps = {
   count?: number
@@ -30,6 +32,8 @@ const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
   .pc-AvatarStackBody {
     display: flex;
     position: absolute;
+
+    ${getGlobalFocusStyles('1px')}
   }
 
   .pc-AvatarItem {
@@ -130,7 +134,8 @@ const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
     .pc-AvatarStackBody {
       flex-direction: row-reverse;
 
-      &:not(.pc-AvatarStack--disableExpand):hover {
+      &:not(.pc-AvatarStack--disableExpand):hover,
+      &:not(.pc-AvatarStack--disableExpand):focus-within {
         .pc-AvatarItem {
           margin-right: ${get('space.1')}!important;
           margin-left: 0 !important;
@@ -143,7 +148,8 @@ const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
     }
   }
 
-  .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover {
+  .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover,
+  .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):focus-within {
     width: auto;
 
     .pc-AvatarItem {
@@ -157,6 +163,8 @@ const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
         visibility 0.2s ease-in-out,
         box-shadow 0.1s ease-in-out;
 
+      ${getGlobalFocusStyles('1px')}
+
       &:first-child {
         margin-left: 0;
       }
@@ -195,6 +203,9 @@ const AvatarStack = ({
   className,
   sx: sxProp = defaultSxProp,
 }: AvatarStackProps) => {
+  const [hasInteractiveChildren, setHasInteractiveChildren] = useState<boolean | undefined>(false)
+  const AvatarStackContainer = useRef(null)
+
   const count = React.Children.count(children)
   const wrapperClassNames = clsx(
     {
@@ -249,6 +260,11 @@ const AvatarStack = ({
     )
   }
 
+  useEffect(() => {
+    const hasInteractive = getInteractiveNodes(AvatarStackContainer.current, '[tabindex]')
+    setHasInteractiveChildren(hasInteractive)
+  }, [children])
+
   const getResponsiveAvatarSizeStyles = () => {
     // if there is no size set on the AvatarStack, use the `size` props of the Avatar children to set the `--avatar-stack-size` CSS variable
     if (!size) {
@@ -278,8 +294,10 @@ const AvatarStack = ({
   )
 
   return (
-    <AvatarStackWrapper count={count} className={wrapperClassNames} sx={avatarStackSx}>
-      <Box className={bodyClassNames}> {transformChildren(children)}</Box>
+    <AvatarStackWrapper count={count} className={wrapperClassNames} sx={avatarStackSx} ref={AvatarStackContainer}>
+      <Box className={bodyClassNames} tabIndex={!hasInteractiveChildren && !disableExpand ? 0 : undefined}>
+        {transformChildren(children)}
+      </Box>
     </AvatarStackWrapper>
   )
 }

packages/react/src/__tests__/AvatarStack.test.tsx

@@ -42,4 +42,28 @@ describe('Avatar', () => {
   it('respects alignRight props', () => {
     expect(render(rightAvatarComp)).toMatchSnapshot()
   })
+
+  it('should have a tabindex of 0 if there are no interactive children', () => {
+    const {container} = HTMLRender(avatarComp)
+    expect(container.querySelector('[tabindex="0"]')).toBeInTheDocument()
+  })
+
+  it('should not have a tabindex if there are interactive children', () => {
+    const {container} = HTMLRender(
+      <AvatarStack>
+        <button type="button">Click me</button>
+      </AvatarStack>,
+    )
+    expect(container.querySelector('[tabindex="0"]')).not.toBeInTheDocument()
+  })
+
+  it('should not have a tabindex if disableExpand is true', () => {
+    const {container} = HTMLRender(
+      <AvatarStack disableExpand>
+        <img src="https://avatars.githubusercontent.com/primer" alt="" />
+        <img src="https://avatars.githubusercontent.com/github" alt="" />
+      </AvatarStack>,
+    )
+    expect(container.querySelector('[tabindex="0"]')).not.toBeInTheDocument()
+  })
 })

packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap

@@ -107,32 +107,57 @@ exports[`Avatar respects alignRight props 1`] = `
   flex-direction: row-reverse;
 }
 
-.c0.pc-AvatarStack--right .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem {
+.c0.pc-AvatarStack--right .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem,
+.c0.pc-AvatarStack--right .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):focus-within .pc-AvatarItem {
   margin-right: 4px!important;
   margin-left: 0 !important;
 }
 
-.c0.pc-AvatarStack--right .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem:first-child {
+.c0.pc-AvatarStack--right .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem:first-child,
+.c0.pc-AvatarStack--right .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):focus-within .pc-AvatarItem:first-child {
   margin-right: 0 !important;
 }
 
-.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover {
+.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover,
+.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):focus-within {
   width: auto;
 }
 
-.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem {
+.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem,
+.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):focus-within .pc-AvatarItem {
   margin-left: 4px;
   opacity: 100%;
   visibility: visible;
   -webkit-transition: margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;
   transition: margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;
 }
 
-.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem box-shadow:inset 0 0 0 4px function (props) {
+.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem box-shadow:inset 0 0 0 4px function (props),
+.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):focus-within .pc-AvatarItem box-shadow:inset 0 0 0 4px function (props) {
   return: (0,_core.get)(props.theme,path,fallback);
 }
 
-.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem:first-child {
+.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem:focus:not(:disabled),
+.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):focus-within .pc-AvatarItem:focus:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: 1px;
+}
+
+.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem:focus:not(:disabled):not(:focus-visible),
+.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):focus-within .pc-AvatarItem:focus:not(:disabled):not(:focus-visible) {
+  outline: solid 1px transparent;
+}
+
+.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem:focus-visible:not(:disabled),
+.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):focus-within .pc-AvatarItem:focus-visible:not(:disabled) {
+  box-shadow: none;
+  outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
+  outline-offset: 1px;
+}
+
+.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem:first-child,
+.c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):focus-within .pc-AvatarItem:first-child {
   margin-left: 0;
 }
 
@@ -145,8 +170,8 @@ exports[`Avatar respects alignRight props 1`] = `
 >
   <div
     className="pc-AvatarStackBody"
+    tabIndex={0}
   >
-
     <img
       alt=""
       className="pc-AvatarItem"

packages/react/src/internal/utils/__tests__/getInteractiveNode.test.ts

@@ -0,0 +1,59 @@
+import {getInteractiveNodes} from '../getInteractiveNodes'
+
+describe('getInteractiveNodes', () => {
+  test('if there are no interactive nodes', () => {
+    const node = document.createElement('div')
+    expect(getInteractiveNodes(node)).toBeUndefined()
+  })
+
+  test('if there are interactive nodes', () => {
+    const node = document.createElement('div')
+    const button = document.createElement('button')
+    node.appendChild(button)
+
+    expect(getInteractiveNodes(node)).toBe(true)
+  })
+
+  test('if the node itself is interactive', () => {
+    const node = document.createElement('button')
+
+    expect(getInteractiveNodes(node)).toBe(true)
+  })
+
+  test('if there are nested interactive nodes', () => {
+    const node = document.createElement('div')
+    const wrapper = document.createElement('div')
+    const button = document.createElement('button')
+    const span = document.createElement('span')
+    wrapper.appendChild(button)
+    button.appendChild(span)
+    node.appendChild(wrapper)
+
+    expect(getInteractiveNodes(node)).toBe(true)
+  })
+
+  test('if the node is disabled', () => {
+    const node = document.createElement('button')
+    node.disabled = true
+
+    expect(getInteractiveNodes(node)).toBeUndefined()
+  })
+
+  test('if the child node is disabled', () => {
+    const node = document.createElement('div')
+    const button = document.createElement('button')
+    button.disabled = true
+    node.appendChild(button)
+
+    expect(getInteractiveNodes(node)).toBeUndefined()
+  })
+
+  test('if child node has tabindex', () => {
+    const node = document.createElement('div')
+    const span = document.createElement('span')
+    span.setAttribute('tabindex', '0')
+    node.appendChild(span)
+
+    expect(getInteractiveNodes(node)).toBe(true)
+  })
+})

packages/react/src/internal/utils/getInteractiveNodes.ts

@@ -0,0 +1,23 @@
+const interactiveElements = [
+  'a[href]',
+  'button:not([disabled])',
+  'summary',
+  'select',
+  'input:not([type=hidden])',
+  'textarea',
+  '[tabindex="0"]',
+]
+
+export function getInteractiveNodes(node: HTMLElement | null, ignoreSelectors?: string) {
+  if (!node) return
+
+  let interactiveNodes = Array.from(node.querySelectorAll(interactiveElements.join(', ')))
+
+  if (ignoreSelectors) {
+    interactiveNodes = interactiveNodes.filter(node => !node.matches(ignoreSelectors))
+  }
+
+  if (interactiveNodes.length || node.matches(interactiveElements.join(', '))) {
+    return true
+  }
+}