Add keyboard-accessible tooltip for truncated ActionList.Description

.changeset/chatty-paws-attend.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Add keyboard-accessible tooltip for truncated ActionList.Description

e2e/components/ActionList.test.ts

@@ -140,6 +140,10 @@ const stories = [
     title: 'All combinations',
     id: 'components-actionlist-examples--all-combinations',
   },
+  {
+    title: 'Text Wrap And Truncation',
+    id: 'components-actionlist-features--text-wrap-and-truncation',
+  },
 ] as const
 
 test.describe('ActionList', () => {
@@ -160,4 +164,41 @@ test.describe('ActionList', () => {
       }
     })
   }
+
+  test.describe('Truncated Description Tooltip', () => {
+    for (const theme of themes) {
+      test(`inline truncated tooltip on focus @vrt ${theme}`, async ({page}) => {
+        await visit(page, {
+          id: 'components-actionlist-features--text-wrap-and-truncation',
+          globals: {
+            colorScheme: theme,
+          },
+        })
+
+        // Focus the item with a simple truncated inline description
+        const inlineItem = page.getByRole('button', {name: /Inline Description/}).first()
+        await inlineItem.focus()
+
+        // Tooltip uses popover attribute; wait for it to become visible
+        await expect(page.locator('[popover]:popover-open')).toBeVisible()
+        await expect(page).toHaveScreenshot(`ActionList.Truncated Inline Tooltip.${theme}.png`)
+      })
+
+      test(`complex truncated tooltip on focus @vrt ${theme}`, async ({page}) => {
+        await visit(page, {
+          id: 'components-actionlist-features--text-wrap-and-truncation',
+          globals: {
+            colorScheme: theme,
+          },
+        })
+
+        // Focus the item with truncated description containing complex children (bold/italic)
+        const complexItem = page.getByRole('button', {name: /Description with truncation and complex children/})
+        await complexItem.focus()
+
+        await expect(page.locator('[popover]:popover-open')).toBeVisible()
+        await expect(page).toHaveScreenshot(`ActionList.Truncated Complex Tooltip.${theme}.png`)
+      })
+    }
+  })
 })

packages/react/src/ActionList/ActionList.module.css

@@ -541,12 +541,12 @@
       transform: scaleY(1);
     }
 
-    & + .SubGroup {
+    & ~ .SubGroup {
       display: none;
     }
 
     /* show active indicator on parent collapse if child is active */
-    &:has(+ .SubGroup [data-active='true']) {
+    &:has(~ .SubGroup [data-active='true']) {
       background: var(--control-transparent-bgColor-selected);
 
       & .ItemLabel {

packages/react/src/ActionList/ActionList.test.tsx

@@ -145,7 +145,7 @@ describe('ActionList', () => {
     expect(container.querySelector('li[aria-disabled="true"]')?.nextElementSibling).toHaveAttribute('tabindex', '0')
   })
 
-  it('sets title correctly for Description component', () => {
+  it('sets Description title for button-semantics items (tooltip path)', () => {
     const {container} = HTMLRender(
       <ActionList>
         <ActionList.Item>
@@ -168,6 +168,36 @@ describe('ActionList', () => {
 
     const descriptions = container.querySelectorAll('[data-component="ActionList.Description"]')
 
+    // For button-semantic items, the native title is suppressed in favor of
+    // a keyboard-accessible Tooltip rendered by the parent Item.
+    expect(descriptions[0]).toHaveAttribute('title', '')
+    expect(descriptions[1]).toHaveAttribute('title', '')
+    expect(descriptions[2]).not.toHaveAttribute('title')
+  })
+
+  it('sets Description title for list-semantics items (no truncation tooltip path)', () => {
+    const {container} = HTMLRender(
+      <ActionList role="listbox" selectionVariant="single">
+        <ActionList.Item>
+          Option 1<ActionList.Description truncate>Simple string description</ActionList.Description>
+        </ActionList.Item>
+        <ActionList.Item>
+          Option 2
+          <ActionList.Description truncate>
+            <span>Complex</span> content
+          </ActionList.Description>
+        </ActionList.Item>
+        <ActionList.Item>
+          Option 3
+          <ActionList.Description>
+            <span>Non-truncated</span> content
+          </ActionList.Description>
+        </ActionList.Item>
+      </ActionList>,
+    )
+
+    const descriptions = container.querySelectorAll('[data-component="ActionList.Description"]')
+
     expect(descriptions[0]).toHaveAttribute('title', 'Simple string description')
     expect(descriptions[1]).toHaveAttribute('title', 'Complex content')
     expect(descriptions[2]).not.toHaveAttribute('title')

packages/react/src/ActionList/Description.test.tsx

@@ -32,7 +32,9 @@ describe('ActionList.Description', () => {
 
     const description = getByText('Item 1 description')
     expect(description.tagName).toBe('DIV')
-    expect(description).toHaveAttribute('title', 'Item 1 description')
+    // For button-semantic items, the native title is suppressed in favor of
+    // a keyboard-accessible Tooltip rendered by the parent Item.
+    expect(description).toHaveAttribute('title', '')
     expect(description).toHaveStyle('flex-basis: auto')
     expect(description).toHaveStyle('text-overflow: ellipsis')
     expect(description).toHaveStyle('overflow: hidden')

packages/react/src/ActionList/Description.tsx

@@ -29,17 +29,27 @@ export const Description: FCWithSlotMarker<React.PropsWithChildren<ActionListDes
   style,
   ...props
 }) => {
-  const {blockDescriptionId, inlineDescriptionId} = React.useContext(ItemContext)
+  const {blockDescriptionId, inlineDescriptionId, setTruncatedText} = React.useContext(ItemContext)
   const containerRef = React.useRef<HTMLDivElement>(null)
   const [computedTitle, setComputedTitle] = React.useState<string>('')
 
   // Extract text content from rendered DOM for tooltip
   React.useEffect(() => {
     if (truncate && containerRef.current) {
-      const textContent = containerRef.current.textContent || ''
+      const el = containerRef.current
+      const textContent = el.textContent || ''
       setComputedTitle(textContent)
+      if (setTruncatedText) {
+        setTruncatedText(
+          el.scrollWidth > el.clientWidth
+            ? typeof props.children === 'string'
+              ? props.children
+              : textContent
+            : undefined,
+        )
+      }
     }
-  }, [truncate, props.children])
+  }, [truncate, props.children, setTruncatedText])
 
   const effectiveTitle = typeof props.children === 'string' ? props.children : computedTitle
 
@@ -61,7 +71,7 @@ export const Description: FCWithSlotMarker<React.PropsWithChildren<ActionListDes
         id={inlineDescriptionId}
         className={clsx(className, classes.Description)}
         style={style}
-        title={effectiveTitle}
+        title={setTruncatedText ? '' : effectiveTitle}
         inline={true}
         maxWidth="100%"
         data-component="ActionList.Description"

packages/react/src/ActionList/Item.test.tsx

@@ -3,6 +3,7 @@ import {render as HTMLRender, waitFor, fireEvent} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React, {type JSX} from 'react'
 import {ActionList} from '.'
+import {AnchoredOverlay} from '../AnchoredOverlay'
 import {BookIcon} from '@primer/octicons-react'
 import {implementsClassName} from '../utils/testing'
 import classes from './ActionList.module.css'
@@ -385,4 +386,49 @@ describe('ActionList.Item', () => {
     expect(tabs[0].nodeType).toBe(Node.ELEMENT_NODE)
     expect(tabs).toHaveLength(3)
   })
+
+  it('should preserve consumer ref when tooltip wraps trigger', async () => {
+    const user = userEvent.setup()
+
+    function TestComponent() {
+      const anchorRef = React.useRef<HTMLLIElement>(null)
+      const [open, setOpen] = React.useState(false)
+      return (
+        <>
+          <ActionList aria-label="Actions">
+            <ActionList.Item
+              ref={anchorRef}
+              onSelect={() => {
+                setOpen(!open)
+              }}
+            >
+              Convert to issue
+              <ActionList.Description truncate>
+                This description gets truncated because it is inline with truncation
+              </ActionList.Description>
+            </ActionList.Item>
+          </ActionList>
+          <AnchoredOverlay open={open} renderAnchor={null} anchorRef={anchorRef} onClose={() => setOpen(false)}>
+            <ActionList role="menu" aria-label="Convert to issue menu">
+              <ActionList.Item role="menuitem">Choose repository</ActionList.Item>
+              <ActionList.Item role="menuitem">Create issue</ActionList.Item>
+            </ActionList>
+          </AnchoredOverlay>
+        </>
+      )
+    }
+
+    const {getByText, queryByRole} = HTMLRender(<TestComponent />)
+
+    // Overlay should not be visible initially
+    expect(queryByRole('menu')).not.toBeInTheDocument()
+
+    // Click the item to open the anchored overlay
+    await user.click(getByText('Convert to issue'))
+
+    // The overlay should open — this fails if Tooltip overwrites the consumer ref
+    await waitFor(() => {
+      expect(queryByRole('menu')).toBeInTheDocument()
+    })
+  })
 })