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' }} + /> + + ) 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')} + /> + + ) } 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')} + /> + + ) 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')} + /> + + ) 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: {