diff --git a/.changeset/lovely-days-march.md b/.changeset/lovely-days-march.md
new file mode 100644
index 00000000000..743c7bf5882
--- /dev/null
+++ b/.changeset/lovely-days-march.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+ActionList: Adds `aria-labelledby` to `ActionList.TrailingVisual`, making it part of the accessible name of `ActionList.Item`
diff --git a/packages/react/src/ActionList/ActionList.features.stories.tsx b/packages/react/src/ActionList/ActionList.features.stories.tsx
index 42f50eac08e..e2beee85f9e 100644
--- a/packages/react/src/ActionList/ActionList.features.stories.tsx
+++ b/packages/react/src/ActionList/ActionList.features.stories.tsx
@@ -11,6 +11,7 @@ import Box from '../Box'
import Label from '../Label'
import Heading from '../Heading'
import {AnchoredOverlay} from '../AnchoredOverlay'
+import CounterLabel from '../CounterLabel'
import {
EyeIcon,
BookIcon,
@@ -25,6 +26,9 @@ import {
PeopleIcon,
FileDirectoryIcon,
PlusCircleIcon,
+ GitPullRequestIcon,
+ IssueOpenedIcon,
+ ProjectIcon,
LinkExternalIcon,
} from '@primer/octicons-react'
import {FeatureFlags} from '../FeatureFlags'
@@ -726,6 +730,38 @@ export const GroupWithFilledTitle = () => {
)
}
+export const WithCustomTrailingVisuals = () => (
+
+
+
+
+
+ Issues
+
+ 20
+
+
+
+
+
+
+ PRs
+
+ 12
+
+
+
+
+
+
+ Projects
+
+ 2
+
+
+
+)
+
export const ActionListWithButtonSemantics = () => {
return (
diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
index 6894a2f7132..03e6764148f 100644
--- a/packages/react/src/ActionList/Item.tsx
+++ b/packages/react/src/ActionList/Item.tsx
@@ -261,6 +261,7 @@ export const Item = React.forwardRef(
const labelId = `${itemId}--label`
const inlineDescriptionId = `${itemId}--inline-description`
const blockDescriptionId = `${itemId}--block-description`
+ const trailingVisualId = `${itemId}--trailing-visual`
const inactiveWarningId = inactive && !showInactiveIndicator ? `${itemId}--warning-message` : undefined
const ButtonItemWrapper = React.forwardRef(({as: Component = 'button', children, ...props}, forwardedRef) => {
@@ -294,10 +295,14 @@ export const Item = React.forwardRef(
'data-inactive': inactive ? true : undefined,
'data-loading': loading && !inactive ? true : undefined,
tabIndex: disabled || showInactiveIndicator ? undefined : 0,
- 'aria-labelledby': `${labelId} ${slots.inlineDescription ? inlineDescriptionId : ''}`,
- 'aria-describedby': slots.blockDescription
- ? [blockDescriptionId, inactiveWarningId].join(' ')
- : inactiveWarningId,
+ 'aria-labelledby': `${labelId} ${slots.trailingVisual ? trailingVisualId : ''} ${
+ slots.inlineDescription ? inlineDescriptionId : ''
+ }`,
+ 'aria-describedby':
+ [slots.blockDescription ? blockDescriptionId : undefined, inactiveWarningId ?? undefined]
+ .filter(String)
+ .join(' ')
+ .trim() || undefined,
...(includeSelectionAttribute && {[itemSelectionAttribute]: selected}),
role: itemRole,
id: itemId,
@@ -327,7 +332,14 @@ export const Item = React.forwardRef(
return (
> = ({s
export type ActionListTrailingVisualProps = VisualProps
export const TrailingVisual: React.FC> = ({sx = {}, ...props}) => {
- const {variant, disabled, inactive} = React.useContext(ItemContext)
+ const {variant, disabled, inactive, trailingVisualId} = React.useContext(ItemContext)
return (
& {
inlineDescriptionId?: string
blockDescriptionId?: string
+ trailingVisualId?: string
inactive?: boolean
}
diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
index e271f9f9a53..dfae7671884 100644
--- a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -339,7 +339,7 @@ exports[`NavList renders a simple list 1`] = `
>