chore: remove FocusZoneMode (#2265)

* chore: remove FocusZoneMode

* remove "Embeds component into FocusZone." from behavior descriptions

* revert unrelated changes

* remove cruft in tests

* add changelog

* fix telemetry

* Update CHANGELOG.md

Co-Authored-By: Marija Najdova <mnajdova@gmail.com>

Co-authored-by: Marija Najdova <mnajdova@gmail.com>

Author: layershifter

CHANGELOG.md

@@ -20,6 +20,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### BREAKING CHANGES
 - Add `@fluentui/styles` package for all styles' related utilities and TS types @layershifter, @mnajdova ([#2222](https://github.com/microsoft/fluent-ui-react/pull/2222))
 - Remove `animation` prop from all components @joschect ([#2239](https://github.com/microsoft/fluent-ui-react/pull/2239))
+- `mode` property from `focusZone` configuration in accessibility behaviors is no longer supported - the focus zone will always be in embed mode @layershifter ([#2265](https://github.com/microsoft/fluent-ui-react/pull/2265))
+- `FocusZoneMode` and `FOCUSZONE_WRAP_ATTRIBUTE` are no longer exported @layershifter ([#2265](https://github.com/microsoft/fluent-ui-react/pull/2265))
 
 ### Fixes
 - Fix event listener leak in `FocusZone` @miroslavstastny ([#2227](https://github.com/microsoft/fluent-ui-react/pull/2227))

docs/src/views/AccessibilityBehaviors.tsx

@@ -57,7 +57,7 @@ export default () => (
           these navigable components (navigate between Menu and List components by pressing TAB and
           use arrow keys to navigate between their items).{' '}
           <Link to="focus-zone">Read more about FocusZone.</Link>
-          <p>Type: {code('{ mode: FocusZoneMode, props?: FocusZoneProps }')}.</p>
+          <p>Type: {code('{ props?: FocusZoneProps }')}.</p>
         </li>
         <li>
           <b>childBehaviors</b> - {code('{ [childBehaviorSlot: string]: Accessibility }')} are used

packages/accessibility/src/behaviors/Chat/chatBehavior.ts

@@ -2,7 +2,7 @@ import * as keyboardKey from 'keyboard-key'
 
 import { IS_FOCUSABLE_ATTRIBUTE } from '../../attributes'
 import { Accessibility } from '../../types'
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 
 const CHAT_FOCUSZONE_ATTRIBUTE = 'chat-focuszone'
 
@@ -11,7 +11,6 @@ const CHAT_FOCUSZONE_ATTRIBUTE = 'chat-focuszone'
  * Adds a vertical focus zone navigation with a last message as a default tabbable element, pressing enter key focuses inside a message.
  *
  * @specification
- * Embeds component into FocusZone.
  * Provides arrow key navigation in vertical direction.
  * Focus is set initially on the specified default tabbable element.
  * Focused active element of the component is reset when TAB from the component.
@@ -22,7 +21,6 @@ const ChatBehavior: Accessibility = () => ({
     root: {},
   },
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       shouldEnterInnerZone: event => keyboardKey.getCode(event) === keyboardKey.Enter,
       direction: FocusZoneDirection.vertical,

packages/accessibility/src/behaviors/Chat/chatMessageBehavior.ts

@@ -2,7 +2,7 @@ import * as keyboardKey from 'keyboard-key'
 
 import { IS_FOCUSABLE_ATTRIBUTE } from '../../attributes'
 import { Accessibility } from '../../types'
-import { FocusZoneTabbableElements, FocusZoneDirection, FocusZoneMode } from '../../focusZone/types'
+import { FocusZoneTabbableElements, FocusZoneDirection } from '../../focusZone/types'
 
 /**
  * @description
@@ -12,7 +12,6 @@ import { FocusZoneTabbableElements, FocusZoneDirection, FocusZoneMode } from '..
  * Adds an escape key action which focuses the chat message, i.e., moves key handling from inside a message back to the chat list.
  *
  * @specification
- * Embeds component into FocusZone.
  * Provides arrow key navigation in vertical direction.
  * Keyboard navigation is circular.
  * Focus is moved within the focusable children of the component using TAB key.
@@ -25,7 +24,6 @@ const chatMessageBehavior: Accessibility = () => ({
     },
   },
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       handleTabKey: FocusZoneTabbableElements.all,
       isCircularNavigation: true,

packages/accessibility/src/behaviors/Grid/gridBehavior.ts

@@ -1,18 +1,16 @@
 import { Accessibility } from '../../types'
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 
 /**
  * @description
  * Provides navigation between focusable children of Grid component with arrow keys in 4 directions.
  *
  * @specification
- * Embeds component into FocusZone.
  * Provides arrow key navigation in bidirectional direction.
  */
 const gridBehavior: Accessibility = () => ({
   attributes: {},
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       direction: FocusZoneDirection.bidirectional,
     },

packages/accessibility/src/behaviors/Grid/gridHorizontalBehavior.ts

@@ -1,19 +1,17 @@
 import { Accessibility } from '../../types'
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 
 /**
  * @description
  * Provides navigation between focusable children of Grid component with arrow keys in horizontal direction (based on DOM order).
  * Right/Down arrow keys move to next item, Up/Left  arrow keys to previous item. Right and Left arrow keys are switched in RTL mode.
  *
  * @specification
- * Embeds component into FocusZone.
  * Provides arrow key navigation in bidirectionalDomOrder direction.
  */
 const gridHorizontalBehavior: Accessibility = () => ({
   attributes: {},
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       direction: FocusZoneDirection.bidirectionalDomOrder,
     },

packages/accessibility/src/behaviors/HierarchicalTree/hierarchicalTreeBehavior.ts

@@ -1,12 +1,11 @@
 import { Accessibility, AccessibilityAttributes } from '../../types'
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 import hierarchicalSubtreeBehavior from './hierarchicalSubtreeBehavior'
 
 /**
  * @specification
  * Adds role 'tree' to 'root' slot.
  * Adds attribute 'aria-labelledby' based on the property 'aria-labelledby' to 'root' slot.
- * Embeds component into FocusZone.
  * Provides arrow key navigation in vertical direction.
  * Triggers 'expandSiblings' action with '*' on 'root'.
  */
@@ -26,7 +25,6 @@ const hierarchicalTreeBehavior: Accessibility<TreeBehaviorProps> = props => {
       },
     },
     focusZone: {
-      mode: FocusZoneMode.Embed,
       props: {
         direction: FocusZoneDirection.vertical,
       },

packages/accessibility/src/behaviors/List/navigableListBehavior.ts

@@ -1,11 +1,10 @@
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 import { Accessibility } from '../../types'
 import { ListBehaviorProps } from './listBehavior'
 
 /**
  * @specification
  * Adds role='menu'.
- * Embeds component into FocusZone.
  * Provides arrow key navigation in bidirectionalDomOrder direction.
  */
 const navigableListBehavior: Accessibility<ListBehaviorProps> = props => ({
@@ -15,7 +14,6 @@ const navigableListBehavior: Accessibility<ListBehaviorProps> = props => ({
     },
   },
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       shouldFocusInnerElementWhenReceivedFocus: true,
       direction: FocusZoneDirection.bidirectionalDomOrder,

packages/accessibility/src/behaviors/List/selectableListBehavior.ts

@@ -1,5 +1,5 @@
 import { Accessibility } from '../../types'
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 import { ListBehaviorProps } from './listBehavior'
 
 /**
@@ -10,7 +10,6 @@ import { ListBehaviorProps } from './listBehavior'
  * Adds role='listbox'.
  * Adds attribute 'tabIndex=-1' to 'root' slot.
  * Adds attribute 'aria-orientation=horizontal' to 'root' slot if 'horizontal' property is true. Does not set the attribute otherwise.
- * Embeds component into FocusZone.
  * Provides arrow key navigation in bidirectionalDomOrder direction.
  */
 const selectableListBehavior: Accessibility<ListBehaviorProps> = props => ({
@@ -24,7 +23,6 @@ const selectableListBehavior: Accessibility<ListBehaviorProps> = props => ({
     },
   },
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       shouldFocusInnerElementWhenReceivedFocus: true,
       direction: FocusZoneDirection.bidirectionalDomOrder,

packages/accessibility/src/behaviors/Menu/menuBehavior.ts

@@ -1,5 +1,5 @@
 import { Accessibility } from '../../types'
-import { FocusZoneMode, FocusZoneDirection } from '../../focusZone/types'
+import { FocusZoneDirection } from '../../focusZone/types'
 import menuItemBehavior from './menuItemBehavior'
 import menuDividerBehavior from './menuDividerBehavior'
 
@@ -10,7 +10,6 @@ import menuDividerBehavior from './menuDividerBehavior'
  *
  * @specification
  * Adds role='menu'.
- * Embeds component into FocusZone.
  * Provides arrow key navigation in horizontal direction.
  * When 'vertical' prop is used, provides keyboard navigation in vertical direction.
  * Keyboard navigation is circular.
@@ -22,7 +21,6 @@ const menuBehavior: Accessibility<MenuBehaviorProps> = props => ({
     },
   },
   focusZone: {
-    mode: FocusZoneMode.Embed,
     props: {
       isCircularNavigation: true,
       shouldFocusInnerElementWhenReceivedFocus: true,