diff --git a/CHANGELOG.md b/CHANGELOG.md index 2203eb761a..2101ee1f2f 100644 --- a/CHANGELOG.md +++ b/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](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) diff --git a/packages/react/src/components/Indicator/Indicator.tsx b/packages/react/src/components/Indicator/Indicator.tsx index 1a3aa27a88..0ca741a8ae 100644 --- a/packages/react/src/components/Indicator/Indicator.tsx +++ b/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, any> { } static defaultProps = { - accessibility: defaultBehavior, + accessibility: iconBehavior, as: 'span', direction: 'bottom', } diff --git a/packages/react/src/components/Menu/Menu.tsx b/packages/react/src/components/Menu/Menu.tsx index e470ea4f90..69d2b2492d 100644 --- a/packages/react/src/components/Menu/Menu.tsx +++ b/packages/react/src/components/Menu/Menu.tsx @@ -152,6 +152,8 @@ class Menu extends AutoControlledComponent, 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, MenuState> { }) } + itemPosition++ + return MenuItem.create(item, { defaultProps: { iconOnly, @@ -182,6 +186,8 @@ class Menu extends AutoControlledComponent, MenuState> { variables, vertical, index, + itemPosition, + itemsCount, active, inSubmenu: submenu, indicator, diff --git a/packages/react/src/components/Menu/MenuItem.tsx b/packages/react/src/components/Menu/MenuItem.tsx index 43d836cc88..54b2011461 100644 --- a/packages/react/src/components/Menu/MenuItem.tsx +++ b/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, 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, diff --git a/packages/react/src/lib/accessibility/Behaviors/Menu/menuItemBehavior.ts b/packages/react/src/lib/accessibility/Behaviors/Menu/menuItemBehavior.ts index 7ff11888ee..871edadd9b 100644 --- a/packages/react/src/lib/accessibility/Behaviors/Menu/menuItemBehavior.ts +++ b/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, }, }, diff --git a/packages/react/test/specs/components/Menu/Menu-test.tsx b/packages/react/test/specs/components/Menu/Menu-test.tsx index 82442f5919..445dbcdaba 100644 --- a/packages/react/test/specs/components/Menu/Menu-test.tsx +++ b/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().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( + , + ) + 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',