fix(Splitbutton) accessibility - screen reader fixes

CHANGELOG.md

@@ -24,6 +24,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Allow focusing radio and checkbox in the focus zone @jurokapsiar ([#2103](https://github.com/microsoft/fluent-ui-react/pull/2103))
 - Apply unhandled props of `Ref` to the children if used @jurokapsiar ([#2105](https://github.com/microsoft/fluent-ui-react/pull/2105))
 - Add necessary `-ms-grid-` styles to `Layout` for IE11 @jurokapsiar ([#2106](https://github.com/microsoft/fluent-ui-react/pull/2106))
+- Accessibility `splitButton` & `menuButton` - screen reader fixes @kolaps33 ([#2090](https://github.com/microsoft/fluent-ui-react/pull/2090))
 
 ### Features
 - Add `Table` component base implementation @pompomon ([#2099](https://github.com/microsoft/fluent-ui-react/pull/2099))

docs/src/examples/components/SplitButton/States/SplitButtonExampleDisabled.shorthand.tsx

@@ -8,7 +8,11 @@ const SplitButtonExampleDisabledShorthand = () => (
       { key: 'group', content: 'New group message' },
       { key: 'channel', content: 'New channel message' },
     ]}
-    button="New conversation"
+    button={{
+      content: 'New conversation',
+      'aria-roledescription': 'splitbutton',
+    }}
+    toggleButton={{ 'aria-label': 'more options' }}
   />
 )
 

packages/accessibility/src/behaviors/MenuButton/menuButtonBehavior.ts

@@ -9,7 +9,6 @@ import popupBehavior, { PopupBehaviorProps } from '../Popup/popupBehavior'
  * Implements ARIA [MenuButton](https://www.w3.org/TR/wai-aria-practices/#menubutton) design pattern.
  *
  * @specification
- * Adds role='none'.
  * Adds attribute 'aria-haspopup=true' to 'trigger' slot if 'contextMenu' property is not set.
  * Adds attribute 'tabIndex=-1' based on the property 'open' to 'trigger' slot.
  * Adds attribute 'aria-controls=menu-id' based on the property 'menuId' to 'trigger' slot.
@@ -22,9 +21,6 @@ const menuButtonBehavior: Accessibility<MenuButtonBehaviorProps> = props => {
   const behavior = popupBehavior(props)
   return _.merge(behavior, {
     attributes: {
-      root: {
-        role: 'none',
-      },
       trigger: {
         'aria-controls': props.menuId,
         'aria-expanded': props.open || undefined,

packages/accessibility/src/behaviors/SplitButton/splitButtonBehavior.ts

@@ -5,13 +5,24 @@ import { Accessibility } from '../../types'
 import menuButtonBehavior from '../MenuButton/menuButtonBehavior'
 
 /**
+ * @description
+ * Adds attribute 'tabIndex=-1' based on the property 'open' to 'trigger' slot.
+ * Adds attribute 'aria-controls=menu-id' based on the property 'open' to 'trigger' slot.
+ * Adds attribute 'aria-expanded=true' based on the property 'open' to 'trigger' slot.
+ * Adds attribute 'id=trigger-id' based on the property 'triggerId' to 'trigger' slot.
+ * Adds attribute 'id=menu-id' based on the property 'menuId' to 'menu' slot.
+ * Adds attribute 'aria-labelledby=trigger-id' based on the property 'triggerId' to 'menu' slot.
+ * Triggers 'closeAndFocusTrigger' action with 'Escape' or 'altKey'+'ArrowUp' or 'Tab' or 'Shift'+'Tab' on 'popup' slot.
+ * Triggers 'open' action with 'altKey'+'ArrowDown' on 'trigger' slot.
+ *
  * @specification
  * Adds attribute 'tabIndex=-1' to 'toggleButton' slot.
  * Adds attribute 'aria-haspopup=true' to 'toggleButton' slot.
  */
 const splitButtonBehavior: Accessibility = props => {
   const splitButtonMenuButtonBehavior = props => {
     const menuButtonBehaviorData = menuButtonBehavior(props)
+    menuButtonBehaviorData.attributes.trigger['aria-haspopup'] = undefined
 
     return _.merge(menuButtonBehaviorData, {
       keyActions: {
@@ -25,6 +36,8 @@ const splitButtonBehavior: Accessibility = props => {
             keyCombinations: [
               { keyCode: keyboardKey.Escape },
               { keyCode: keyboardKey.ArrowUp, altKey: true },
+              { keyCode: keyboardKey.Tab, shiftKey: false },
+              { keyCode: keyboardKey.Tab, shiftKey: true },
             ],
           },
         },

packages/accessibility/test/behaviors/splitButtonBehavior-test.tsx

@@ -0,0 +1,43 @@
+import { splitButtonBehavior } from '@stardust-ui/accessibility'
+import * as keyboardKey from 'keyboard-key'
+import * as _ from 'lodash'
+
+function verifyKeys(supportedKeys, keysFromBehavior) {
+  keysFromBehavior.forEach(keyCombination => {
+    const keyCombinationFound = _.find(supportedKeys, keyCombination)
+    expect(keyCombinationFound).toEqual(keyCombination)
+  })
+}
+
+describe('SplitButtonBehavior.ts', () => {
+  test('aria-haspopup is not defined for splitButton', () => {
+    const property = {
+      contextMenu: false,
+    }
+    const expectedResult = splitButtonBehavior(property)
+    expect(
+      expectedResult['childBehaviors']['menuButton'](property).attributes.trigger['aria-haspopup'],
+    ).toBe(undefined)
+  })
+
+  test('close menu with different keys', () => {
+    const property = {}
+    const supportedKeys = [
+      { keyCode: keyboardKey.Escape },
+      { altKey: true, keyCode: keyboardKey.ArrowUp },
+      { keyCode: keyboardKey.Tab, shiftKey: false },
+      { keyCode: keyboardKey.Tab, shiftKey: true },
+    ]
+    const keysFromBehavior = splitButtonBehavior(property)['childBehaviors']['menuButton'](property)
+      .keyActions.popup.closeAndFocusTrigger.keyCombinations
+    verifyKeys(supportedKeys, keysFromBehavior)
+  })
+
+  test('open menu with alt + arrow down ', () => {
+    const property = {}
+    const supportedKeys = [{ altKey: true, keyCode: keyboardKey.ArrowDown }]
+    const keysFromBehavior = splitButtonBehavior(property)['childBehaviors']['menuButton'](property)
+      .keyActions.trigger.open.keyCombinations
+    verifyKeys(supportedKeys, keysFromBehavior)
+  })
+})

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

@@ -10,9 +10,7 @@ describe('MenuButton', () => {
   isConformant(MenuButton)
 
   describe('accessibility', () => {
-    handlesAccessibility(MenuButton, {
-      defaultRootRole: 'none',
-    })
+    handlesAccessibility(MenuButton)
 
     describe('onOpenChange', () => {
       test('is called on click', () => {