Merge a437190 into 9b63299

primer · May 21, 2024 · 6c85cb8 · 6c85cb8
2 parents 9b63299 + a437190
commit 6c85cb8
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/.changeset/hungry-rockets-smell.md b/.changeset/hungry-rockets-smell.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add custom aria label to TreeView.Item
diff --git a/packages/react/src/TreeView/TreeView.test.tsx b/packages/react/src/TreeView/TreeView.test.tsx
@@ -47,6 +47,30 @@ describe('Markup', () => {
     expect(items).toHaveLength(3)
   })
 
+  it('uses treeitem aria label', () => {
+    const {queryAllByRole} = renderWithTheme(
+      <>
+        <TreeView>
+          <TreeView.Item id="item-1" aria-label="Test tree item 1">
+            Item 1
+          </TreeView.Item>
+          <TreeView.Item id="item-2" aria-labelledby="test-description">
+            Item 2
+          </TreeView.Item>
+          <TreeView.Item id="item-2">Item 3</TreeView.Item>
+        </TreeView>
+        <span id="test-description">Tree item 2 description</span>
+      </>,
+    )
+
+    const items = queryAllByRole('treeitem')
+    expect(items).toHaveLength(3)
+    expect(items[0]).toHaveAccessibleName('Test tree item 1')
+    expect(items[1]).toHaveAccessibleName('Tree item 2 description')
+    expect(items[2]).toHaveAttribute('aria-labelledby')
+    expect(items[2]).toHaveAccessibleName('Item 3')
+  })
+
   it('hides subtrees by default', () => {
     const {queryByRole} = renderWithTheme(
       <TreeView aria-label="Test tree">

diff --git a/packages/react/src/TreeView/TreeView.tsx b/packages/react/src/TreeView/TreeView.tsx
@@ -352,6 +352,8 @@ Root.displayName = 'TreeView'
 // TreeView.Item
 
 export type TreeViewItemProps = {
+  'aria-label'?: React.AriaAttributes['aria-label']
+  'aria-labelledby'?: React.AriaAttributes['aria-labelledby']
   id: string
   children: React.ReactNode
   containIntrinsicSize?: string
@@ -375,6 +377,8 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
       onSelect,
       children,
       className,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
     },
     ref,
   ) => {
@@ -472,7 +476,8 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
           tabIndex={0}
           id={itemId}
           role="treeitem"
-          aria-labelledby={labelId}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabel ? undefined : ariaLabelledby || labelId}
           aria-describedby={`${leadingVisualId} ${trailingVisualId}`}
           aria-level={level}
           aria-expanded={isSubTreeEmpty ? undefined : isExpanded}