feat(Accessibility): Accessibility for menu divider

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 ]------------------------------- -->
 ## [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)

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<ReactProps<MenuDividerProps>, 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 <ElementType {...unhandledProps} className={classes.root} />
+  renderComponent({ ElementType, classes, unhandledProps, accessibility }) {
+    return (
+      <ElementType
+        {...accessibility.attributes.root}
+        {...unhandledProps}
+        className={classes.root}
+      />
+    )
   }
 }
 

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'

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

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'

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)