From 8e2c82d17e5ea512698baadb4a0b3c7f93e4acca Mon Sep 17 00:00:00 2001
From: Stephanie Hong <41085564+JelloBagel@users.noreply.github.com>
Date: Tue, 21 May 2024 21:34:14 +0000
Subject: [PATCH] Add custom aria label to TreeView.Item

---
 packages/react/src/TreeView/TreeView.test.tsx | 24 +++++++++++++++++++
 packages/react/src/TreeView/TreeView.tsx      |  7 +++++-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/TreeView/TreeView.test.tsx b/packages/react/src/TreeView/TreeView.test.tsx
index ff48cbde3b6..3dc535270fa 100644
--- 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
index 06aa13321c6..51d970d444a 100644
--- 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}