feat(Accessibility): Improvements to Menu accessibility behaviors (#523)

* Improvements to menu behaviors * Update changelog

Author: sophieH29

CHANGELOG.md

@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Add `renderComponent` function in the public API @mnajdova ([#503](https://github.com/stardust-ui/react/pull/503))
 - Apply `dir=auto` attribute to string content of `Text` @kuzhelov ([#5](https://github.com/stardust-ui/react/pull/5))
+- Improve `Menu` accessibility behaviors @sophieH29 ([#523](https://github.com/stardust-ui/react/pull/523))
 
 ### Fixes
 - Fix the behaviour of `AutoControlledComponent` when `undefined` is passed as a prop value @layershifter ([#499](https://github.com/stardust-ui/react/pull/499))

src/lib/accessibility/Behaviors/Menu/menuBehavior.ts

@@ -6,7 +6,7 @@ import { Accessibility, FocusZoneMode } from '../../types'
  *
  * @specification
  * Adds role='menu'.
- * Wraps component in FocusZone allowing circular arrow key navigation through the children of the component.
+ * Embeds FocusZone into component allowing circular arrow key navigation through the children of the component.
  */
 
 const menuBehavior: Accessibility = (props: any) => ({
@@ -16,10 +16,11 @@ const menuBehavior: Accessibility = (props: any) => ({
  },
  },
  focusZone: {
- mode: FocusZoneMode.Wrap,
+ mode: FocusZoneMode.Embed,
  props: {
  isCircularNavigation: true,
  preventDefaultWhenHandled: true,
+ shouldFocusFirstElementWhenReceivedFocus: true,
  },
  },
 })

src/lib/accessibility/Behaviors/Tab/tabListBehavior.ts

@@ -3,7 +3,7 @@ import { Accessibility, FocusZoneMode } from '../../types'
 /**
  * @specification
  * Adds role 'tablist' to 'root' component's part.
- * Wraps component in FocusZone allowing arrow key navigation through the children of the component.
+ * Embeds FocusZone into component allowing arrow key navigation through the children of the component.
  */
 const tabListBehavior: Accessibility = (props: any) => ({
  attributes: {
@@ -12,10 +12,11 @@ const tabListBehavior: Accessibility = (props: any) => ({
  },
  },
  focusZone: {
- mode: FocusZoneMode.Wrap,
+ mode: FocusZoneMode.Embed,
  props: {
  isCircularNavigation: false,
  preventDefaultWhenHandled: true,
+ shouldFocusFirstElementWhenReceivedFocus: true,
  },
  },
 })

src/lib/accessibility/Behaviors/Toolbar/toolbarBehavior.ts

@@ -3,7 +3,7 @@ import { Accessibility, FocusZoneMode } from '../../types'
 /**
  * @specification
  * Adds role 'toolbar' to 'root' component's part.
- * Wraps component in FocusZone allowing arrow key navigation through the children of the component.
+ * Embeds FocusZone into component allowing arrow key navigation through the children of the component.
  */
 const toolbarBehavior: Accessibility = (props: any) => ({
  attributes: {
@@ -12,10 +12,11 @@ const toolbarBehavior: Accessibility = (props: any) => ({
  },
  },
  focusZone: {
- mode: FocusZoneMode.Wrap,
+ mode: FocusZoneMode.Embed,
  props: {
  isCircularNavigation: false,
  preventDefaultWhenHandled: true,
+ shouldFocusFirstElementWhenReceivedFocus: true,
  },
  },
 })

test/specs/behaviors/testDefinitions.ts

@@ -1,4 +1,5 @@
 import { TestDefinition, TestMethod, TestHelper } from './testHelper'
+import { FocusZoneMode, FocusZoneDefinition } from '../../../src/lib/accessibility/types'
 import * as keyboardKey from 'keyboard-key'
 
 const definitions: TestDefinition[] = []
@@ -181,44 +182,91 @@ definitions.push({
  },
 })
 
+// Embeds FocusZone into component allowing arrow key navigation through the children of the component.
+definitions.push({
+ regexp: /Embeds FocusZone into component allowing arrow key navigation through the children of the component\.+/g,
+ testMethod: (parameters: TestMethod) => {
+ const actualFocusZone = parameters.behavior({}).focusZone
+
+ const expectedFocusZone: FocusZoneDefinition = {
+ mode: FocusZoneMode.Embed,
+ props: {
+ isCircularNavigation: false,
+ preventDefaultWhenHandled: true,
+ },
+ }
+
+ verifyFocusZones(expectedFocusZone, actualFocusZone)
+ },
+})
+
+// [Circular navigation] Embeds FocusZone into component allowing circular arrow key navigation through the children of the component.
+definitions.push({
+ regexp: /Embeds FocusZone into component allowing circular arrow key navigation through the children of the component\.+/g,
+ testMethod: (parameters: TestMethod) => {
+ const actualFocusZone = parameters.behavior({}).focusZone
+
+ const expectedFocusZone: FocusZoneDefinition = {
+ mode: FocusZoneMode.Embed,
+ props: {
+ isCircularNavigation: true,
+ preventDefaultWhenHandled: true,
+ },
+ }
+
+ verifyFocusZones(expectedFocusZone, actualFocusZone)
+ },
+})
+
 // Wraps component in FocusZone allowing arrow key navigation through the children of the component.
 definitions.push({
  regexp: /Wraps component in FocusZone allowing arrow key navigation through the children of the component\.+/g,
  testMethod: (parameters: TestMethod) => {
- const property = {
- isCircularNavigation: undefined,
- preventDefaultWhenHandled: undefined,
+ const actualFocusZone = parameters.behavior({}).focusZone
+
+ const expectedFocusZone: FocusZoneDefinition = {
+ mode: FocusZoneMode.Wrap,
+ props: {
+ isCircularNavigation: false,
+ preventDefaultWhenHandled: true,
+ },
  }
- const expectedMode = parameters.behavior(property).focusZone.mode
- const expectedIsCircularNav = parameters.behavior(property).focusZone.props.isCircularNavigation
- const expectedPreventDefault = parameters.behavior(property).focusZone.props
- .preventDefaultWhenHandled
-
- expect(expectedMode).toBe(1)
- expect(expectedIsCircularNav).toBe(false)
- expect(expectedPreventDefault).toBe(true)
+
+ verifyFocusZones(expectedFocusZone, actualFocusZone)
  },
 })
 
 // [Circular navigation] Wraps component in FocusZone allowing circular arrow key navigation through the children of the component.
 definitions.push({
  regexp: /Wraps component in FocusZone allowing circular arrow key navigation through the children of the component\.+/g,
  testMethod: (parameters: TestMethod) => {
- const property = {
- isCircularNavigation: undefined,
- preventDefaultWhenHandled: undefined,
+ const actualFocusZone = parameters.behavior({}).focusZone
+
+ const expectedFocusZone: FocusZoneDefinition = {
+ mode: FocusZoneMode.Wrap,
+ props: {
+ isCircularNavigation: true,
+ preventDefaultWhenHandled: true,
+ },
  }
- const expectedMode = parameters.behavior(property).focusZone.mode
- const expectedIsCircularNav = parameters.behavior(property).focusZone.props.isCircularNavigation
- const expectedPreventDefault = parameters.behavior(property).focusZone.props
- .preventDefaultWhenHandled
-
- expect(expectedMode).toBe(1)
- expect(expectedIsCircularNav).toBe(true)
- expect(expectedPreventDefault).toBe(true)
+
+ verifyFocusZones(expectedFocusZone, actualFocusZone)
  },
 })
 
+function verifyFocusZones(
+ expectedFocusZone: FocusZoneDefinition,
+ actualFocusZone: FocusZoneDefinition,
+) {
+ expect(expectedFocusZone.mode).toBe(actualFocusZone.mode)
+ expect(expectedFocusZone.props.isCircularNavigation).toBe(
+ actualFocusZone.props.isCircularNavigation,
+ )
+ expect(expectedFocusZone.props.preventDefaultWhenHandled).toBe(
+ actualFocusZone.props.preventDefaultWhenHandled,
+ )
+}
+
 // [FocusTrapZone] Traps focus inside component
 definitions.push({
  regexp: /Traps focus inside component/,