chore(splitButton, tree): Accessibility improvements

CHANGELOG.md

@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Show debug panel correctly for components with no owner @miroslavstastny ([#2055](https://github.com/stardust-ui/react/pull/2055))
 - Correctly handle empty key actions in RTL @miroslavstastny ([#2060](https://github.com/stardust-ui/react/pull/2060))
+- Accessibility improvements for `tree` and `splitButton` @kolaps33 ([#2032](https://github.com/stardust-ui/react/pull/2032))
 
 ### Features
 - Add `menu` prop on `ToolbarMenuItem` component @mnajdova ([#1984](https://github.com/stardust-ui/react/pull/1984))

docs/src/examples/components/HierarchicalTree/Types/HierarchicalTreeTitleCustomizationExample.shorthand.tsx

@@ -38,7 +38,7 @@ const titleRenderer = (Component, { content, open, hasSubtree, ...restProps }) =
 )
 
 const TreeTitleCustomizationExample = () => (
-  <HierarchicalTree items={items} renderItemTitle={titleRenderer} />
+  <HierarchicalTree aria-label="Custom Title" items={items} renderItemTitle={titleRenderer} />
 )
 
 export default TreeTitleCustomizationExample

docs/src/examples/components/SplitButton/Slots/SplitButtonIconAndContentExample.shorthand.tsx

@@ -26,7 +26,23 @@ const items = [
 ]
 
 const SplitButtonIconAndContentExampleShorthand = () => (
-  <SplitButton menu={items} button={items[0]} />
+  <>
+    <SplitButton
+      menu={items}
+      button={{
+        content: items[0].content,
+        key: items[0].key,
+        icon: items[0].icon,
+        'aria-roledescription': 'splitbutton',
+        'aria-describedby': 'instruction-message-icon-content',
+      }}
+      onMainButtonClick={() => alert('button was clicked')}
+      toggleButton={{ 'aria-label': 'more options' }}
+    />
+    <span aria-hidden="true" id="instruction-message-icon-content" style={{ opacity: 0 }}>
+      to open menu, press Alt + Arrow Down
+    </span>
+  </>
 )
 
 export default SplitButtonIconAndContentExampleShorthand

docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx

@@ -6,15 +6,28 @@ const SplitButtonExampleToggleButtonShorthand = () => {
   const [open, setOpen] = useBooleanKnob({ name: 'open' })
 
   return (
-    <SplitButton
-      menu={[
-        { key: 'group', content: 'New group message' },
-        { key: 'channel', content: 'New channel message' },
-      ]}
-      button="New conversation"
-      toggleButton={{ icon: open ? 'triangle-up' : 'triangle-down' }}
-      onOpenChange={(e, { open }) => setOpen(open)}
-    />
+    <>
+      <SplitButton
+        menu={[
+          { key: 'group', content: 'New group message' },
+          { key: 'channel', content: 'New channel message' },
+        ]}
+        button={{
+          content: 'New conversation',
+          'aria-roledescription': 'splitbutton',
+          'aria-describedby': 'instruction-message-icon',
+        }}
+        toggleButton={{
+          icon: open ? 'triangle-up' : 'triangle-down',
+          'aria-label': 'more options',
+        }}
+        onOpenChange={(e, { open }) => setOpen(open)}
+        onMainButtonClick={() => alert('button was clicked')}
+      />
+      <span aria-hidden="true" id="instruction-message-icon" style={{ opacity: 0 }}>
+        to open menu, press Alt + Arrow Down
+      </span>
+    </>
   )
 }
 

docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx

@@ -2,13 +2,24 @@ import * as React from 'react'
 import { SplitButton } from '@stardust-ui/react'
 
 const SplitButtonExampleShorthand = () => (
-  <SplitButton
-    menu={[
-      { key: 'group', content: 'New group message' },
-      { key: 'channel', content: 'New channel message' },
-    ]}
-    button="New conversation"
-  />
+  <>
+    <SplitButton
+      menu={[
+        { key: 'group', content: 'New group message' },
+        { key: 'channel', content: 'New channel message' },
+      ]}
+      button={{
+        content: 'New conversation',
+        'aria-roledescription': 'splitbutton',
+        'aria-describedby': 'instruction-message',
+      }}
+      toggleButton={{ 'aria-label': 'more options' }}
+      onMainButtonClick={() => alert('button was clicked')}
+    />
+    <span aria-hidden="true" id="instruction-message" style={{ opacity: 0 }}>
+      to open menu, press Alt + Arrow Down
+    </span>
+  </>
 )
 
 export default SplitButtonExampleShorthand

docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx

@@ -2,14 +2,25 @@ import * as React from 'react'
 import { SplitButton } from '@stardust-ui/react'
 
 const SplitButtonExamplePrimaryShorthand = () => (
-  <SplitButton
-    menu={[
-      { key: 'group', content: 'New group message' },
-      { key: 'channel', content: 'New channel message' },
-    ]}
-    button="New conversation"
-    primary
-  />
+  <>
+    <SplitButton
+      menu={[
+        { key: 'group', content: 'New group message' },
+        { key: 'channel', content: 'New channel message' },
+      ]}
+      button={{
+        content: 'New conversation',
+        'aria-roledescription': 'splitbutton',
+        'aria-describedby': 'instruction-message-primary-button',
+      }}
+      primary
+      toggleButton={{ 'aria-label': 'more options' }}
+      onMainButtonClick={() => alert('button was clicked')}
+    />
+    <span aria-hidden="true" id="instruction-message-primary-button" style={{ opacity: 0 }}>
+      to open menu, press Alt + Arrow Down
+    </span>
+  </>
 )
 
 export default SplitButtonExamplePrimaryShorthand

docs/src/examples/components/Tree/Types/TreeExample.shorthand.tsx

@@ -70,6 +70,6 @@ const items = [
   },
 ]
 
-const TreeExampleShorthand = () => <Tree items={items} />
+const TreeExampleShorthand = () => <Tree aria-label="default" items={items} />
 
 export default TreeExampleShorthand

docs/src/examples/components/Tree/Types/TreeExclusiveExample.shorthand.tsx

@@ -40,6 +40,6 @@ const items = [
   },
 ]
 
-const TreeExclusiveExample = () => <Tree items={items} exclusive />
+const TreeExclusiveExample = () => <Tree aria-label="exclusive" items={items} exclusive />
 
 export default TreeExclusiveExample

docs/src/examples/components/Tree/Usage/TreeAsListExample.shorthand.tsx

@@ -70,6 +70,12 @@ const items = [
   },
 ]
 
-const TreeAsListExampleShorthand = () => <Tree items={items} accessibility={treeAsListBehavior} />
+const TreeAsListExampleShorthand = () => (
+  <Tree
+    items={items}
+    aria-label="Tree with list accessibility roles"
+    accessibility={treeAsListBehavior}
+  />
+)
 
 export default TreeAsListExampleShorthand

docs/src/examples/components/Tree/Usage/TreeInitiallyOpenExample.shorthand.tsx

@@ -71,7 +71,7 @@ const items = [
 ]
 
 const TreeInitiallyOpenExampleShorthand = () => (
-  <Tree items={items} defaultActiveItemIds={['1', '12', '2']} />
+  <Tree items={items} aria-label="Initially open" defaultActiveItemIds={['1', '12', '2']} />
 )
 
 export default TreeInitiallyOpenExampleShorthand

docs/src/examples/components/Tree/Usage/TreeTitleCustomizationExample.shorthand.tsx

@@ -37,6 +37,8 @@ const titleRenderer = (Component, { content, open, hasSubtree, ...restProps }) =
   </Component>
 )
 
-const TreeTitleCustomizationExample = () => <Tree items={items} renderItemTitle={titleRenderer} />
+const TreeTitleCustomizationExample = () => (
+  <Tree aria-label="Custom title" items={items} renderItemTitle={titleRenderer} />
+)
 
 export default TreeTitleCustomizationExample

packages/accessibility/src/behaviors/SplitButton/splitButtonBehavior.ts

@@ -7,6 +7,7 @@ import menuButtonBehavior from '../MenuButton/menuButtonBehavior'
 /**
  * @specification
  * Adds attribute 'tabIndex=-1' to 'toggleButton' slot.
+ * Adds attribute 'aria-haspopup=true' to 'toggleButton' slot.
  */
 const splitButtonBehavior: Accessibility = props => {
   const splitButtonMenuButtonBehavior = props => {
@@ -36,6 +37,7 @@ const splitButtonBehavior: Accessibility = props => {
       root: {},
       toggleButton: {
         tabIndex: -1,
+        'aria-haspopup': true,
       },
     },
     childBehaviors: {

packages/accessibility/src/behaviors/Tree/treeBehavior.ts

@@ -7,6 +7,7 @@ import treeItemBehavior from './treeItemBehavior'
 /**
  * @specification
  * Adds role 'tree' to 'root' slot.
+ * Adds attribute 'tabIndex=-1' to 'root' slot.
  * Adds attribute 'aria-labelledby' based on the property 'aria-labelledby' to 'root' slot.
  * Embeds component into FocusZone.
  * Provides arrow key navigation in vertical direction.
@@ -18,6 +19,7 @@ const treeBehavior: Accessibility<TreeBehaviorProps> = props => {
       root: {
         role: 'tree',
         'aria-labelledby': props['aria-labelledby'],
+        tabIndex: -1,
       },
     },
     keyActions: {