TreeView: Use roving tabIndex for focus management (#2443)

* Swap active descendant implementation for roving tabindex (wip) Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * Remove active descendant from loading focus logic * Remove active descendant code and fix build errors * Add typeahead * Update level indicator line logic * useActiveDescendant -> useRovingTabIndex * Remove unnecessary styles * Document ref props * Forward ref to LinkItem * Create wise-keys-drum.md * Remove active descendant from tests * Update toggle on enter Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
primer · Oct 18, 2022 · 3012fae · 3012fae
1 parent 38bb276
commit 3012fae
Show file tree

Hide file tree

Showing 6 changed files with 394 additions and 533 deletions.
diff --git a/.changeset/wise-keys-drum.md b/.changeset/wise-keys-drum.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+TreeView: Use roving tabindex instead of `aria-activedescendant` for improved VoiceOver support in Safari
diff --git a/docs/content/TreeView.mdx b/docs/content/TreeView.mdx
@@ -223,6 +223,7 @@ See [Storybook](https://primer.style/react/storybook?path=/story/components-tree
     name="onSelect"
     type="(event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void"
   />
+  <PropsTableRefRow refType="HTMLElement" />
   {/* <PropsTableSxRow /> */}
 </PropsTable>
 
@@ -267,13 +268,10 @@ See [Storybook](https://primer.style/react/storybook?path=/story/components-tree
     name="onSelect"
     type="(event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void"
   />
+  <PropsTableRefRow refType="HTMLElement" />
   {/* <PropsTableSxRow /> */}
 </PropsTable>
 
-### TreeView.LoadingItem
-
-<PropsTable>{/* <PropsTableSxRow /> */}</PropsTable>
-
 ### TreeView.SubTree
 
 <PropsTable>