From 2acba682db2b7f46f87136e7c52028c557d6ddcc Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Thu, 24 Oct 2024 18:39:35 -0400
Subject: [PATCH 1/2] Add `aria-label` to `TreeView` subtree

---
 packages/react/src/TreeView/TreeView.docs.json            | 5 +++++
 packages/react/src/TreeView/TreeView.features.stories.tsx | 4 ++--
 packages/react/src/TreeView/TreeView.tsx                  | 4 +++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/TreeView/TreeView.docs.json b/packages/react/src/TreeView/TreeView.docs.json
index fb8d83893ef..2591782a9c6 100644
--- a/packages/react/src/TreeView/TreeView.docs.json
+++ b/packages/react/src/TreeView/TreeView.docs.json
@@ -135,6 +135,11 @@
           "name": "count",
           "type": "number",
           "description": "The number of items expected to be in the subtree. When in the loading state, the subtree will render a skeleton loading placeholder with the specified count of items"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "An accessible name for the subtree. It is recommended that you provide a short version of the parent list item's name as the name of the subtree."
         }
       ]
     },
diff --git a/packages/react/src/TreeView/TreeView.features.stories.tsx b/packages/react/src/TreeView/TreeView.features.stories.tsx
index b4d9a8181b4..0f3fc3308d5 100644
--- a/packages/react/src/TreeView/TreeView.features.stories.tsx
+++ b/packages/react/src/TreeView/TreeView.features.stories.tsx
@@ -661,7 +661,7 @@ export const NestedTrees: StoryFn = () => {
             <TreeView.DirectoryIcon />
           </TreeView.LeadingVisual>
           Directory with async items
-          <TreeView.SubTree state={state}>
+          <TreeView.SubTree state={state} aria-label="With async items">
             {asyncItems.map(item => (
               <TreeView.Item id={`item-${item}`} key={item}>
                 <TreeView.LeadingVisual>
@@ -672,7 +672,7 @@ export const NestedTrees: StoryFn = () => {
             ))}
             <TreeView.Item id="nested-directory">
               Nested Sub-tree
-              <TreeView.SubTree state="done">
+              <TreeView.SubTree state="done" aria-label="Nested">
                 <TreeView.Item id="nested-directory/file-1">
                   <TreeView.LeadingVisual>
                     <FileIcon />
diff --git a/packages/react/src/TreeView/TreeView.tsx b/packages/react/src/TreeView/TreeView.tsx
index b891aa97a74..cbbe2a3154d 100644
--- a/packages/react/src/TreeView/TreeView.tsx
+++ b/packages/react/src/TreeView/TreeView.tsx
@@ -589,9 +589,10 @@ export type TreeViewSubTreeProps = {
    * Display a skeleton loading state with the specified count of items
    */
   count?: number
+  'aria-label'?: string
 }
 
-const SubTree: React.FC<TreeViewSubTreeProps> = ({count, state, children}) => {
+const SubTree: React.FC<TreeViewSubTreeProps> = ({count, state, children, 'aria-label': ariaLabel}) => {
   const {announceUpdate} = React.useContext(RootContext)
   const {itemId, isExpanded, isSubTreeEmpty, setIsSubTreeEmpty} = React.useContext(ItemContext)
   const loadingItemRef = React.useRef<HTMLElement>(null)
@@ -695,6 +696,7 @@ const SubTree: React.FC<TreeViewSubTreeProps> = ({count, state, children}) => {
       }}
       // @ts-ignore Box doesn't have type support for `ref` used in combination with `as`
       ref={ref}
+      aria-label={ariaLabel}
     >
       {state === 'loading' ? <LoadingItem ref={loadingItemRef} count={count} /> : children}
     </ul>

From a60429a9b0ac924bd3c5cdbf736c9b2f42a2bebc Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Thu, 24 Oct 2024 19:12:19 -0400
Subject: [PATCH 2/2] Add changeset

---
 .changeset/ten-mirrors-refuse.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/ten-mirrors-refuse.md

diff --git a/.changeset/ten-mirrors-refuse.md b/.changeset/ten-mirrors-refuse.md
new file mode 100644
index 00000000000..afb2da1853a
--- /dev/null
+++ b/.changeset/ten-mirrors-refuse.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+TreeView: Adds `aria-label` prop to `TreeView.Subtree`