From eb3e3dac62b6943769c870e844c9354017da7cba Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Fri, 1 Feb 2019 12:37:18 +0100 Subject: [PATCH 1/3] accessibility for menu divider --- src/components/Menu/MenuDivider.tsx | 20 +++++++++++++++++-- src/index.ts | 5 +++++ .../Behaviors/Menu/menuDividerBehavior.ts | 19 ++++++++++++++++++ src/lib/accessibility/index.ts | 1 + test/specs/behaviors/behavior-test.tsx | 2 ++ 5 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 src/lib/accessibility/Behaviors/Menu/menuDividerBehavior.ts diff --git a/src/components/Menu/MenuDivider.tsx b/src/components/Menu/MenuDivider.tsx index 60307b7488..e47aa98e96 100644 --- a/src/components/Menu/MenuDivider.tsx +++ b/src/components/Menu/MenuDivider.tsx @@ -1,5 +1,7 @@ import * as React from 'react' import * as PropTypes from 'prop-types' +import { Accessibility } from '../../lib/accessibility/types' +import { menuDividerBehavior } from '../../lib/accessibility' import { createShorthandFactory, @@ -11,6 +13,12 @@ import { import { ReactProps } from '../../../types/utils' export interface MenuDividerProps extends UIComponentProps, ColorComponentProps { + /** + * Accessibility behavior if overridden by the user. + * @default menuDividerBehavior + */ + accessibility?: Accessibility + vertical?: boolean primary?: boolean secondary?: boolean @@ -28,17 +36,25 @@ class MenuDivider extends UIComponent, any> { static defaultProps = { as: 'li', + accessibility: menuDividerBehavior as Accessibility, } static propTypes = { ...commonPropTypes.createCommon({ content: false, children: false, color: true }), + accessibility: PropTypes.func, primary: PropTypes.bool, secondary: PropTypes.bool, vertical: PropTypes.bool, } - renderComponent({ ElementType, classes, unhandledProps }) { - return + renderComponent({ ElementType, classes, unhandledProps, accessibility }) { + return ( + + ) } } diff --git a/src/index.ts b/src/index.ts index 01a701e930..64349642bf 100644 --- a/src/index.ts +++ b/src/index.ts @@ -134,6 +134,11 @@ export { default as Indicator, IndicatorProps } from './components/Indicator/Ind // Accessibility // export * from './lib/accessibility/types' +export { default as menuBehavior } from './lib/accessibility/Behaviors/Menu/menuBehavior' +export { default as menuItemBehavior } from './lib/accessibility/Behaviors/Menu/menuItemBehavior' +export { + default as menuDividerBehavior, +} from './lib/accessibility/Behaviors/Menu/menuDividerBehavior' export { default as tabBehavior } from './lib/accessibility/Behaviors/Tab/tabBehavior' export { default as tabListBehavior } from './lib/accessibility/Behaviors/Tab/tabListBehavior' export { default as toolbarBehavior } from './lib/accessibility/Behaviors/Toolbar/toolbarBehavior' diff --git a/src/lib/accessibility/Behaviors/Menu/menuDividerBehavior.ts b/src/lib/accessibility/Behaviors/Menu/menuDividerBehavior.ts new file mode 100644 index 0000000000..0a0c467f8a --- /dev/null +++ b/src/lib/accessibility/Behaviors/Menu/menuDividerBehavior.ts @@ -0,0 +1,19 @@ +import { Accessibility } from '../../types' + +/** + * @description + * Behavior for menu divider + * + * @specification + * Adds role 'presentation' to 'root' component's part. + */ + +const menuDividerBehavior: Accessibility = (props: any) => ({ + attributes: { + root: { + role: 'presentation', + }, + }, +}) + +export default menuDividerBehavior diff --git a/src/lib/accessibility/index.ts b/src/lib/accessibility/index.ts index a7dc324f89..a645706eca 100644 --- a/src/lib/accessibility/index.ts +++ b/src/lib/accessibility/index.ts @@ -5,6 +5,7 @@ export { default as toggleButtonBehavior } from './Behaviors/Button/toggleButton export { default as imageBehavior } from './Behaviors/Image/imageBehavior' export { default as menuBehavior } from './Behaviors/Menu/menuBehavior' export { default as menuItemBehavior } from './Behaviors/Menu/menuItemBehavior' +export { default as menuDividerBehavior } from './Behaviors/Menu/menuDividerBehavior' export { default as submenuBehavior } from './Behaviors/Menu/submenuBehavior' export { default as basicListBehavior } from './Behaviors/List/listBehavior' export { default as basicListItemBehavior } from './Behaviors/List/basicListItemBehavior' diff --git a/test/specs/behaviors/behavior-test.tsx b/test/specs/behaviors/behavior-test.tsx index 76070fd1eb..85ba74ec5c 100644 --- a/test/specs/behaviors/behavior-test.tsx +++ b/test/specs/behaviors/behavior-test.tsx @@ -15,6 +15,7 @@ import { loaderBehavior, menuBehavior, menuItemBehavior, + menuDividerBehavior, submenuBehavior, popupBehavior, popupFocusTrapBehavior, @@ -49,6 +50,7 @@ testHelper.addBehavior('imageBehavior', imageBehavior) testHelper.addBehavior('loaderBehavior', loaderBehavior) testHelper.addBehavior('menuBehavior', menuBehavior) testHelper.addBehavior('menuItemBehavior', menuItemBehavior) +testHelper.addBehavior('menuDividerBehavior', menuDividerBehavior) testHelper.addBehavior('submenuBehavior', submenuBehavior) testHelper.addBehavior('popupBehavior', popupBehavior) testHelper.addBehavior('popupFocusTrapBehavior', popupFocusTrapBehavior) From 8b218912cd07259afd9160099d0ed77a55cc72a0 Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Fri, 1 Feb 2019 12:48:54 +0100 Subject: [PATCH 2/3] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3660118614..951767d004 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Add sample screener tests with steps for `Dropdown` @silviuavram ([#797](https://github.com/stardust-ui/react/pull/797)) - Add shorthand support for `triggerButton` in `Dropdown` @silviuavram ([#815](https://github.com/stardust-ui/react/pull/815)) - Add toggle functionality in the `Popoup` even if the `trigger` is not button @kolaps33 ([#758](https://github.com/stardust-ui/react/pull/758)) +- Accessibility for menu divider @jurokapsiar ([#822](https://github.com/stardust-ui/react/pull/822)) ### Fixes - Handle `onClick` and `onFocus` on ListItems correctly @layershifter ([#779](https://github.com/stardust-ui/react/pull/779)) From acb5a22203cebe8f651b582ef6892af4df57dbde Mon Sep 17 00:00:00 2001 From: Juraj Kapsiar Date: Fri, 1 Feb 2019 12:53:37 +0100 Subject: [PATCH 3/3] move changelog entry to unreleased --- CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 630aabd523..5115babacf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ## [Unreleased] +### Features +- Accessibility for menu divider @jurokapsiar ([#822](https://github.com/stardust-ui/react/pull/822)) + ## [v0.19.2](https://github.com/stardust-ui/react/tree/v0.19.2) (2019-02-01) [Compare changes](https://github.com/stardust-ui/react/compare/v0.19.1...v0.19.2) @@ -34,7 +37,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Add sample screener tests with steps for `Dropdown` @silviuavram ([#797](https://github.com/stardust-ui/react/pull/797)) - Add shorthand support for `triggerButton` in `Dropdown` @silviuavram ([#815](https://github.com/stardust-ui/react/pull/815)) - Add toggle functionality in the `Popoup` even if the `trigger` is not button @kolaps33 ([#758](https://github.com/stardust-ui/react/pull/758)) -- Accessibility for menu divider @jurokapsiar ([#822](https://github.com/stardust-ui/react/pull/822)) ### Fixes - Handle `onClick` and `onFocus` on ListItems correctly @layershifter ([#779](https://github.com/stardust-ui/react/pull/779))