@fluentui-react-native/tester 0.64.6 → 0.64.9

package/lib-commonjs/FluentTester/TestComponents/Avatar/CustomizedAvatar.js

@@ -62,35 +62,37 @@ var CustomizeUsage = function () {
             react_1.default.createElement(react_native_1.View, { style: styles_2.commonTestStyles.switch },
                 react_1.default.createElement(react_native_1.Text, null, "Transparent Ring"),
                 react_1.default.createElement(react_native_1.Switch, { value: transparent, onValueChange: setTransparent })),
-            react_1.default.createElement(react_native_1.View, null,
-                react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Background color", blurOnSubmit: true, onSubmitEditing: function (e) {
-                        setCoinColor(e.nativeEvent.text);
-                    } }),
-                react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Ring color", blurOnSubmit: true, onSubmitEditing: function (e) {
-                        setRingColor(e.nativeEvent.text);
-                    } }),
-                react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Avatar size", blurOnSubmit: true, onSubmitEditing: function (e) {
-                        setSize(e.nativeEvent.text);
-                    } }),
-                react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Icon size", blurOnSubmit: true, onSubmitEditing: function (e) {
-                        setIconSize(parseInt(e.nativeEvent.text));
-                    } }),
-                react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Ring background color", blurOnSubmit: true, onSubmitEditing: function (e) {
-                        setRingBackgroundColor(e.nativeEvent.text);
-                    } }),
-                react_1.default.createElement(react_native_1.Text, { style: { fontWeight: 'bold' } }, "Font tokens"),
-                react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Initials text color", blurOnSubmit: true, onSubmitEditing: function (e) {
-                        setTextColor(e.nativeEvent.text);
-                    } }),
-                react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Initials size", blurOnSubmit: true, onSubmitEditing: function (e) {
-                        setInitialsSize(parseInt(e.nativeEvent.text));
-                    } }),
-                react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Font weight", blurOnSubmit: true, onSubmitEditing: function (e) {
-                        setFontWeight(e.nativeEvent.text);
-                    } }),
-                react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Font family", blurOnSubmit: true, onSubmitEditing: function (e) {
-                        setFontFamily(e.nativeEvent.text);
-                    } })),
+            react_1.default.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
+                react_1.default.createElement(react_native_1.View, null,
+                    react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Background color", blurOnSubmit: true, onSubmitEditing: function (e) {
+                            setCoinColor(e.nativeEvent.text);
+                        } }),
+                    react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Ring color", blurOnSubmit: true, onSubmitEditing: function (e) {
+                            setRingColor(e.nativeEvent.text);
+                        } }),
+                    react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Avatar size", blurOnSubmit: true, onSubmitEditing: function (e) {
+                            setSize(e.nativeEvent.text);
+                        } }),
+                    react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Icon size", blurOnSubmit: true, onSubmitEditing: function (e) {
+                            setIconSize(parseInt(e.nativeEvent.text));
+                        } }),
+                    react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Ring background color", blurOnSubmit: true, onSubmitEditing: function (e) {
+                            setRingBackgroundColor(e.nativeEvent.text);
+                        } })),
+                react_1.default.createElement(react_native_1.View, { style: { paddingHorizontal: 20 } },
+                    react_1.default.createElement(react_native_1.Text, { style: { fontWeight: 'bold' } }, "Font tokens"),
+                    react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Initials text color", blurOnSubmit: true, onSubmitEditing: function (e) {
+                            setTextColor(e.nativeEvent.text);
+                        } }),
+                    react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Initials size", blurOnSubmit: true, onSubmitEditing: function (e) {
+                            setInitialsSize(parseInt(e.nativeEvent.text));
+                        } }),
+                    react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Font weight", blurOnSubmit: true, onSubmitEditing: function (e) {
+                            setFontWeight(e.nativeEvent.text);
+                        } }),
+                    react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Font family", blurOnSubmit: true, onSubmitEditing: function (e) {
+                            setFontFamily(e.nativeEvent.text);
+                        } }))),
             react_1.default.createElement(react_native_1.Text, null, "These features will be available later"),
             react_1.default.createElement(AlignmentPicker_1.AlignmentPicker, { style: styles_2.commonTestStyles.header, label: "Horizontal icon alignment", onSelectionChange: setHorizontalAlignment }),
             react_1.default.createElement(AlignmentPicker_1.AlignmentPicker, { style: styles_2.commonTestStyles.header, label: "Vertical icon alignment", onSelectionChange: setVerticalAlignment })),

package/lib-commonjs/FluentTester/TestComponents/Avatar/CustomizedAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomizedAvatar.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/CustomizedAvatar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CustomizedAvatar.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/CustomizedAvatar.tsx"],"names":[],"mappings":"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"}

package/lib-commonjs/FluentTester/TestComponents/Avatar/E2EAvatarTest.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const E2EAvatarTest: React.FunctionComponent;
+//# sourceMappingURL=E2EAvatarTest.d.ts.map

package/lib-commonjs/FluentTester/TestComponents/Avatar/E2EAvatarTest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"E2EAvatarTest.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/E2EAvatarTest.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,iBAYjC,CAAC"}

package/lib-commonjs/FluentTester/TestComponents/Avatar/E2EAvatarTest.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.E2EAvatarTest = void 0;
+var tslib_1 = require("tslib");
+var experimental_avatar_1 = require("@fluentui-react-native/experimental-avatar");
+var React = (0, tslib_1.__importStar)(require("react"));
+var react_native_1 = require("react-native");
+var consts_1 = require("./consts");
+var E2EAvatarTest = function () {
+    return (React.createElement(react_native_1.View, null,
+        React.createElement(experimental_avatar_1.JSAvatar, { testID: consts_1.AVATAR_TEST_COMPONENT, accessibilityHint: consts_1.JSAVATAR_ACCESSIBILITY_HINT, accessibilityLabel: consts_1.JSAVATAR_ACCESSIBILITY_LABEL, accessibilityRole: consts_1.JSAVATAR_ACCESSIBILITY_ROLE }),
+        React.createElement(experimental_avatar_1.JSAvatar, { testID: consts_1.AVATAR_SECONDARY_TEST_COMPONENT, name: "Richard", badge: { status: 'available' } })));
+};
+exports.E2EAvatarTest = E2EAvatarTest;
+//# sourceMappingURL=E2EAvatarTest.js.map

package/lib-commonjs/FluentTester/TestComponents/Avatar/E2EAvatarTest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"E2EAvatarTest.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/E2EAvatarTest.tsx"],"names":[],"mappings":";;;;AAAA,kFAAsE;AACtE,wDAA+B;AAC/B,6CAAoC;AACpC,mCAMkB;AAEX,IAAM,aAAa,GAA4B;IACpD,OAAO,CACL,oBAAC,mBAAI;QACH,oBAAC,8BAAQ,IACP,MAAM,EAAE,8BAAqB,EAC7B,iBAAiB,EAAE,oCAA2B,EAC9C,kBAAkB,EAAE,qCAA4B,EAChD,iBAAiB,EAAE,oCAA2B,GAC9C;QACF,oBAAC,8BAAQ,IAAC,MAAM,EAAE,wCAA+B,EAAE,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,GAAI,CAC/F,CACR,CAAC;AACJ,CAAC,CAAC;AAZW,QAAA,aAAa,iBAYxB"}

package/lib-commonjs/FluentTester/TestComponents/Avatar/JSAvatarTest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JSAvatarTest.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/JSAvatarTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAahC,CAAC"}
+{"version":3,"file":"JSAvatarTest.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/JSAvatarTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuB/B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAahC,CAAC"}

package/lib-commonjs/FluentTester/TestComponents/Avatar/JSAvatarTest.js

@@ -7,6 +7,7 @@ var consts_1 = require("./consts");
 var Test_1 = require("../Test");
 var BasicAvatar_1 = require("./BasicAvatar");
 var CustomizedAvatar_1 = require("./CustomizedAvatar");
+var E2EAvatarTest_1 = require("./E2EAvatarTest");
 var avatarSections = [
     {
         name: 'Standard Usage',
@@ -17,6 +18,10 @@ var avatarSections = [
         name: 'Customize Usage',
         component: CustomizedAvatar_1.CustomizeUsage,
     },
+    {
+        name: 'Avatar E2E',
+        component: E2EAvatarTest_1.E2EAvatarTest,
+    },
 ];
 var JSAvatarTest = function () {
     var status = {

package/lib-commonjs/FluentTester/TestComponents/Avatar/JSAvatarTest.js.map

@@ -1 +1 @@
-{"version":3,"file":"JSAvatarTest.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/JSAvatarTest.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,mCAA6C;AAC7C,gCAA4D;AAC5D,6CAA8C;AAC9C,uDAAoD;AAEpD,IAAM,cAAc,GAAkB;IACpC;QACE,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,0BAAiB;QACzB,SAAS,EAAE,2BAAa;KACzB;IACD;QACE,IAAI,EAAE,iBAAiB;QACvB,SAAS,EAAE,iCAAc;KAC1B;CACF,CAAC;AAEK,IAAM,YAAY,GAA4B;IACnD,IAAM,MAAM,GAAmB;QAC7B,WAAW,EAAE,cAAc;QAC3B,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,MAAM;QACjB,WAAW,EAAE,cAAc;QAC3B,aAAa,EAAE,SAAS;KACzB,CAAC;IAEF,IAAM,WAAW,GACf,yRAAyR,CAAC;IAE5R,OAAO,oBAAC,WAAI,IAAC,IAAI,EAAC,aAAa,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AACzG,CAAC,CAAC;AAbW,QAAA,YAAY,gBAavB"}
+{"version":3,"file":"JSAvatarTest.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/JSAvatarTest.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,mCAA6C;AAC7C,gCAA4D;AAC5D,6CAA8C;AAC9C,uDAAoD;AACpD,iDAAgD;AAEhD,IAAM,cAAc,GAAkB;IACpC;QACE,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,0BAAiB;QACzB,SAAS,EAAE,2BAAa;KACzB;IACD;QACE,IAAI,EAAE,iBAAiB;QACvB,SAAS,EAAE,iCAAc;KAC1B;IACD;QACE,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,6BAAa;KACzB;CACF,CAAC;AAEK,IAAM,YAAY,GAA4B;IACnD,IAAM,MAAM,GAAmB;QAC7B,WAAW,EAAE,cAAc;QAC3B,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,MAAM;QACjB,WAAW,EAAE,cAAc;QAC3B,aAAa,EAAE,SAAS;KACzB,CAAC;IAEF,IAAM,WAAW,GACf,yRAAyR,CAAC;IAE5R,OAAO,oBAAC,WAAI,IAAC,IAAI,EAAC,aAAa,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AACzG,CAAC,CAAC;AAbW,QAAA,YAAY,gBAavB"}

package/lib-commonjs/FluentTester/TestComponents/Avatar/consts.d.ts

@@ -1,4 +1,15 @@
 export declare const HOMEPAGE_AVATAR_BUTTON = "Homepage_Avatar_Button";
 export declare const AVATAR_TESTPAGE = "Avatar_TestPage";
 export declare const JSAVATAR_TESTPAGE = "Avatar_Win32_TestPage";
+export declare const JSAVATAR_ACCESSIBILITY_LABEL = "E2E Avatar Accessibility label";
+export declare const JSAVATAR_ACCESSIBILITY_LABEL_BY_NAME = "Richard, available";
+export declare const JSAVATAR_ACCESSIBILITY_HINT = "E2E Avatar Accessibility hint";
+export declare const JSAVATAR_ACCESSIBILITY_ROLE = "link";
+export declare const AVATAR_TEST_COMPONENT = "AVATAR_TEST_COMPONENT";
+export declare const AVATAR_SECONDARY_TEST_COMPONENT = "AVATAR_SECONDARY_TEST_COMPONENT";
+export declare const ACCESSIBILITY_LABEL_ATTR = "Name";
+export declare const ACCESSIBILITY_HINT_ATTRIBUTE = "HelpText";
+export declare const ACCESSIBILITY_ROLE_ATTRIBUTE = "ControlType";
+export declare const ACCESSIBILITY_ROLE_IMAGE = "ControlType.Image";
+export declare const ACCESSIBILITY_ROLE_LINK = "ControlType.HyperLink";
 //# sourceMappingURL=consts.d.ts.map

package/lib-commonjs/FluentTester/TestComponents/Avatar/consts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAC/D,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,iBAAiB,0BAA0B,CAAC"}
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAC/D,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,iBAAiB,0BAA0B,CAAC;AAEzD,eAAO,MAAM,4BAA4B,mCAAmC,CAAC;AAC7E,eAAO,MAAM,oCAAoC,uBAAuB,CAAC;AACzE,eAAO,MAAM,2BAA2B,kCAAkC,CAAC;AAC3E,eAAO,MAAM,2BAA2B,SAAS,CAAC;AAElD,eAAO,MAAM,qBAAqB,0BAA0B,CAAC;AAC7D,eAAO,MAAM,+BAA+B,oCAAoC,CAAC;AAEjF,eAAO,MAAM,wBAAwB,SAAS,CAAC;AAC/C,eAAO,MAAM,4BAA4B,aAAa,CAAC;AACvD,eAAO,MAAM,4BAA4B,gBAAgB,CAAC;AAC1D,eAAO,MAAM,wBAAwB,sBAAsB,CAAC;AAC5D,eAAO,MAAM,uBAAuB,0BAA0B,CAAC"}

package/lib-commonjs/FluentTester/TestComponents/Avatar/consts.js

@@ -1,7 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.JSAVATAR_TESTPAGE = exports.AVATAR_TESTPAGE = exports.HOMEPAGE_AVATAR_BUTTON = void 0;
+exports.ACCESSIBILITY_ROLE_LINK = exports.ACCESSIBILITY_ROLE_IMAGE = exports.ACCESSIBILITY_ROLE_ATTRIBUTE = exports.ACCESSIBILITY_HINT_ATTRIBUTE = exports.ACCESSIBILITY_LABEL_ATTR = exports.AVATAR_SECONDARY_TEST_COMPONENT = exports.AVATAR_TEST_COMPONENT = exports.JSAVATAR_ACCESSIBILITY_ROLE = exports.JSAVATAR_ACCESSIBILITY_HINT = exports.JSAVATAR_ACCESSIBILITY_LABEL_BY_NAME = exports.JSAVATAR_ACCESSIBILITY_LABEL = exports.JSAVATAR_TESTPAGE = exports.AVATAR_TESTPAGE = exports.HOMEPAGE_AVATAR_BUTTON = void 0;
 exports.HOMEPAGE_AVATAR_BUTTON = 'Homepage_Avatar_Button';
 exports.AVATAR_TESTPAGE = 'Avatar_TestPage';
 exports.JSAVATAR_TESTPAGE = 'Avatar_Win32_TestPage';
+exports.JSAVATAR_ACCESSIBILITY_LABEL = 'E2E Avatar Accessibility label';
+exports.JSAVATAR_ACCESSIBILITY_LABEL_BY_NAME = 'Richard, available';
+exports.JSAVATAR_ACCESSIBILITY_HINT = 'E2E Avatar Accessibility hint';
+exports.JSAVATAR_ACCESSIBILITY_ROLE = 'link';
+exports.AVATAR_TEST_COMPONENT = 'AVATAR_TEST_COMPONENT';
+exports.AVATAR_SECONDARY_TEST_COMPONENT = 'AVATAR_SECONDARY_TEST_COMPONENT';
+exports.ACCESSIBILITY_LABEL_ATTR = 'Name';
+exports.ACCESSIBILITY_HINT_ATTRIBUTE = 'HelpText';
+exports.ACCESSIBILITY_ROLE_ATTRIBUTE = 'ControlType';
+exports.ACCESSIBILITY_ROLE_IMAGE = 'ControlType.Image';
+exports.ACCESSIBILITY_ROLE_LINK = 'ControlType.HyperLink';
 //# sourceMappingURL=consts.js.map

package/lib-commonjs/FluentTester/TestComponents/Avatar/consts.js.map

@@ -1 +1 @@
-{"version":3,"file":"consts.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/consts.ts"],"names":[],"mappings":";;;AAAa,QAAA,sBAAsB,GAAG,wBAAwB,CAAC;AAClD,QAAA,eAAe,GAAG,iBAAiB,CAAC;AACpC,QAAA,iBAAiB,GAAG,uBAAuB,CAAC"}
+{"version":3,"file":"consts.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/consts.ts"],"names":[],"mappings":";;;AAAa,QAAA,sBAAsB,GAAG,wBAAwB,CAAC;AAClD,QAAA,eAAe,GAAG,iBAAiB,CAAC;AACpC,QAAA,iBAAiB,GAAG,uBAAuB,CAAC;AAE5C,QAAA,4BAA4B,GAAG,gCAAgC,CAAC;AAChE,QAAA,oCAAoC,GAAG,oBAAoB,CAAC;AAC5D,QAAA,2BAA2B,GAAG,+BAA+B,CAAC;AAC9D,QAAA,2BAA2B,GAAG,MAAM,CAAC;AAErC,QAAA,qBAAqB,GAAG,uBAAuB,CAAC;AAChD,QAAA,+BAA+B,GAAG,iCAAiC,CAAC;AAEpE,QAAA,wBAAwB,GAAG,MAAM,CAAC;AAClC,QAAA,4BAA4B,GAAG,UAAU,CAAC;AAC1C,QAAA,4BAA4B,GAAG,aAAa,CAAC;AAC7C,QAAA,wBAAwB,GAAG,mBAAmB,CAAC;AAC/C,QAAA,uBAAuB,GAAG,uBAAuB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.64.6",
+  "version": "0.64.9",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -37,21 +37,21 @@
     "@fluentui-react-native/experimental-drawer": ">=0.1.13 <1.0.0",
     "@fluentui-react-native/experimental-native-date-picker": ">=0.4.3 <1.0.0",
     "@fluentui-react-native/experimental-expander": "0.3.33",
-    "@fluentui-react-native/experimental-menu-button": ">=0.3.46 <1.0.0",
+    "@fluentui-react-native/experimental-menu-button": ">=0.3.47 <1.0.0",
     "@fluentui-react-native/experimental-shimmer": "0.6.33",
     "@fluentui-react-native/experimental-tabs": "0.4.51",
     "@fluentui-react-native/experimental-text": ">=0.9.0 <1.0.0",
     "@fluentui-react-native/framework": ">=0.7.30 <1.0.0",
     "@fluentui-react-native/icon": "0.12.1",
     "@fluentui-react-native/interactive-hooks": ">=0.16.3 <1.0.0",
-    "@fluentui-react-native/menu": ">=0.14.5 <1.0.0",
+    "@fluentui-react-native/menu": ">=0.14.6 <1.0.0",
     "@fluentui-react-native/stack": ">=0.6.29 <1.0.0",
     "@fluentui-react-native/theme": ">=0.6.11 <1.0.0",
     "@fluentui-react-native/theme-types": ">=0.17.0 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.3.3",
     "@fluentui-react-native/theming-utils": ">=0.13.0 <1.0.0",
     "@fluentui-react-native/win32-theme": ">=0.19.0 <1.0.0",
-    "@fluentui/react-native": ">=0.29.15 <1.0.0",
+    "@fluentui/react-native": ">=0.30.1 <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/pages/AvatarPageObject.ts

@@ -1,7 +1,39 @@
-import { JSAVATAR_TESTPAGE, HOMEPAGE_AVATAR_BUTTON } from '../../../FluentTester/TestComponents/Avatar/consts';
+import {
+  JSAVATAR_TESTPAGE,
+  HOMEPAGE_AVATAR_BUTTON,
+  AVATAR_TEST_COMPONENT,
+  AVATAR_SECONDARY_TEST_COMPONENT,
+} from '../../../FluentTester/TestComponents/Avatar/consts';
 import { BasePage, By } from '../../common/BasePage.win';
 
+export const enum AvatarComponentSelector {
+  PrimaryComponent, //this._primaryComponent
+  SecondaryComponent, //this._secondaryComponent
+}
 class AvatarPageObject extends BasePage {
+  getPrimaryComponentAttribute(attribute: string): string {
+    return this._primaryComponent.getAttribute(attribute);
+  }
+  getSecondaryComponentAttribute(attribute: string): string {
+    return this._secondaryComponent.getAttribute(attribute);
+  }
+  getAvatarAccessibilityLabel(componentSelector: AvatarComponentSelector): string {
+    return componentSelector == AvatarComponentSelector.SecondaryComponent
+      ? this._secondaryComponent.getAttribute('Name')
+      : this._primaryComponent.getAttribute('Name');
+  }
+
+  getAvatarAccessibilityHint(componentSelector: AvatarComponentSelector): string {
+    return componentSelector == AvatarComponentSelector.SecondaryComponent
+      ? this._secondaryComponent.getAttribute('HelpText')
+      : this._primaryComponent.getAttribute('HelpText');
+  }
+
+  getAvatarAccessibilityRole(componentSelector: AvatarComponentSelector): string {
+    return componentSelector == AvatarComponentSelector.SecondaryComponent
+      ? this._secondaryComponent.getAttribute('ControlType')
+      : this._primaryComponent.getAttribute('ControlType');
+  }
   /*****************************************/
   /**************** Getters ****************/
   /*****************************************/
@@ -12,6 +44,14 @@ class AvatarPageObject extends BasePage {
   get _pageButton() {
     return By(HOMEPAGE_AVATAR_BUTTON);
   }
+
+  get _primaryComponent() {
+    return By(AVATAR_TEST_COMPONENT);
+  }
+
+  get _secondaryComponent() {
+    return By(AVATAR_SECONDARY_TEST_COMPONENT);
+  }
 }
 
 export default new AvatarPageObject();

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

@@ -1,6 +1,16 @@
 import NavigateAppPage from '../../common/NavigateAppPage.win';
 import AvatarPageObject from '../pages/AvatarPageObject';
 import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+import {
+  JSAVATAR_ACCESSIBILITY_LABEL,
+  JSAVATAR_ACCESSIBILITY_LABEL_BY_NAME,
+  JSAVATAR_ACCESSIBILITY_HINT,
+  ACCESSIBILITY_LABEL_ATTR,
+  ACCESSIBILITY_HINT_ATTRIBUTE,
+  ACCESSIBILITY_ROLE_ATTRIBUTE,
+  ACCESSIBILITY_ROLE_IMAGE,
+  ACCESSIBILITY_ROLE_LINK,
+} from '../../../FluentTester/TestComponents/Avatar/consts';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Avatar Testing Initialization', function () {
@@ -22,3 +32,28 @@ describe('Avatar Testing Initialization', function () {
     expect(AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
   });
 });
+
+describe('Avatar Accessibility Testing', () => {
+  beforeEach(() => {
+    AvatarPageObject.scrollToTestElement();
+    AvatarPageObject.waitForPrimaryElementDisplayed(PAGE_TIMEOUT);
+  });
+  afterEach(() => {
+    expect(AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
+  });
+  it('Validate accessibilityLabel', () => {
+    expect(AvatarPageObject.getPrimaryComponentAttribute(ACCESSIBILITY_LABEL_ATTR)).toEqual(JSAVATAR_ACCESSIBILITY_LABEL);
+  });
+  it('Validate accessibilityLabel from `name` prop', () => {
+    expect(AvatarPageObject.getSecondaryComponentAttribute(ACCESSIBILITY_LABEL_ATTR)).toEqual(JSAVATAR_ACCESSIBILITY_LABEL_BY_NAME);
+  });
+  it('Validate accessibilityHint', () => {
+    expect(AvatarPageObject.getPrimaryComponentAttribute(ACCESSIBILITY_HINT_ATTRIBUTE)).toEqual(JSAVATAR_ACCESSIBILITY_HINT);
+  });
+  it('Validate accessibilityRole', () => {
+    expect(AvatarPageObject.getPrimaryComponentAttribute(ACCESSIBILITY_ROLE_ATTRIBUTE)).toEqual(ACCESSIBILITY_ROLE_LINK);
+  });
+  it('Validate default accessibilityRole', () => {
+    expect(AvatarPageObject.getSecondaryComponentAttribute(ACCESSIBILITY_ROLE_ATTRIBUTE)).toEqual(ACCESSIBILITY_ROLE_IMAGE);
+  });
+});

package/src/FluentTester/TestComponents/Avatar/CustomizedAvatar.tsx

@@ -70,84 +70,88 @@ export const CustomizeUsage: React.FunctionComponent = () => {
           <Switch value={transparent} onValueChange={setTransparent} />
         </View>
 
-        <View>
-          <TextInput
-            style={[commonStyles.textBox]}
-            placeholder="Background color"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setCoinColor(e.nativeEvent.text);
-            }}
-          />
+        <View style={{ flexDirection: 'row' }}>
+          <View>
+            <TextInput
+              style={[commonStyles.textBox]}
+              placeholder="Background color"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setCoinColor(e.nativeEvent.text);
+              }}
+            />
 
-          <TextInput
-            style={[commonStyles.textBox]}
-            placeholder="Ring color"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setRingColor(e.nativeEvent.text);
-            }}
-          />
+            <TextInput
+              style={[commonStyles.textBox]}
+              placeholder="Ring color"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setRingColor(e.nativeEvent.text);
+              }}
+            />
 
-          <TextInput
-            style={[commonStyles.textBox]}
-            placeholder="Avatar size"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setSize(e.nativeEvent.text);
-            }}
-          />
+            <TextInput
+              style={[commonStyles.textBox]}
+              placeholder="Avatar size"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setSize(e.nativeEvent.text);
+              }}
+            />
 
-          <TextInput
-            style={[commonStyles.textBox]}
-            placeholder="Icon size"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setIconSize(parseInt(e.nativeEvent.text));
-            }}
-          />
+            <TextInput
+              style={[commonStyles.textBox]}
+              placeholder="Icon size"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setIconSize(parseInt(e.nativeEvent.text));
+              }}
+            />
 
-          <TextInput
-            style={[commonStyles.textBox]}
-            placeholder="Ring background color"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setRingBackgroundColor(e.nativeEvent.text);
-            }}
-          />
-          <Text style={{ fontWeight: 'bold' }}>Font tokens</Text>
-          <TextInput
-            style={[commonStyles.textBox]}
-            placeholder="Initials text color"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setTextColor(e.nativeEvent.text);
-            }}
-          />
-          <TextInput
-            style={[commonStyles.textBox]}
-            placeholder="Initials size"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setInitialsSize(parseInt(e.nativeEvent.text));
-            }}
-          />
-          <TextInput
-            style={[commonStyles.textBox]}
-            placeholder="Font weight"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setFontWeight(e.nativeEvent.text);
-            }}
-          />
-          <TextInput
-            style={[commonStyles.textBox]}
-            placeholder="Font family"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setFontFamily(e.nativeEvent.text);
-            }}
-          />
+            <TextInput
+              style={[commonStyles.textBox]}
+              placeholder="Ring background color"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setRingBackgroundColor(e.nativeEvent.text);
+              }}
+            />
+          </View>
+          <View style={{ paddingHorizontal: 20 }}>
+            <Text style={{ fontWeight: 'bold' }}>Font tokens</Text>
+            <TextInput
+              style={[commonStyles.textBox]}
+              placeholder="Initials text color"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setTextColor(e.nativeEvent.text);
+              }}
+            />
+            <TextInput
+              style={[commonStyles.textBox]}
+              placeholder="Initials size"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setInitialsSize(parseInt(e.nativeEvent.text));
+              }}
+            />
+            <TextInput
+              style={[commonStyles.textBox]}
+              placeholder="Font weight"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setFontWeight(e.nativeEvent.text);
+              }}
+            />
+            <TextInput
+              style={[commonStyles.textBox]}
+              placeholder="Font family"
+              blurOnSubmit={true}
+              onSubmitEditing={(e) => {
+                setFontFamily(e.nativeEvent.text);
+              }}
+            />
+          </View>
         </View>
 
         <Text>These features will be available later</Text>

package/src/FluentTester/TestComponents/Avatar/E2EAvatarTest.tsx

@@ -0,0 +1,24 @@
+import { JSAvatar } from '@fluentui-react-native/experimental-avatar';
+import * as React from 'react';
+import { View } from 'react-native';
+import {
+  JSAVATAR_ACCESSIBILITY_LABEL,
+  JSAVATAR_ACCESSIBILITY_HINT,
+  JSAVATAR_ACCESSIBILITY_ROLE,
+  AVATAR_TEST_COMPONENT,
+  AVATAR_SECONDARY_TEST_COMPONENT,
+} from './consts';
+
+export const E2EAvatarTest: React.FunctionComponent = () => {
+  return (
+    <View>
+      <JSAvatar
+        testID={AVATAR_TEST_COMPONENT}
+        accessibilityHint={JSAVATAR_ACCESSIBILITY_HINT}
+        accessibilityLabel={JSAVATAR_ACCESSIBILITY_LABEL}
+        accessibilityRole={JSAVATAR_ACCESSIBILITY_ROLE}
+      />
+      <JSAvatar testID={AVATAR_SECONDARY_TEST_COMPONENT} name="Richard" badge={{ status: 'available' }} />
+    </View>
+  );
+};

package/src/FluentTester/TestComponents/Avatar/JSAvatarTest.tsx

@@ -3,6 +3,7 @@ import { JSAVATAR_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { StandardUsage } from './BasicAvatar';
 import { CustomizeUsage } from './CustomizedAvatar';
+import { E2EAvatarTest } from './E2EAvatarTest';
 
 const avatarSections: TestSection[] = [
   {
@@ -14,6 +15,10 @@ const avatarSections: TestSection[] = [
     name: 'Customize Usage',
     component: CustomizeUsage,
   },
+  {
+    name: 'Avatar E2E',
+    component: E2EAvatarTest,
+  },
 ];
 
 export const JSAvatarTest: React.FunctionComponent = () => {

package/src/FluentTester/TestComponents/Avatar/consts.ts

@@ -1,3 +1,17 @@
 export const HOMEPAGE_AVATAR_BUTTON = 'Homepage_Avatar_Button';
 export const AVATAR_TESTPAGE = 'Avatar_TestPage';
 export const JSAVATAR_TESTPAGE = 'Avatar_Win32_TestPage';
+
+export const JSAVATAR_ACCESSIBILITY_LABEL = 'E2E Avatar Accessibility label';
+export const JSAVATAR_ACCESSIBILITY_LABEL_BY_NAME = 'Richard, available';
+export const JSAVATAR_ACCESSIBILITY_HINT = 'E2E Avatar Accessibility hint';
+export const JSAVATAR_ACCESSIBILITY_ROLE = 'link';
+
+export const AVATAR_TEST_COMPONENT = 'AVATAR_TEST_COMPONENT';
+export const AVATAR_SECONDARY_TEST_COMPONENT = 'AVATAR_SECONDARY_TEST_COMPONENT';
+
+export const ACCESSIBILITY_LABEL_ATTR = 'Name';
+export const ACCESSIBILITY_HINT_ATTRIBUTE = 'HelpText';
+export const ACCESSIBILITY_ROLE_ATTRIBUTE = 'ControlType';
+export const ACCESSIBILITY_ROLE_IMAGE = 'ControlType.Image';
+export const ACCESSIBILITY_ROLE_LINK = 'ControlType.HyperLink';