doc(react-tree): adds a11y edge cases to the docs (#28897)

bsunderhus · web-flow · commit c1cd6eba9a26 · 2023-08-17T12:16:43.000Z
diff --git a/packages/react-components/react-tree/stories/Tree/TreeA11y.md b/packages/react-components/react-tree/stories/Tree/TreeA11y.md
@@ -0,0 +1,38 @@
+<details>
+<summary>
+Accessibility edge cases scenarios
+</summary>
+
+Here are some accessibility edge cases scenarios we identified and users should keep in mind while using the `Tree` components.
+
+NVDA
+
+1. [Single select tree - narration of grouping #15290](https://github.com/nvaccess/nvda/issues/15290)
+2. [Single select tree - narration aria-selected makes verbosity with redundant "selected" #15289](https://github.com/nvaccess/nvda/issues/15289)
+
+VoiceOver/Chromium
+
+1. [Issue 1273540: Tree as table in Mac > VoiceOver narrates " 0 items enclosed " when user navigates to expaded treeitem](https://bugs.chromium.org/p/chromium/issues/detail?id=1273540)
+2. [Issue 1273544: Tree as table in Mac > VoiceOver doesn't narrate aria-labelledby element on treeitem](https://bugs.chromium.org/p/chromium/issues/detail?id=1273544)
+3. [Issue 1377818: Tree - Treeitem - Accessibility name received from content includes the aria-hidden button name](https://bugs.chromium.org/p/chromium/issues/detail?id=1377818)
+
+VoiceOver
+
+1. [Bug 8223307](https://office.visualstudio.com/APEX/_workitems/edit/8223307): VoiceOver doesn't narrate level of tree
+2. [Bug 8223375](https://office.visualstudio.com/APEX/_workitems/edit/8223375): VoiceOver doesn't list tree/table in the rotor
+   iOS
+3. [Bug 8232232](https://office.visualstudio.com/APEX/_workitems/edit/8232232): iOS : VoiceOver - Select tree with checkboxes - no narration of ticket/unticked state
+
+JAWS
+
+1. [Treeview - JAWS doesn't narrate position for each tree item #338](https://github.com/FreedomScientific/standards-support/issues/338)
+2. [JAWS doesn't narrated "toolbar" keyword in navigable treeitem with actions buttons #747
+   ](https://github.com/FreedomScientific/standards-support/issues/747)
+
+Narrator
+
+1. [Bug 45975192](https://microsoft.visualstudio.com/OS/_workitems/edit/45975192): Single select tree - narration aria-selected makes verbosity with redundant "selected"
+2. [Bug 46020629](https://microsoft.visualstudio.com/OS/_workitems/edit/46020629): Select tree with checkboxes - no narration of checked state
+3. [Bug 46020726](https://microsoft.visualstudio.com/OS/_workitems/edit/46020726): Select tree with checkboxes - no able to toggle check state with space in scan mode
+
+</details>
diff --git a/packages/react-components/react-tree/stories/Tree/index.stories.tsx b/packages/react-components/react-tree/stories/Tree/index.stories.tsx
@@ -2,6 +2,7 @@ import { Tree, TreeItem, TreeItemLayout, TreeItemPersonaLayout, FlatTree } from
 
 import descriptionMd from './TreeDescription.md';
 import bestPracticesMd from './TreeBestPractices.md';
+import a11yMd from './TreeA11y.md';
 
 // VISUAL EXAMPLES
 export { Default } from './TreeDefault.stories';
@@ -34,7 +35,7 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: [descriptionMd, bestPracticesMd].join('\n'),
+        component: [descriptionMd, bestPracticesMd, a11yMd].join('\n'),
       },
     },
   },
