[A11y bugfix] Fix video effects pane tab ordering on call screen (#3351)

* add focus zones

* Change files

* Duplicate change files for beta release

* fix nit

Author: dmceachernmsft

change-beta/@azure-communication-react-d47cf82c-b936-4916-9e33-d0f10c623e48.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix tab ordering in the callscreen for the video effects pane",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-d47cf82c-b936-4916-9e33-d0f10c623e48.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix tab ordering in the callscreen for the video effects pane",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { IStyle, Label, mergeStyles, Stack } from '@fluentui/react';
+import { FocusZone, IStyle, Label, mergeStyles, Stack } from '@fluentui/react';
 import { useWarnings } from '@fluentui/react-hooks';
 import React from 'react';
 import { chunk } from '../utils';
@@ -136,7 +136,9 @@ export const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPick
           data-ui-id="video-effects-picker-row"
         >
           {options.map((option) => (
-            <_VideoEffectsItem {...option} key={option.itemKey} itemKey={option.itemKey} />
+            <FocusZone key={option.itemKey} shouldFocusOnMount={option.itemKey === 'none'}>
+              <_VideoEffectsItem {...option} itemKey={option.itemKey} />
+            </FocusZone>
           ))}
           {fillCount > 0 &&
             rowIndex === optionsByRow.length - 1 &&