1518 react treeview feedback from screen reader

.changeset/rotten-hairs-impress.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+TreeView: aria status description is now accurate

src/TreeView/TreeView.features.stories.tsx

@@ -609,6 +609,84 @@ export const EmptyDirectories: Story = () => {
   )
 }
 
+export const NestedTrees: Story = () => {
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [asyncItems, setAsyncItems] = React.useState<string[]>([])
+
+  let state: SubTreeState = 'initial'
+
+  if (isLoading) {
+    state = 'loading'
+  } else if (asyncItems.length > 0) {
+    state = 'done'
+  }
+
+  return (
+    <nav aria-label="Files">
+      <TreeView aria-label="Files">
+        <TreeView.Item id="file-1">
+          <TreeView.LeadingVisual>
+            <FileIcon />
+          </TreeView.LeadingVisual>
+          Some file
+        </TreeView.Item>
+        <TreeView.Item
+          id="async-directory"
+          onExpandedChange={async isExpanded => {
+            if (asyncItems.length === 0 && isExpanded) {
+              setIsLoading(true)
+
+              // Load items
+              const items = await loadItems(1000)
+
+              setIsLoading(false)
+              setAsyncItems(items)
+            }
+          }}
+        >
+          <TreeView.LeadingVisual>
+            <TreeView.DirectoryIcon />
+          </TreeView.LeadingVisual>
+          Directory with async items
+          <TreeView.SubTree state={state}>
+            {asyncItems.map(item => (
+              <TreeView.Item id={`item-${item}`} key={item}>
+                <TreeView.LeadingVisual>
+                  <FileIcon />
+                </TreeView.LeadingVisual>
+                {item}
+              </TreeView.Item>
+            ))}
+            <TreeView.Item id="nested-directory">
+              Nested Sub-tree
+              <TreeView.SubTree state="done">
+                <TreeView.Item id="nested-directory/file-1">
+                  <TreeView.LeadingVisual>
+                    <FileIcon />
+                  </TreeView.LeadingVisual>
+                  Some file
+                </TreeView.Item>
+                <TreeView.Item id="nested-directory/another-file">
+                  <TreeView.LeadingVisual>
+                    <FileIcon />
+                  </TreeView.LeadingVisual>
+                  Another file
+                </TreeView.Item>
+              </TreeView.SubTree>
+            </TreeView.Item>
+          </TreeView.SubTree>
+        </TreeView.Item>
+        <TreeView.Item id="another-file">
+          <TreeView.LeadingVisual>
+            <FileIcon />
+          </TreeView.LeadingVisual>
+          Another file
+        </TreeView.Item>
+      </TreeView>
+    </nav>
+  )
+}
+
 export const NestedScrollContainer: Story = () => {
   return (
     <Box sx={{maxHeight: '50vh', overflow: 'auto'}}>

src/TreeView/TreeView.test.tsx

@@ -1077,7 +1077,14 @@ describe('Asyncronous loading', () => {
             <TreeView.Item id="parent" defaultExpanded>
               Parent
               <TreeView.SubTree state={state}>
-                <TreeView.Item id="child">Child</TreeView.Item>
+                <TreeView.Item id="child-item">Child Item</TreeView.Item>
+                <TreeView.Item id="child-subtree">
+                  Child Subtree
+                  <TreeView.SubTree state={'done'}>
+                    <TreeView.Item id="child-subtree-1">Child 1</TreeView.Item>
+                    <TreeView.Item id="child-subtree-2">Child 2</TreeView.Item>
+                  </TreeView.SubTree>
+                </TreeView.Item>
               </TreeView.SubTree>
             </TreeView.Item>
           </TreeView>
@@ -1100,6 +1107,7 @@ describe('Asyncronous loading', () => {
     })
 
     // Live region should be updated
+    expect(liveRegion).not.toHaveTextContent('Child 2 is empty')
     expect(liveRegion).toHaveTextContent('Parent content loaded')
   })
 

src/TreeView/TreeView.tsx

@@ -75,7 +75,7 @@ const UlBox = styled.ul<SxProp>`
    * We define styles for the tree items at the root level of the tree
    * to avoid recomputing the styles for each item when the tree updates.
    * We're sacraficing maintainability for performance because TreeView
-   * needs to be performant enough to handle large trees (thousands of items). 
+   * needs to be performant enough to handle large trees (thousands of items).
    *
    * This is intended to be a temporary solution until we can improve the
    * performance of our styling patterns.
@@ -508,6 +508,13 @@ const SubTree: React.FC<TreeViewSubTreeProps> = ({count, state, children}) => {
   const {safeSetTimeout} = useSafeTimeout()
   const loadingItemRef = React.useRef<HTMLElement>(null)
   const ref = React.useRef<HTMLElement>(null)
+  const [isPending, setPending] = React.useState(state === 'loading')
+
+  React.useEffect(() => {
+    if (state === 'loading') {
+      setPending(true)
+    }
+  }, [state])
 
   React.useEffect(() => {
     // If `state` is undefined, we're working in a synchronous context and need
@@ -523,9 +530,11 @@ const SubTree: React.FC<TreeViewSubTreeProps> = ({count, state, children}) => {
     }
   }, [state, isSubTreeEmpty, setIsSubTreeEmpty, children])
 
-  // Announce when content has loaded
+  // If a consumer sets state="done" without having a previous state (like `loading`),
+  // then it would announce on the first render. Using isPending is to only
+  // announce being "loaded" when the state has changed from `loading` --> `done`.
   React.useEffect(() => {
-    if (state === 'done') {
+    if (isPending && state === 'done') {
       const parentItem = document.getElementById(itemId)
 
       if (!parentItem) return
@@ -540,8 +549,10 @@ const SubTree: React.FC<TreeViewSubTreeProps> = ({count, state, children}) => {
           announceUpdate(`${parentName} is empty`)
         }
       })
+
+      setPending(false)
     }
-  }, [state, itemId, announceUpdate, safeSetTimeout])
+  }, [state, itemId, announceUpdate, safeSetTimeout, isPending])
 
   // Manage loading indicator state
   React.useEffect(() => {