diff --git a/CHANGELOG.md b/CHANGELOG.md
index 07fa62df5e..748ff84c62 100644
--- a/CHANGELOG.md
+++ b/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))
diff --git a/docs/src/examples/components/HierarchicalTree/Types/HierarchicalTreeTitleCustomizationExample.shorthand.tsx b/docs/src/examples/components/HierarchicalTree/Types/HierarchicalTreeTitleCustomizationExample.shorthand.tsx
index dbec2a16cc..bbe985b1e2 100644
--- a/docs/src/examples/components/HierarchicalTree/Types/HierarchicalTreeTitleCustomizationExample.shorthand.tsx
+++ b/docs/src/examples/components/HierarchicalTree/Types/HierarchicalTreeTitleCustomizationExample.shorthand.tsx
@@ -38,7 +38,7 @@ const titleRenderer = (Component, { content, open, hasSubtree, ...restProps }) =
)
const TreeTitleCustomizationExample = () => (
-
+
)
export default TreeTitleCustomizationExample
diff --git a/docs/src/examples/components/SplitButton/Slots/SplitButtonIconAndContentExample.shorthand.tsx b/docs/src/examples/components/SplitButton/Slots/SplitButtonIconAndContentExample.shorthand.tsx
index e467e46ca8..c62f4110ba 100644
--- a/docs/src/examples/components/SplitButton/Slots/SplitButtonIconAndContentExample.shorthand.tsx
+++ b/docs/src/examples/components/SplitButton/Slots/SplitButtonIconAndContentExample.shorthand.tsx
@@ -26,7 +26,23 @@ const items = [
]
const SplitButtonIconAndContentExampleShorthand = () => (
-
+ <>
+ alert('button was clicked')}
+ toggleButton={{ 'aria-label': 'more options' }}
+ />
+
+ to open menu, press Alt + Arrow Down
+
+ >
)
export default SplitButtonIconAndContentExampleShorthand
diff --git a/docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx b/docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx
index b06d465d66..ece31db5b9 100644
--- a/docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx
+++ b/docs/src/examples/components/SplitButton/Slots/SplitButtonToggleButtonExample.shorthand.tsx
@@ -6,15 +6,28 @@ const SplitButtonExampleToggleButtonShorthand = () => {
const [open, setOpen] = useBooleanKnob({ name: 'open' })
return (
- setOpen(open)}
- />
+ <>
+ setOpen(open)}
+ onMainButtonClick={() => alert('button was clicked')}
+ />
+
+ to open menu, press Alt + Arrow Down
+
+ >
)
}
diff --git a/docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx b/docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx
index 600b1201a2..332cc631f2 100644
--- a/docs/src/examples/components/SplitButton/Types/SplitButtonExample.shorthand.tsx
+++ b/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 = () => (
-
+ <>
+ alert('button was clicked')}
+ />
+
+ to open menu, press Alt + Arrow Down
+
+ >
)
export default SplitButtonExampleShorthand
diff --git a/docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx b/docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx
index 30097d1b6f..ca6159f095 100644
--- a/docs/src/examples/components/SplitButton/Types/SplitButtonExamplePrimary.shorthand.tsx
+++ b/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 = () => (
-
+ <>
+ alert('button was clicked')}
+ />
+
+ to open menu, press Alt + Arrow Down
+
+ >
)
export default SplitButtonExamplePrimaryShorthand
diff --git a/docs/src/examples/components/Tree/Types/TreeExample.shorthand.tsx b/docs/src/examples/components/Tree/Types/TreeExample.shorthand.tsx
index f226402d91..643305f208 100644
--- a/docs/src/examples/components/Tree/Types/TreeExample.shorthand.tsx
+++ b/docs/src/examples/components/Tree/Types/TreeExample.shorthand.tsx
@@ -70,6 +70,6 @@ const items = [
},
]
-const TreeExampleShorthand = () =>
+const TreeExampleShorthand = () =>
export default TreeExampleShorthand
diff --git a/docs/src/examples/components/Tree/Types/TreeExclusiveExample.shorthand.tsx b/docs/src/examples/components/Tree/Types/TreeExclusiveExample.shorthand.tsx
index ea4aa22d90..c0a9b49088 100644
--- a/docs/src/examples/components/Tree/Types/TreeExclusiveExample.shorthand.tsx
+++ b/docs/src/examples/components/Tree/Types/TreeExclusiveExample.shorthand.tsx
@@ -40,6 +40,6 @@ const items = [
},
]
-const TreeExclusiveExample = () =>
+const TreeExclusiveExample = () =>
export default TreeExclusiveExample
diff --git a/docs/src/examples/components/Tree/Usage/TreeAsListExample.shorthand.tsx b/docs/src/examples/components/Tree/Usage/TreeAsListExample.shorthand.tsx
index 838bea0bbb..d1d1986926 100644
--- a/docs/src/examples/components/Tree/Usage/TreeAsListExample.shorthand.tsx
+++ b/docs/src/examples/components/Tree/Usage/TreeAsListExample.shorthand.tsx
@@ -70,6 +70,12 @@ const items = [
},
]
-const TreeAsListExampleShorthand = () =>
+const TreeAsListExampleShorthand = () => (
+
+)
export default TreeAsListExampleShorthand
diff --git a/docs/src/examples/components/Tree/Usage/TreeInitiallyOpenExample.shorthand.tsx b/docs/src/examples/components/Tree/Usage/TreeInitiallyOpenExample.shorthand.tsx
index 008855f042..ab7b693312 100644
--- a/docs/src/examples/components/Tree/Usage/TreeInitiallyOpenExample.shorthand.tsx
+++ b/docs/src/examples/components/Tree/Usage/TreeInitiallyOpenExample.shorthand.tsx
@@ -71,7 +71,7 @@ const items = [
]
const TreeInitiallyOpenExampleShorthand = () => (
-
+
)
export default TreeInitiallyOpenExampleShorthand
diff --git a/docs/src/examples/components/Tree/Usage/TreeTitleCustomizationExample.shorthand.tsx b/docs/src/examples/components/Tree/Usage/TreeTitleCustomizationExample.shorthand.tsx
index cc60148785..e452c7df57 100644
--- a/docs/src/examples/components/Tree/Usage/TreeTitleCustomizationExample.shorthand.tsx
+++ b/docs/src/examples/components/Tree/Usage/TreeTitleCustomizationExample.shorthand.tsx
@@ -37,6 +37,8 @@ const titleRenderer = (Component, { content, open, hasSubtree, ...restProps }) =
)
-const TreeTitleCustomizationExample = () =>
+const TreeTitleCustomizationExample = () => (
+
+)
export default TreeTitleCustomizationExample
diff --git a/packages/accessibility/src/behaviors/SplitButton/splitButtonBehavior.ts b/packages/accessibility/src/behaviors/SplitButton/splitButtonBehavior.ts
index 95165c8398..31ee57bca1 100644
--- a/packages/accessibility/src/behaviors/SplitButton/splitButtonBehavior.ts
+++ b/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: {
diff --git a/packages/accessibility/src/behaviors/Tree/treeBehavior.ts b/packages/accessibility/src/behaviors/Tree/treeBehavior.ts
index ec7f3366fc..d8b8d283fa 100644
--- a/packages/accessibility/src/behaviors/Tree/treeBehavior.ts
+++ b/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 = props => {
root: {
role: 'tree',
'aria-labelledby': props['aria-labelledby'],
+ tabIndex: -1,
},
},
keyActions: {