@fluentui-react-native/tester 0.75.2 → 0.77.0

package/lib-commonjs/FluentTester/TestComponents/TextExperimental/PressableUsage.js

@@ -18,6 +18,9 @@ var PressableUsage = function () {
     var _onPress2 = function () {
         react_native_1.Alert.alert('Alert', 'Success!');
     };
+    var _onPress3 = function () {
+        react_native_1.Alert.alert('Alert', 'onAccessibilityTap invoked!');
+    };
     var _onKeyDown2 = function (ev) {
         if (ev.nativeEvent.key === 'Enter' || ev.nativeEvent.key == ' ')
             react_native_1.Alert.alert('Alert', 'Success!');
@@ -28,13 +31,13 @@ var PressableUsage = function () {
             React.createElement(experimental_text_1.Text, { variant: 'bodyStandard' },
                 "To learn more about microsoft, visit this",
                 ' ',
-                React.createElement(experimental_text_1.Text, { variant: 'bodyStandard', color: "blue", keyDownEvents: handledNativeKeyboardEvents, onPress: _onPress, onKeyDown: _onKeyDown }, "webpage"),
+                React.createElement(experimental_text_1.Text, { focusable: true, variant: 'bodyStandard', color: "blue", keyDownEvents: handledNativeKeyboardEvents, onPress: _onPress, onKeyDown: _onKeyDown }, "webpage"),
                 ' ',
                 "for more details."),
             React.createElement(experimental_text_1.Text, { variant: 'bodyStandard' },
                 "Press",
                 ' ',
-                React.createElement(experimental_text_1.Text, { variant: 'bodyStandard', color: "blue", keyDownEvents: handledNativeKeyboardEvents, onPress: _onPress2, onKeyDown: _onKeyDown2 }, "here"),
+                React.createElement(experimental_text_1.Text, { variant: 'bodyStandard', color: "blue", keyDownEvents: handledNativeKeyboardEvents, onPress: _onPress2, onKeyDown: _onKeyDown2, onAccessibilityTap: _onPress3 }, "here"),
                 ' ',
                 "to view an alert."))));
 };

package/lib-commonjs/FluentTester/TestComponents/TextExperimental/PressableUsage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PressableUsage.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/TextExperimental/PressableUsage.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,6CAAoD;AACpD,sDAAqD;AACrD,8EAAgE;AAChE,2CAA8C;AAGvC,IAAM,cAAc,GAA4B;IACrD,IAAM,QAAQ,GAAG;QACf,sBAAO,CAAC,OAAO,CAAC,2BAA2B,CAAC,CAAC;IAC/C,CAAC,CAAC;IAEF,IAAM,UAAU,GAAG,UAAC,EAAkB;QACpC,IAAI,EAAE,CAAC,WAAW,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,WAAW,CAAC,GAAG,IAAI,OAAO;YAAE,sBAAO,CAAC,OAAO,CAAC,2BAA2B,CAAC,CAAC;IACpH,CAAC,CAAC;IAEF,IAAM,SAAS,GAAG;QAChB,oBAAK,CAAC,KAAK,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,IAAM,WAAW,GAAG,UAAC,EAAkB;QACrC,IAAI,EAAE,CAAC,WAAW,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG;YAAE,oBAAK,CAAC,KAAK,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IACpG,CAAC,CAAC;IAEF,IAAM,2BAA2B,GAA4B,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC;IAElG,OAAO,CACL,oBAAC,mBAAI;QACH,oBAAC,aAAK,IAAC,KAAK,EAAE,mBAAU,EAAE,GAAG,EAAE,CAAC;YAC9B,oBAAC,wBAAI,IAAC,OAAO,EAAE,cAAc;;gBACe,GAAG;gBAC7C,oBAAC,wBAAI,IAAC,OAAO,EAAE,cAAc,EAAE,KAAK,EAAC,MAAM,EAAC,aAAa,EAAE,2BAA2B,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,cAEzH;gBAAC,GAAG;oCAEN;YACP,oBAAC,wBAAI,IAAC,OAAO,EAAE,cAAc;;gBACrB,GAAG;gBACT,oBAAC,wBAAI,IACH,OAAO,EAAE,cAAc,EACvB,KAAK,EAAC,MAAM,EACZ,aAAa,EAAE,2BAA2B,EAC1C,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,WAAW,WAGjB;gBAAC,GAAG;oCAEN,CACD,CACH,CACR,CAAC;AACJ,CAAC,CAAC;AA7CW,QAAA,cAAc,kBA6CzB"}
+{"version":3,"file":"PressableUsage.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/TextExperimental/PressableUsage.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,6CAAoD;AACpD,sDAAqD;AACrD,8EAAgE;AAChE,2CAA8C;AAGvC,IAAM,cAAc,GAA4B;IACrD,IAAM,QAAQ,GAAG;QACf,sBAAO,CAAC,OAAO,CAAC,2BAA2B,CAAC,CAAC;IAC/C,CAAC,CAAC;IAEF,IAAM,UAAU,GAAG,UAAC,EAAkB;QACpC,IAAI,EAAE,CAAC,WAAW,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,WAAW,CAAC,GAAG,IAAI,OAAO;YAAE,sBAAO,CAAC,OAAO,CAAC,2BAA2B,CAAC,CAAC;IACpH,CAAC,CAAC;IAEF,IAAM,SAAS,GAAG;QAChB,oBAAK,CAAC,KAAK,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,IAAM,SAAS,GAAG;QAChB,oBAAK,CAAC,KAAK,CAAC,OAAO,EAAE,6BAA6B,CAAC,CAAC;IACtD,CAAC,CAAC;IAEF,IAAM,WAAW,GAAG,UAAC,EAAkB;QACrC,IAAI,EAAE,CAAC,WAAW,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG;YAAE,oBAAK,CAAC,KAAK,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IACpG,CAAC,CAAC;IAEF,IAAM,2BAA2B,GAA4B,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC;IAElG,OAAO,CACL,oBAAC,mBAAI;QACH,oBAAC,aAAK,IAAC,KAAK,EAAE,mBAAU,EAAE,GAAG,EAAE,CAAC;YAC9B,oBAAC,wBAAI,IAAC,OAAO,EAAE,cAAc;;gBACe,GAAG;gBAC7C,oBAAC,wBAAI,IACH,SAAS,QACT,OAAO,EAAE,cAAc,EACvB,KAAK,EAAC,MAAM,EACZ,aAAa,EAAE,2BAA2B,EAC1C,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAE,UAAU,cAGhB;gBAAC,GAAG;oCAEN;YACP,oBAAC,wBAAI,IAAC,OAAO,EAAE,cAAc;;gBACrB,GAAG;gBACT,oBAAC,wBAAI,IACH,OAAO,EAAE,cAAc,EACvB,KAAK,EAAC,MAAM,EACZ,aAAa,EAAE,2BAA2B,EAC1C,OAAO,EAAE,SAAS,EAClB,SAAS,EAAE,WAAW,EACtB,kBAAkB,EAAE,SAAS,WAGxB;gBAAC,GAAG;oCAEN,CACD,CACH,CACR,CAAC;AACJ,CAAC,CAAC;AAzDW,QAAA,cAAc,kBAyDzB"}

package/lib-commonjs/FluentTester/theme/ThemePickers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemePickers.d.ts","sourceRoot":"","sources":["../../../src/FluentTester/theme/ThemePickers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;CAgB5B,CAAC;AAEH,aAAK,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAExD,aAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAc/D,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBA+BhC,CAAC"}
+{"version":3,"file":"ThemePickers.d.ts","sourceRoot":"","sources":["../../../src/FluentTester/theme/ThemePickers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;CAgB5B,CAAC;AAEH,aAAK,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAExD,aAAK,eAAe,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAY/D,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBA+BhC,CAAC"}

package/lib-commonjs/FluentTester/theme/ThemePickers.js

@@ -26,15 +26,12 @@ exports.themePickerStyles = react_native_1.StyleSheet.create({
 });
 var PartPicker = function (props) {
     var initial = props.initial, contents = props.contents, onChange = props.onChange;
-    var _a = React.useState(initial), value = _a[0], setValue = _a[1];
-    var onValueChange = React.useCallback(function (newValue) {
-        setValue(newValue);
-        onChange(newValue);
-    }, [setValue, onChange]);
-    var MenuPickerCollection = contents.map(function (entry) {
-        return entry.label;
-    });
-    return React.createElement(MenuPicker_1.MenuPicker, { selected: value, style: exports.themePickerStyles.dropdown, onChange: onValueChange, collection: MenuPickerCollection });
+    var _a = React.useState(initial), selected = _a[0], setSelected = _a[1];
+    var onValueChange = React.useCallback(function (value) {
+        setSelected(value);
+        onChange(value);
+    }, [setSelected, onChange]);
+    return React.createElement(MenuPicker_1.MenuPicker, { selected: selected, style: exports.themePickerStyles.dropdown, onChange: onValueChange, collection: contents });
 };
 exports.PartPicker = PartPicker;
 var PickerLabel = experimental_text_1.Text.customize({ variant: 'bodySemibold' });

package/lib-commonjs/FluentTester/theme/ThemePickers.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemePickers.js","sourceRoot":"","sources":["../../../src/FluentTester/theme/ThemePickers.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ThemePickers.js","sourceRoot":"","sources":["../../../src/FluentTester/theme/ThemePickers.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,6CAAgD;AAChD,8EAAgE;AAChE,+CAA+D;AAC/D,2CAAwD;AACxD,2CAAyD;AAEzD,kEAAiE;AAEpD,QAAA,iBAAiB,GAAG,yBAAU,CAAC,MAAM,CAAC;IACjD,UAAU,EAAE;QACV,aAAa,EAAE,KAAK;KACrB;IAED,MAAM,EAAE;QACN,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,CAAC;KACX;IAED,QAAQ,EAAE;QACR,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,GAAG;QACV,QAAQ,EAAE,EAAE;KACb;CACF,CAAC,CAAC;AAUI,IAAM,UAAU,GAA6C,UAAC,KAAsB;IACjF,IAAA,OAAO,GAAyB,KAAK,QAA9B,EAAE,QAAQ,GAAe,KAAK,SAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAW;IACxC,IAAA,KAA0B,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAhD,QAAQ,QAAA,EAAE,WAAW,QAA2B,CAAC;IACxD,IAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACrC,UAAC,KAAa;QACZ,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC,EACD,CAAC,WAAW,EAAE,QAAQ,CAAC,CACxB,CAAC;IAEF,OAAO,oBAAC,uBAAU,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,yBAAiB,CAAC,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,GAAI,CAAC;AAC9H,CAAC,CAAC;AAZW,QAAA,UAAU,cAYrB;AAEF,IAAM,WAAW,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,CAAC;AAEzD,IAAM,YAAY,GAA4B;IACnD,IAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,UAAC,QAAgB;QACvD,0BAAW,CAAC,KAAK,GAAG,QAAuB,CAAC;IAC9C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,UAAC,QAAgB;QACzD,0BAAW,CAAC,SAAS,GAAG,QAAsB,CAAC;IACjD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,UAAC,aAAqB;QACjE,0BAAW,CAAC,UAAU,GAAG,aAA2C,CAAC;IACvE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,oBAAC,mBAAI,IAAC,KAAK,EAAE,yBAAiB,CAAC,UAAU;QACvC,oBAAC,mBAAI,IAAC,KAAK,EAAE,yBAAiB,CAAC,MAAM;YACnC,oBAAC,WAAW,kBAAsB;YAClC,oBAAC,kBAAU,IAAC,OAAO,EAAE,0BAAW,CAAC,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,yBAAY,GAAI,CAC5F;QAEP,oBAAC,mBAAI,IAAC,KAAK,EAAE,yBAAiB,CAAC,MAAM;YACnC,oBAAC,WAAW,uBAA2B;YACvC,oBAAC,kBAAU,IAAC,OAAO,EAAE,0BAAW,CAAC,UAAU,EAAE,QAAQ,EAAE,kBAAkB,EAAE,QAAQ,EAAE,+BAAgB,GAAI,CACpG;QAEP,oBAAC,mBAAI,IAAC,KAAK,EAAE,yBAAiB,CAAC,MAAM;YACnC,oBAAC,WAAW,kBAAsB;YAClC,oBAAC,kBAAU,IAAC,OAAO,EAAE,0BAAW,CAAC,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,yBAAY,GAAI,CACtF,CACF,CACR,CAAC;AACJ,CAAC,CAAC;AA/BW,QAAA,YAAY,gBA+BvB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.75.2",
+  "version": "0.77.0",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -26,35 +26,35 @@
   },
   "dependencies": {
     "@fluentui-react-native/android-theme": ">=0.11.0 <1.0.0",
-    "@fluentui-react-native/apple-theme": ">=0.13.0 <1.0.0",
-    "@fluentui-react-native/avatar": "^1.1.13",
-    "@fluentui-react-native/badge": ">=0.1.1 <1.0.0",
-    "@fluentui-react-native/button": ">=0.24.2 <1.0.0",
+    "@fluentui-react-native/apple-theme": ">=0.13.1 <1.0.0",
+    "@fluentui-react-native/avatar": "^1.1.15",
+    "@fluentui-react-native/badge": ">=0.1.3 <1.0.0",
+    "@fluentui-react-native/button": ">=0.24.5 <1.0.0",
     "@fluentui-react-native/default-theme": ">=0.14.0 <1.0.0",
     "@fluentui-react-native/experimental-activity-indicator": ">=0.6.0 <1.0.0",
     "@fluentui-react-native/experimental-avatar": ">=0.16.0 <1.0.0",
-    "@fluentui-react-native/experimental-button": "0.16.2",
-    "@fluentui-react-native/experimental-checkbox": "0.12.1",
+    "@fluentui-react-native/experimental-button": "0.16.5",
+    "@fluentui-react-native/experimental-checkbox": "0.12.2",
     "@fluentui-react-native/experimental-drawer": ">=0.2.0 <1.0.0",
     "@fluentui-react-native/experimental-native-date-picker": ">=0.6.0 <1.0.0",
     "@fluentui-react-native/experimental-expander": "0.4.0",
-    "@fluentui-react-native/experimental-menu-button": ">=0.4.2 <1.0.0",
-    "@fluentui-react-native/experimental-shadow": "0.2.6",
+    "@fluentui-react-native/experimental-menu-button": ">=0.4.5 <1.0.0",
+    "@fluentui-react-native/experimental-shadow": "0.2.9",
     "@fluentui-react-native/experimental-shimmer": "0.7.0",
-    "@fluentui-react-native/experimental-tabs": "0.5.1",
-    "@fluentui-react-native/experimental-text": ">=0.10.1 <1.0.0",
+    "@fluentui-react-native/experimental-tabs": "0.5.2",
+    "@fluentui-react-native/experimental-text": ">=0.10.2 <1.0.0",
     "@fluentui-react-native/framework": ">=0.8.0 <1.0.0",
     "@fluentui-react-native/icon": "0.13.0",
     "@fluentui-react-native/interactive-hooks": ">=0.17.0 <1.0.0",
-    "@fluentui-react-native/menu": "^1.0.11",
-    "@fluentui-react-native/notification": "0.6.6",
+    "@fluentui-react-native/menu": "^1.0.14",
+    "@fluentui-react-native/notification": "0.7.1",
     "@fluentui-react-native/stack": ">=0.7.0 <1.0.0",
     "@fluentui-react-native/theme": ">=0.7.0 <1.0.0",
     "@fluentui-react-native/theme-types": ">=0.18.0 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.4.0",
     "@fluentui-react-native/theming-utils": ">=0.14.0 <1.0.0",
     "@fluentui-react-native/win32-theme": ">=0.20.0 <1.0.0",
-    "@fluentui/react-native": ">=0.31.2 <1.0.0",
+    "@fluentui/react-native": ">=0.31.5 <1.0.0",
     "@react-native-community/slider": "^4.2.0",
     "@react-native-menu/menu": "^0.1.2",
     "@react-native-picker/picker": "^2.2.1",

package/src/E2E/Avatar/specs/Avatar.spec.win.ts

@@ -38,22 +38,24 @@ describe('Avatar Accessibility Testing', () => {
     AvatarPageObject.scrollToTestElement();
     AvatarPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
   });
-  afterEach(() => {
-    expect(AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
-  });
   it('Validate accessibilityLabel', () => {
     expect(AvatarPageObject.getPrimaryComponentAttribute(ACCESSIBILITY_LABEL_ATTR)).toEqual(AVATAR_ACCESSIBILITY_LABEL);
+    expect(AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
   });
   it('Validate accessibilityLabel from `name` prop', () => {
     expect(AvatarPageObject.getSecondaryComponentAttribute(ACCESSIBILITY_LABEL_ATTR)).toEqual(AVATAR_ACCESSIBILITY_LABEL_BY_NAME);
+    expect(AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
   });
   it('Validate accessibilityHint', () => {
     expect(AvatarPageObject.getPrimaryComponentAttribute(ACCESSIBILITY_HINT_ATTRIBUTE)).toEqual(AVATAR_ACCESSIBILITY_HINT);
+    expect(AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
   });
   it('Validate accessibilityRole', () => {
     expect(AvatarPageObject.getPrimaryComponentAttribute(ACCESSIBILITY_ROLE_ATTRIBUTE)).toEqual(ACCESSIBILITY_ROLE_LINK);
+    expect(AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
   });
   it('Validate default accessibilityRole', () => {
     expect(AvatarPageObject.getSecondaryComponentAttribute(ACCESSIBILITY_ROLE_ATTRIBUTE)).toEqual(ACCESSIBILITY_ROLE_IMAGE);
+    expect(AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
   });
 });

package/src/FluentTester/TestComponents/Badge/BadgeTest.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { BADGE_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { View, Platform, Text } from 'react-native';
-import { Badge, CompressibleBadge, PresenceBadge } from '@fluentui-react-native/badge';
+import { Badge, PresenceBadge } from '@fluentui-react-native/badge';
 import BadgeSvg from './oof.svg';
 
 import { SvgIconProps } from '@fluentui-react-native/icon';
@@ -38,18 +38,18 @@ export const BasicBadge: React.FunctionComponent = () => {
     <View>
       <Badge />
       <Text>Appearance</Text>
-      <Badge appearance="outline" text="Outline badge" />
+      <Badge appearance="outline">Outline badge</Badge>
       <Text>Shape</Text>
-      <Badge shape="circular" text="Circular badge" />
-      <Badge shape="rounded" text="rounded badge" />
-      <Badge shape="square" text="Square badge" />
+      <Badge shape="circular">Circular badge</Badge>
+      <Badge shape="rounded">Rounded badge</Badge>
+      <Badge shape="square">Square badge</Badge>
       <Text>Size</Text>
       <Badge size="smallest" shape="circular" />
       <Badge size="smaller" shape="circular" />
-      <Badge size="small" text="Small" />
-      <Badge size="medium" text="Medium" />
-      <Badge size="large" text="Large" />
-      <Badge size="largest" text="Largest" />
+      <Badge size="small">Small</Badge>
+      <Badge size="medium">Medium</Badge>
+      <Badge size="large">Large</Badge>
+      <Badge size="largest">Largest</Badge>
       {svgIconsEnabled && (
         <>
           <Text>Badge with icon</Text>
@@ -61,10 +61,7 @@ export const BasicBadge: React.FunctionComponent = () => {
           <BadgeNoBorder appearance="outline" icon={iconProps} />
         </>
       )}
-      <StyledBadge appearance="outline" text="styled badge" />
-      <Text>Compressible badge</Text>
-      <CompressibleBadge />
-      <CompressibleBadge text="Basic compressible" />
+      <StyledBadge appearance="outline">Styled badge</StyledBadge>
       {svgIconsEnabled && (
         <>
           <Text>Presence Badge</Text>

package/src/FluentTester/TestComponents/Callout/CalloutTest.tsx

@@ -173,12 +173,24 @@ const StandardCallout: React.FunctionComponent = () => {
 
   const colorDefault: string = 'default';
   const colorSelections: string[] = [colorDefault, 'red', 'green', 'blue'];
+  const menuPickerColorCollection = colorSelections.map((color) => {
+    return {
+      label: color,
+      value: color,
+    };
+  });
 
   const [selectedBackgroundColor, setSelectedBackgroundColor] = React.useState<string | undefined>(undefined);
   const [selectedBorderColor, setSelectedBorderColor] = React.useState<string | undefined>(undefined);
 
   const borderWidthDefault: string = '1';
   const borderWidthSelections: string[] = ['1', '2', '4', '10'];
+  const menuPickerBorderWidthCollection = borderWidthSelections.map((width) => {
+    return {
+      label: width,
+      value: width,
+    };
+  });
 
   const [selectedBorderWidth, setSelectedBorderWidth] = React.useState<string | undefined>(undefined);
 
@@ -238,19 +250,19 @@ const StandardCallout: React.FunctionComponent = () => {
             prompt="Background Color"
             selected={selectedBackgroundColor || colorDefault}
             onChange={(color) => setSelectedBackgroundColor(color === colorDefault ? undefined : color)}
-            collection={colorSelections}
+            collection={menuPickerColorCollection}
           />
           <MenuPicker
             prompt="Border Color"
             selected={selectedBorderColor || colorDefault}
             onChange={(color) => setSelectedBorderColor(color === colorDefault ? undefined : color)}
-            collection={colorSelections}
+            collection={menuPickerColorCollection}
           />
           <MenuPicker
             prompt="Border Width"
             selected={selectedBorderWidth || borderWidthDefault}
             onChange={(color) => setSelectedBorderWidth(color === colorDefault ? undefined : color)}
-            collection={borderWidthSelections}
+            collection={menuPickerBorderWidthCollection}
           />
         </View>
 

package/src/FluentTester/TestComponents/Common/AlignmentPicker.tsx

@@ -15,7 +15,12 @@ interface IAlignmentPickerProps {
 export const AlignmentPicker: React.FunctionComponent<IAlignmentPickerProps> = (props: IAlignmentPickerProps) => {
   const { label, onSelectionChange, style } = props;
   const [selectedValue, setSelectedValue] = React.useState<IconAlignment>();
-
+  const alignmentCollection = alignmentValues.map((value) => {
+    return {
+      label: value,
+      value: value,
+    };
+  });
   return (
     <MenuPicker
       style={style}
@@ -26,7 +31,7 @@ export const AlignmentPicker: React.FunctionComponent<IAlignmentPickerProps> = (
         onSelectionChange(alignmentValue);
         setSelectedValue(alignmentValue);
       }}
-      collection={alignmentValues}
+      collection={alignmentCollection}
     />
   );
 };

package/src/FluentTester/TestComponents/Common/MenuPicker.desktop.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
+import { MenuPickerProps, collectionItem } from './MenuPicker';
 import { ButtonV1 as Button } from '@fluentui/react-native';
 import { SvgXml } from 'react-native-svg';
 
@@ -9,23 +10,23 @@ const chevronXml = `
   <path fill='currentColor' d='M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5.5 4.79289L9.64645 0.646447C9.84171 0.451185 10.1583 0.451185 10.3536 0.646447C10.5488 0.841709 10.5488 1.15829 10.3536 1.35355L5.85355 5.85355C5.65829 6.04882 5.34171 6.04882 5.14645 5.85355L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z' />
 </svg>`;
 
-interface MenuPickerProps {
-  prompt?: string;
-  selected?: any;
-  onChange?: (value: any, index?: number) => void;
-  collection?: any[];
-  style?: any;
-}
-
 export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: MenuPickerProps) => {
   const { prompt, selected, onChange, collection } = props;
+
+  let label;
+  collection.forEach((item) => {
+    if (item.value == selected) {
+      label = item.label;
+    }
+  });
+
   return (
     <View style={menuPickerStyles.container}>
       <Text style={menuPickerStyles.prompt}>{prompt}</Text>
       <Menu>
         <MenuTrigger>
           <Button>
-            <Text>{selected}</Text>
+            <Text>{label}</Text>
             <View style={menuPickerStyles.chevronContainer}>
               <SvgXml xml={chevronXml} />
             </View>
@@ -33,9 +34,9 @@ export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: Menu
         </MenuTrigger>
         <MenuPopover>
           <MenuList>
-            {collection.map((value, index) => (
-              <MenuItem onClick={() => onChange(value, index)} key={index}>
-                {value}
+            {collection.map((collectionItem: collectionItem, index: number) => (
+              <MenuItem onClick={() => onChange(collectionItem.value, index)} key={collectionItem.value ?? index}>
+                {collectionItem.label}
               </MenuItem>
             ))}
           </MenuList>

package/src/FluentTester/TestComponents/Common/MenuPicker.tsx

@@ -6,26 +6,38 @@ import { Picker } from '@react-native-picker/picker';
  * MenuPicker uses the community Picker package for iOS/Win32 and our own Picker for Win32/MacOS.
  */
 
-interface MenuPickerProps {
+export interface collectionItem {
+  label: string;
+  value?: string;
+}
+
+export interface MenuPickerProps {
   prompt?: string;
-  selected?: any;
+  selected?: string;
   onChange?: (value: any, index?: number) => void;
-  collection?: any[];
+  collection?: collectionItem[];
   style?: any;
 }
 
 export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: MenuPickerProps) => {
   const { prompt, selected, onChange, collection, style } = props;
+  let selectedItemKey;
+
+  collection.forEach((item) => {
+    if (item.value == selected) {
+      selectedItemKey = item.value;
+    }
+  });
 
   return (
     <Picker
       prompt={prompt}
-      selectedValue={selected}
-      onValueChange={(itemValue: any, index: number) => onChange(itemValue, index)}
+      selectedValue={selectedItemKey}
+      onValueChange={(value: string, index: number) => onChange(value, index)}
       style={{ ...style }}
     >
-      {collection.map((value, index) => (
-        <Picker.Item label={value} key={index} value={value} />
+      {collection.map((item, index) => (
+        <Picker.Item label={item.label} key={index} value={item.value} />
       ))}
     </Picker>
   );

package/src/FluentTester/TestComponents/Common/MenuPicker.windows.tsx

@@ -1,22 +1,15 @@
 export * from './MenuPicker.desktop';
 import * as React from 'react';
 import { Button, Text, View, StyleSheet } from 'react-native';
-
-interface MenuPickerProps {
-  prompt?: string;
-  selected?: any;
-  onChange?: (value: any, index?: number) => void;
-  collection?: any[];
-  style?: any;
-}
+import { MenuPickerProps, collectionItem } from './MenuPicker';
 
 export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: MenuPickerProps) => {
   const { prompt, onChange, collection } = props;
   return (
     <View style={menuPickerStyles.container}>
       <Text style={menuPickerStyles.prompt}>{prompt}</Text>
-      {collection.map((value, index) => (
-        <Button onPress={() => onChange(value, index)} key={index} title={value} />
+      {collection.map((item: collectionItem, index: number) => (
+        <Button onPress={() => onChange(item.value, index)} key={index} title={item.label} />
       ))}
     </View>
   );

package/src/FluentTester/TestComponents/Common/StyledPicker.tsx

@@ -8,5 +8,11 @@ export const StyledPicker = (props) => {
   const { prompt, selected, onChange, collection } = props;
   const theme = useTheme();
   const pickerStyles = { color: theme.colors.inputText as ColorValue, ...commonStyles.header };
-  return <MenuPicker prompt={prompt} style={pickerStyles} selected={selected} onChange={onChange} collection={collection} />;
+  const styleCollection = collection.map((value) => {
+    return {
+      label: value,
+      value: value,
+    };
+  });
+  return <MenuPicker prompt={prompt} style={pickerStyles} selected={selected} onChange={onChange} collection={styleCollection} />;
 };

package/src/FluentTester/TestComponents/Notification/NotificationTest.tsx

@@ -28,8 +28,7 @@ const PrimaryTestWithTitleAndIcon: React.FunctionComponent = () => {
     <Notification
       variant={'primary'}
       icon={iconProps}
-      title="Kat's iPhone X"
-      action="X"
+      title="Kat's iPhoneX"
       onPress={() => {
         console.log('Notification tapped');
       }}
@@ -71,7 +70,6 @@ const WarningTest: React.FunctionComponent = () => {
   return (
     <Notification
       variant={'warning'}
-      action="X"
       onPress={() => {
         console.log('Notification tapped');
       }}

package/src/FluentTester/TestComponents/Persona/StandardUsage.tsx

@@ -21,6 +21,13 @@ const allSizes: WithUndefined<PersonaSize>[] = [
   'size120',
 ];
 
+const allSizesCollection = allSizes.map((size) => {
+  return {
+    label: size,
+    value: size,
+  };
+});
+
 interface ISwitchWithLabelProps {
   label: string;
   value: boolean;
@@ -59,7 +66,7 @@ export const StandardUsage: React.FunctionComponent = () => {
           style={commonStyles.header}
           selected={imageSize || undefinedText}
           onChange={(size: PersonaSize | typeof undefinedText) => setImageSize(size === undefinedText ? undefined : size)}
-          collection={allSizes}
+          collection={allSizesCollection}
         />
       </View>
 

package/src/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.tsx

@@ -3,8 +3,10 @@ import { Platform, View } from 'react-native';
 import { FAB, Text } from '@fluentui/react-native';
 import { commonTestStyles, stackStyle } from '../Common/styles';
 
-const CustomFABNoShadow = FAB.customize({ shadowDepth: undefined });
-const CustomFABShadow64 = FAB.customize({ shadowDepth: 'shadow64' });
+const CustomFABNoShadow = FAB.customize({ shadowToken: undefined });
+const CustomFABShadow64 = FAB.customize({
+  shadowToken: { ambient: { x: 0, y: 0, blur: 8, color: '#00000033' }, key: { x: 0, y: 32, blur: 64, color: '#0000003d' } },
+});
 
 export const ShadowButtonTestSection: React.FunctionComponent = () => {
   if (Platform.OS === 'ios') {

package/src/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { commonTestStyles } from '../Common/styles';
 import { ColorValue, View } from 'react-native';
 import { Text } from '@fluentui/react-native';
-import { Shadow, ShadowDepth, getShadowTokenStyleSet } from '@fluentui-react-native/experimental-shadow';
-import { Theme, useTheme } from '@fluentui-react-native/theme-types';
+import { Shadow, getShadowTokenStyleSet } from '@fluentui-react-native/experimental-shadow';
+import { ShadowToken, useTheme } from '@fluentui-react-native/theme-types';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 import { useFluentTheme } from '@fluentui-react-native/framework';
 
@@ -25,7 +25,8 @@ const getThemedStyles = themedStyleSheet(() => {
 });
 
 interface ShadowTestBoxProps {
-  depth: ShadowDepth;
+  shadowDepthText: string;
+  shadowToken: ShadowToken;
   backgroundColor: ColorValue;
 }
 
@@ -34,7 +35,7 @@ const ShadowTestBox: React.FunctionComponent<ShadowTestBoxProps> = (props: Shado
   const themedStyles = getThemedStyles(theme);
 
   return (
-    <Shadow depth={props.depth}>
+    <Shadow shadowToken={props.shadowToken}>
       <View
         style={[
           commonTestStyles.view,
@@ -44,8 +45,8 @@ const ShadowTestBox: React.FunctionComponent<ShadowTestBoxProps> = (props: Shado
           { backgroundColor: props.backgroundColor },
         ]}
       >
-        <Text variant="bodySemibold">{props.depth}</Text>
-        <Text>{getShadowDescription(props.depth, theme)}</Text>
+        <Text variant="bodySemibold">{props.shadowDepthText}</Text>
+        <Text>{getShadowDescription(props.shadowToken)}</Text>
       </View>
     </Shadow>
   );
@@ -56,24 +57,48 @@ export const ShadowDepthTestSection: React.FunctionComponent = () => {
 
   return (
     <View>
-      <ShadowTestBox depth="shadow2" backgroundColor={theme.colors.background} />
-      <ShadowTestBox depth="shadow4" backgroundColor={theme.colors.background} />
-      <ShadowTestBox depth="shadow8" backgroundColor={theme.colors.background} />
-      <ShadowTestBox depth="shadow16" backgroundColor={theme.colors.background} />
-      <ShadowTestBox depth="shadow28" backgroundColor={theme.colors.background} />
-      <ShadowTestBox depth="shadow64" backgroundColor={theme.colors.background} />
-      <ShadowTestBox depth="shadow2brand" backgroundColor={theme.colors.brandBackground} />
-      <ShadowTestBox depth="shadow4brand" backgroundColor={theme.colors.brandBackground} />
-      <ShadowTestBox depth="shadow8brand" backgroundColor={theme.colors.brandBackground} />
-      <ShadowTestBox depth="shadow16brand" backgroundColor={theme.colors.brandBackground} />
-      <ShadowTestBox depth="shadow28brand" backgroundColor={theme.colors.brandBackground} />
-      <ShadowTestBox depth="shadow64brand" backgroundColor={theme.colors.brandBackground} />
+      <ShadowTestBox shadowDepthText="Shadow 2" shadowToken={theme.shadows.shadow2} backgroundColor={theme.colors.background} />
+      <ShadowTestBox shadowDepthText="Shadow 4" shadowToken={theme.shadows.shadow4} backgroundColor={theme.colors.background} />
+      <ShadowTestBox shadowDepthText="Shadow 8" shadowToken={theme.shadows.shadow8} backgroundColor={theme.colors.background} />
+      <ShadowTestBox shadowDepthText="Shadow 16" shadowToken={theme.shadows.shadow16} backgroundColor={theme.colors.background} />
+      <ShadowTestBox shadowDepthText="Shadow 28" shadowToken={theme.shadows.shadow28} backgroundColor={theme.colors.background} />
+      <ShadowTestBox shadowDepthText="Shadow 64" shadowToken={theme.shadows.shadow64} backgroundColor={theme.colors.background} />
+      <ShadowTestBox
+        shadowDepthText="Brand Shadow 2"
+        shadowToken={theme.shadows.shadow2brand}
+        backgroundColor={theme.colors.brandBackground}
+      />
+      <ShadowTestBox
+        shadowDepthText="Brand Shadow 4"
+        shadowToken={theme.shadows.shadow4brand}
+        backgroundColor={theme.colors.brandBackground}
+      />
+      <ShadowTestBox
+        shadowDepthText="Brand Shadow 8"
+        shadowToken={theme.shadows.shadow8brand}
+        backgroundColor={theme.colors.brandBackground}
+      />
+      <ShadowTestBox
+        shadowDepthText="Brand Shadow 16"
+        shadowToken={theme.shadows.shadow16brand}
+        backgroundColor={theme.colors.brandBackground}
+      />
+      <ShadowTestBox
+        shadowDepthText="Brand Shadow 28"
+        shadowToken={theme.shadows.shadow28brand}
+        backgroundColor={theme.colors.brandBackground}
+      />
+      <ShadowTestBox
+        shadowDepthText="Brand Shadow 64"
+        shadowToken={theme.shadows.shadow64brand}
+        backgroundColor={theme.colors.brandBackground}
+      />
     </View>
   );
 };
 
-function getShadowDescription(depth: ShadowDepth, t: Theme): string {
-  const shadowStyle = getShadowTokenStyleSet(t, depth);
+function getShadowDescription(shadowToken: ShadowToken): string {
+  const shadowStyle = getShadowTokenStyleSet(shadowToken);
 
   return (
     '\nAmbient: ' +

package/src/FluentTester/TestComponents/TextExperimental/CustomizeUsage.tsx

@@ -50,7 +50,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
   const BlockText = () => {
     return (
       <>
-        <Text style={{ textTransform: 'uppercase' }} font="base" weight="medium">
+        <Text style={{ textTransform: 'uppercase' }} font="base" weight="medium" truncate>
           I am going to be truncated since I am a very very very very very very very very very very very very very very very very very very
           very very very very very very very very very very very very very very very very very very very very very very very very very very
           very very very very very very very very very very very very very very very very long block text.

package/src/FluentTester/TestComponents/TextExperimental/PressableUsage.tsx

@@ -18,6 +18,10 @@ export const PressableUsage: React.FunctionComponent = () => {
     Alert.alert('Alert', 'Success!');
   };
 
+  const _onPress3 = (): void => {
+    Alert.alert('Alert', 'onAccessibilityTap invoked!');
+  };
+
   const _onKeyDown2 = (ev: IKeyboardEvent) => {
     if (ev.nativeEvent.key === 'Enter' || ev.nativeEvent.key == ' ') Alert.alert('Alert', 'Success!');
   };
@@ -29,7 +33,14 @@ export const PressableUsage: React.FunctionComponent = () => {
       <Stack style={stackStyle} gap={5}>
         <Text variant={'bodyStandard'}>
           To learn more about microsoft, visit this{' '}
-          <Text variant={'bodyStandard'} color="blue" keyDownEvents={handledNativeKeyboardEvents} onPress={_onPress} onKeyDown={_onKeyDown}>
+          <Text
+            focusable
+            variant={'bodyStandard'}
+            color="blue"
+            keyDownEvents={handledNativeKeyboardEvents}
+            onPress={_onPress}
+            onKeyDown={_onKeyDown}
+          >
             webpage
           </Text>{' '}
           for more details.
@@ -42,6 +53,7 @@ export const PressableUsage: React.FunctionComponent = () => {
             keyDownEvents={handledNativeKeyboardEvents}
             onPress={_onPress2}
             onKeyDown={_onKeyDown2}
+            onAccessibilityTap={_onPress3}
           >
             here
           </Text>{' '}