fix(Menu): Add aria posinset and setsize, hide indicator from narration

CHANGELOG.md

@@ -20,6 +20,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### BREAKING CHANGES
 - Use regular components instead of `Label` in `RadioGroupItem` @layershifter ([#1070](https://github.com/stardust-ui/react/pull/1070))
 
+### Fixes
+- Add aria posinset and setsize, hide menu indicator from narration @jurokapsiar ([#1066](https://github.com/stardust-ui/react/pull/1066))
+
 <!--------------------------------[ v0.23.1 ]------------------------------- -->
 ## [v0.23.1](https://github.com/stardust-ui/react/tree/v0.23.1) (2019-03-13)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.23.0...v0.23.1)

packages/react/src/components/Indicator/Indicator.tsx

@@ -9,14 +9,14 @@ import {
   customPropTypes,
 } from '../../lib'
 import { Accessibility } from '../../lib/accessibility/types'
-import { defaultBehavior } from '../../lib/accessibility'
+import { iconBehavior } from '../../lib/accessibility'
 import { ReactProps, ShorthandValue } from '../../types'
 import Icon from '../Icon/Icon'
 
 export interface IndicatorProps extends UIComponentProps {
   /**
    * Accessibility behavior if overridden by the user.
-   * @default defaultBehavior
+   * @default iconBehavior
    */
   accessibility?: Accessibility
 
@@ -51,7 +51,7 @@ class Indicator extends UIComponent<ReactProps<IndicatorProps>, any> {
   }
 
   static defaultProps = {
-    accessibility: defaultBehavior,
+    accessibility: iconBehavior,
     as: 'span',
     direction: 'bottom',
   }

packages/react/src/components/Menu/Menu.tsx

@@ -152,6 +152,8 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
       indicator,
     } = this.props
     const { activeIndex } = this.state
+    const itemsCount = _.filter(items, item => getKindProp(item, 'item') !== 'divider').length
+    let itemPosition = 0
 
     return _.map(items, (item, index) => {
       const active =
@@ -171,6 +173,8 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
         })
       }
 
+      itemPosition++
+
       return MenuItem.create(item, {
         defaultProps: {
           iconOnly,
@@ -182,6 +186,8 @@ class Menu extends AutoControlledComponent<ReactProps<MenuProps>, MenuState> {
           variables,
           vertical,
           index,
+          itemPosition,
+          itemsCount,
           active,
           inSubmenu: submenu,
           indicator,

packages/react/src/components/Menu/MenuItem.tsx

@@ -57,6 +57,12 @@ export interface MenuItemProps
   /** MenuItem index inside Menu. */
   index?: number
 
+  /** MenuItem position inside Menu (skipping separators). */
+  itemPosition?: number
+
+  /** MenuItem count inside Menu. */
+  itemsCount?: number
+
   /**
    * Called on click. When passed, the component will render as an `a`
    * tag by default instead of a `div`.
@@ -140,6 +146,8 @@ class MenuItem extends AutoControlledComponent<ReactProps<MenuItemProps>, MenuIt
     icon: customPropTypes.itemShorthand,
     iconOnly: PropTypes.bool,
     index: PropTypes.number,
+    itemPosition: PropTypes.number,
+    itemsCount: PropTypes.number,
     onClick: PropTypes.func,
     onFocus: PropTypes.func,
     pills: PropTypes.bool,

packages/react/src/lib/accessibility/Behaviors/Menu/menuItemBehavior.ts

@@ -45,6 +45,8 @@ const menuItemBehavior: Accessibility = (props: any) => ({
         ? true
         : undefined,
       [IS_FOCUSABLE_ATTRIBUTE]: !props['disabled'],
+      'aria-posinset': props.itemPosition,
+      'aria-setsize': props.itemsCount,
     },
   },
 

packages/react/test/specs/components/Menu/Menu-test.tsx

@@ -85,6 +85,35 @@ describe('Menu', () => {
       })
     })
 
+    describe('itemsCount and itemPosition', () => {
+      it('should be set by default', () => {
+        const menuItems = mountWithProvider(<Menu items={getItems()} />).find('MenuItem')
+
+        expect(menuItems.at(0).prop('itemPosition')).toBe(1)
+        expect(menuItems.at(0).prop('itemsCount')).toBe(2)
+
+        expect(menuItems.at(1).prop('itemPosition')).toBe(2)
+        expect(menuItems.at(1).prop('itemsCount')).toBe(2)
+      })
+
+      it('should not be set on the divider', () => {
+        const wrapper = mountWithProvider(
+          <Menu items={[...getItems(), { kind: 'divider', key: 'divider' }]} />,
+        )
+        const menuItems = wrapper.find('MenuItem')
+        const menuDividers = wrapper.find('MenuDivider')
+
+        expect(menuItems.at(0).prop('itemPosition')).toBe(1)
+        expect(menuItems.at(0).prop('itemsCount')).toBe(2)
+
+        expect(menuItems.at(1).prop('itemsCount')).toBe(2)
+        expect(menuItems.at(1).prop('itemPosition')).toBe(2)
+
+        expect(menuDividers.at(0).prop('itemsCount')).toBeUndefined()
+        expect(menuDividers.at(0).prop('itemPosition')).toBeUndefined()
+      })
+    })
+
     describe('accessibility', () => {
       handlesAccessibility(Menu, {
         defaultRootRole: 'menu',