@fluentui-react-native/tester 0.102.3 → 0.103.1

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

@@ -1,6 +1,6 @@
 import NavigateAppPage from '../../common/NavigateAppPage';
 import TextPageObject from '../pages/TextPageObject';
-import { ComponentSelector, Platform } from '../../common/BasePage';
+import { ComponentSelector } from '../../common/BasePage';
 import { TEXT_A11Y_ROLE, PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
 import { TEXT_ACCESSIBILITY_LABEL, TEXT_COMPONENT_CONTENT } from '../../../TestComponents/Text/consts';
 
@@ -12,10 +12,6 @@ describe('Text Testing Initialization', function () {
   });
 
   it('Click and navigate to Text test page', async () => {
-    /* Scroll to component test page button in scrollview if not already visible*/
-    await TextPageObject.scrollToComponentButton(Platform.Win32);
-    await TextPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
-
     /* Click on component button to navigate to test page */
     await NavigateAppPage.clickAndGoToTextPage();
     await TextPageObject.waitForPageDisplayed(PAGE_TIMEOUT);

package/src/E2E/TextExperimental/specs/ExperimentalText.spec.ios.ts

@@ -1,7 +1,7 @@
 import NavigateAppPage from '../../common/NavigateAppPage';
 import ExperimentalTextPageObject from '../pages/ExperimentalTextPageObject.win';
 import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
-import { Platform } from '../../common/BasePage';
+import { MobilePlatform } from '../../common/BasePage';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Experimental Text Testing Initialization', function () {
@@ -11,7 +11,7 @@ describe('Experimental Text Testing Initialization', function () {
   });
 
   it('Click and navigate to Experimental Text test page', async () => {
-    await ExperimentalTextPageObject.scrollToComponentButton(Platform.iOS);
+    await ExperimentalTextPageObject.mobileScrollToComponentButton(MobilePlatform.iOS);
     await ExperimentalTextPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
 
     /* Click on component button to navigate to test page */

package/src/E2E/TextExperimental/specs/ExperimentalText.spec.win.ts

@@ -1,7 +1,6 @@
 import NavigateAppPage from '../../common/NavigateAppPage';
 import ExperimentalTextPageObject from '../pages/ExperimentalTextPageObject.win';
 import { TEXT_A11Y_ROLE, PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
-import { Platform } from '../../common/BasePage';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Experimental Text Testing Initialization', function () {
@@ -11,10 +10,6 @@ describe('Experimental Text Testing Initialization', function () {
   });
 
   it('Click and navigate to Experimental Text test page', async () => {
-    /* Scroll to component test page button in scrollview if not already visible*/
-    await ExperimentalTextPageObject.scrollToComponentButton(Platform.Win32);
-    await ExperimentalTextPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
-
     /* Click on component button to navigate to test page */
     await NavigateAppPage.clickAndGoToExperimentalTextPage();
     await ExperimentalTextPageObject.waitForPageDisplayed(PAGE_TIMEOUT);

package/src/E2E/Theme/specs/Theme.spec.ios.ts

@@ -1,7 +1,7 @@
 import NavigateAppPage from '../../common/NavigateAppPage';
 import ThemePageObject from '../pages/ThemePageObject.win';
 import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
-import { Platform } from '../../common/BasePage';
+import { MobilePlatform } from '../../common/BasePage';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Theme Testing Initialization', function () {
@@ -11,7 +11,7 @@ describe('Theme Testing Initialization', function () {
   });
 
   it('Click and navigate to Theme test page', async () => {
-    await ThemePageObject.scrollToComponentButton(Platform.iOS);
+    await ThemePageObject.mobileScrollToComponentButton(MobilePlatform.iOS);
     await ThemePageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
 
     /* Click on component button to navigate to test page */

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

@@ -1,7 +1,6 @@
 import NavigateAppPage from '../../common/NavigateAppPage';
 import ThemePageObject from '../pages/ThemePageObject.win';
 import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
-import { Platform } from '../../common/BasePage';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Theme Testing Initialization', function () {
@@ -11,9 +10,6 @@ describe('Theme Testing Initialization', function () {
   });
 
   it('Click and navigate to Theme test page', async () => {
-    await ThemePageObject.scrollToComponentButton(Platform.Win32);
-    await ThemePageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
-
     /* Click on component button to navigate to test page */
     await NavigateAppPage.clickAndGoToThemePage();
     await ThemePageObject.waitForPageDisplayed(PAGE_TIMEOUT);

package/src/E2E/Tokens/specs/Tokens.spec.ios.ts

@@ -1,7 +1,7 @@
 import NavigateAppPage from '../../common/NavigateAppPage';
 import TokenPageObject from '../pages/TokensPageObject.win';
 import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
-import { Platform } from '../../common/BasePage';
+import { MobilePlatform } from '../../common/BasePage';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Tokens Testing Initialization', function () {
@@ -11,7 +11,7 @@ describe('Tokens Testing Initialization', function () {
   });
 
   it('Click and navigate to Tokens test page', async () => {
-    await TokenPageObject.scrollToComponentButton(Platform.iOS);
+    await TokenPageObject.mobileScrollToComponentButton(MobilePlatform.iOS);
     await TokenPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
 
     /* Click on component button to navigate to test page */

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

@@ -1,7 +1,6 @@
 import NavigateAppPage from '../../common/NavigateAppPage';
 import TokenPageObject from '../pages/TokensPageObject.win';
 import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
-import { Platform } from '../../common/BasePage';
 
 // Before testing begins, allow up to 60 seconds for app to open
 describe('Tokens Testing Initialization', function () {
@@ -11,10 +10,6 @@ describe('Tokens Testing Initialization', function () {
   });
 
   it('Click and navigate to Tokens test page', async () => {
-    /* Scroll to component test page button in scrollview if not already visible*/
-    await TokenPageObject.scrollToComponentButton(Platform.Win32);
-    await TokenPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
-
     /* Click on component button to navigate to test page */
     await NavigateAppPage.clickAndGoToTokensPage();
     await TokenPageObject.waitForPageDisplayed(PAGE_TIMEOUT);

package/src/E2E/common/BasePage.ts

@@ -18,13 +18,19 @@ export const enum ComponentSelector {
   Secondary, // this._secondaryComponent
 }
 
-export const enum Platform {
+export const enum MobilePlatform {
+  iOS = 0,
+  Android,
+}
+
+export const enum NativePlatform {
   Win32 = 0,
-  iOS,
+  Windows,
   macOS,
-  Android,
 }
 
+export type Platform = MobilePlatform | NativePlatform;
+
 /****************************** IMPORTANT! PLEASE READ! **************************************************
  * Every component's page object extends this. We can assume each test page will interact with at least
  * two UI elements, so we'll add integration for two UI elements in this file (See *Getters* section below).
@@ -72,8 +78,9 @@ export class BasePage {
   }
 
   /* Scrolls until the desired test page's button is displayed. We use the scroll viewer UI element as the point to start scrolling.
-   * We use a negative number as the Y-coordinate because that enables us to scroll downwards */
-  async scrollToComponentButton(platform: Platform): Promise<void> {
+   * We use a negative number as the Y-coordinate because that enables us to scroll downwards.
+   * There are no need for win32 and macos cases, as the click command automatically scrolls the element into view. */
+  async mobileScrollToComponentButton(platform: MobilePlatform): Promise<void> {
     if (await (await this._pageButton).isDisplayed()) {
       return;
     }
@@ -82,23 +89,7 @@ export class BasePage {
       'Could not scroll to the ' + this._pageName + "'s Button. Please see Pipeline artifacts for more debugging information.";
 
     switch (platform) {
-      case Platform.Win32: {
-        const scrollDownKeys = [Keys.PAGE_DOWN];
-        await browser.waitUntil(
-          async () => {
-            await (await this._firstTestPageButton).addValue(scrollDownKeys);
-            scrollDownKeys.push(Keys.PAGE_DOWN);
-            return await (await this._pageButton).isDisplayed();
-          },
-          {
-            timeout: this.waitForUiEvent,
-            timeoutMsg: errorMsg,
-          },
-        );
-        break;
-      }
-
-      case Platform.iOS: {
+      case MobilePlatform.iOS: {
         await browser.waitUntil(
           async () => {
             await driver.execute('mobile: scroll', { direction: 'down' });
@@ -111,13 +102,8 @@ export class BasePage {
         );
         break;
       }
-
-      case Platform.macOS:
-        // Not needed for macOS. It automatically scrolls
-        break;
-
       default:
-      case Platform.Android:
+      case MobilePlatform.Android:
         // Todo
         break;
     }
@@ -208,21 +194,6 @@ export class BasePage {
     return windowHandles.length > 1;
   }
 
-  /* Finds the first test page button in the ScrollView */
-  async SetFirstScrollViewButtonChild() {
-    const TestChildren = await (await this._testPageButtonScrollViewer).$$('//*');
-    const reg = new RegExp('Homepage_[a-zA-Z]*_Button');
-
-    for (const child of TestChildren) {
-      const autoId = await child.getAttribute('AutomationId');
-      if (autoId && autoId !== TESTPAGE_BUTTONS_SCROLLVIEWER && autoId.match(reg)) {
-        return await child;
-      }
-    }
-
-    return null;
-  }
-
   /*****************************************/
   /**************** Getters ****************/
   /*****************************************/
@@ -269,10 +240,6 @@ export class BasePage {
     return By(TESTPAGE_BUTTONS_SCROLLVIEWER);
   }
 
-  get _firstTestPageButton() {
-    return this.SetFirstScrollViewButtonChild();
-  }
-
   /****************** Error Messages ******************/
   get ERRORMESSAGE_SUFFIX(): string {
     return 'Please review logs and error screenshots for more information.';

package/src/E2E/common/NavigateAppPage.ts

@@ -11,6 +11,7 @@ import { HOMEPAGE_FOCUSTRAPZONE_BUTTON } from '../../TestComponents/FocusTrapZon
 import { HOMEPAGE_FOCUSZONE_BUTTON } from '../../TestComponents/FocusZone/consts';
 import { HOMEPAGE_ICON_BUTTON } from '../../TestComponents/Icon/consts';
 import { HOMEPAGE_LINK_BUTTON } from '../../TestComponents/Link/consts';
+import { HOMEPAGE_EXPERIMENTAL_LINK_BUTTON } from '../../TestComponents/LinkExperimental/consts';
 import { HOMEPAGE_MENU_BUTTON } from '../../TestComponents/Menu/consts';
 import { HOMEPAGE_MENUBUTTON_BUTTON } from '../../TestComponents/MenuButton/consts';
 import { HOMEPAGE_EXPERIMENTAL_MENU_BUTTON } from '../../TestComponents/MenuButtonExperimental/consts';
@@ -79,6 +80,10 @@ class NavigateAppPage extends BasePage {
     await this.linkPage.click();
   }
 
+  async clickAndGoToLinkExperimentalPage() {
+    await this.linkExperimentalPage.click();
+  }
+
   async clickAndGoToMenuPage() {
     await this.menuPage.click();
   }
@@ -203,6 +208,10 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_LINK_BUTTON);
   }
 
+  private get linkExperimentalPage() {
+    return By(HOMEPAGE_EXPERIMENTAL_LINK_BUTTON);
+  }
+
   private get menuPage() {
     return By(HOMEPAGE_MENU_BUTTON);
   }

package/src/TestComponents/Dropdown/DropdownTest.tsx

@@ -8,9 +8,10 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 const DropdownDefault: React.FunctionComponent = () => {
   return (
     <Stack style={stackStyle}>
-      <Dropdown />
-      <Option>Test</Option>
-      <Option disabled>Disabled Test</Option>
+      <Dropdown>
+        <Option>Test</Option>
+        <Option disabled>Disabled Test</Option>
+      </Dropdown>
     </Stack>
   );
 };

package/src/TestComponents/FocusZone/FocusZoneTest.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { View, ScrollView } from 'react-native';
-import { FocusZone, FocusZoneDirection, Text } from '@fluentui/react-native';
+import { View, ScrollView, Pressable } from 'react-native';
+import { FocusZone, FocusZoneDirection, Text, useOnPressWithFocus } from '@fluentui/react-native';
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import { Checkbox, CheckboxProps } from '@fluentui-react-native/experimental-checkbox';
 import { Test, TestSection, PlatformStatus } from '../Test';
@@ -87,6 +87,50 @@ const FocusZoneNoProps: React.FunctionComponent = () => {
   );
 };
 
+const TinyBox = () => {
+  const ref = React.useRef<View>();
+  const onPress = useOnPressWithFocus(ref, null);
+
+  return <Pressable focusable style={focusZoneTestStyles.smallBoxStyle} ref={ref} onPress={onPress} />;
+};
+
+const WideBox = () => {
+  const ref = React.useRef<View>();
+  const onPress = useOnPressWithFocus(ref, null);
+
+  return <Pressable focusable style={focusZoneTestStyles.wideBoxStyle} ref={ref} onPress={onPress} />;
+};
+
+const TinyText = () => {
+  return (
+    <Text selectable style={focusZoneTestStyles.smallBoxStyle}>
+      Hi
+    </Text>
+  );
+};
+
+const WideText = () => {
+  return (
+    <Text selectable style={focusZoneTestStyles.wideBoxStyle}>
+      Hello world
+    </Text>
+  );
+};
+
+const DifferentSizesTest: React.FunctionComponent = () => {
+  return (
+    <FocusZone focusZoneDirection="bidirectional">
+      <View style={focusZoneTestStyles.dashedBorder}>
+        <WideBox />
+        <TinyBox />
+        <WideBox />
+        <TinyText />
+        <WideText />
+      </View>
+    </FocusZone>
+  );
+};
+
 const NestedFocusZone: React.FunctionComponent = () => {
   return (
     <FocusZoneListWrapper>
@@ -132,6 +176,10 @@ const focusZoneSections: TestSection[] = [
     name: 'FocusZone with no props',
     component: FocusZoneNoProps,
   },
+  {
+    name: 'Different Sized Children',
+    component: DifferentSizesTest,
+  },
   {
     name: 'Nested FocusZone',
     component: NestedFocusZone,

package/src/TestComponents/FocusZone/styles.ts

@@ -43,6 +43,18 @@ export const focusZoneTestStyles = StyleSheet.create({
     marginHorizontal: 20,
     marginBottom: 100,
   },
+  smallBoxStyle: {
+    width: 20,
+    height: 20,
+    backgroundColor: 'lightgrey',
+    margin: 5,
+  },
+  wideBoxStyle: {
+    width: 150,
+    height: 20,
+    backgroundColor: 'lightgrey',
+    margin: 5,
+  },
 });
 
 export const GridButton = Button.compose({

package/src/TestComponents/LinkExperimental/E2ELinkTest.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Alert } from 'react-native';
+import { Link } from '@fluentui-react-native/experimental-link';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import {
+  EXPERIMENTAL_LINK_TEST_COMPONENT,
+  EXPERIMENTAL_LINK_ACCESSIBILITY_LABEL,
+  EXPERIMENTAL_LINK_NO_A11Y_LABEL_COMPONENT,
+  EXPERIMENTAL_LINK_TEST_COMPONENT_LABEL,
+} from './consts';
+
+export const LinkE2ETest: React.FunctionComponent = () => {
+  const doPress = (): void => {
+    Alert.alert('Alert.', 'You have been alerted.');
+  };
+
+  return (
+    <Stack style={stackStyle}>
+      <Link
+        url="https://www.bing.com/"
+        testID={EXPERIMENTAL_LINK_TEST_COMPONENT}
+        accessibilityLabel={EXPERIMENTAL_LINK_ACCESSIBILITY_LABEL}
+      >
+        Link with Accessibility Label
+      </Link>
+      <Link onPress={doPress} testID={EXPERIMENTAL_LINK_NO_A11Y_LABEL_COMPONENT}>
+        {EXPERIMENTAL_LINK_TEST_COMPONENT_LABEL}
+      </Link>
+    </Stack>
+  );
+};

package/src/TestComponents/LinkExperimental/LinkTest.tsx

@@ -0,0 +1,210 @@
+import * as React from 'react';
+import { Alert, View, StyleSheet, Text, TextInput } from 'react-native';
+import { Link, LinkTokens } from '@fluentui-react-native/experimental-link';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
+import { EXPERIMENTAL_LINK_TESTPAGE } from './consts';
+import { Test, TestSection, PlatformStatus } from '../Test';
+import { LinkE2ETest } from './E2ELinkTest';
+
+const DefaultLinks: React.FunctionComponent = () => {
+  const doPress = React.useCallback(() => Alert.alert('Alert.', 'You have been alerted.'), []);
+  const doAllyTap = React.useCallback(() => Alert.alert('Alert.', 'You have invoked onAllyTap.'), []);
+
+  return (
+    <Stack style={stackStyle}>
+      <Link tooltip={'https://www.bing.com/'} url="https://www.bing.com/">
+        Click to navigate.
+      </Link>
+      <Link onPress={doPress} onAccessibilityTap={doAllyTap}>
+        Click to alert.
+      </Link>
+      <Link disabled focusable>
+        Disabled focusable Link
+      </Link>
+    </Stack>
+  );
+};
+
+const InlineLinks: React.FunctionComponent = () => {
+  const doPress = React.useCallback(() => Alert.alert('Alert.', 'You have been alerted.'), []);
+  const doAllyTap = React.useCallback(() => Alert.alert('Alert.', 'You have invoked onAllyTap.'), []);
+
+  return (
+    <Stack style={stackStyle}>
+      <Text>
+        Click{' '}
+        <Link inline onPress={doPress} onAccessibilityTap={doAllyTap}>
+          this link
+        </Link>{' '}
+        to alert me.
+      </Text>
+      <Text>
+        This{' '}
+        <Link inline onPress={doPress} disabled focusable>
+          link
+        </Link>{' '}
+        is disabled but focusable.
+      </Text>
+      <Text>
+        Follow this{' '}
+        <Link inline url="https://www.bing.com/">
+          link
+        </Link>{' '}
+        to navigate.
+      </Text>
+    </Stack>
+  );
+};
+
+const SubtleLinks: React.FunctionComponent = () => {
+  const doPress = React.useCallback(() => Alert.alert('Alert.', 'You have been alerted.'), []);
+  const doAllyTap = React.useCallback(() => Alert.alert('Alert.', 'You have invoked onAllyTap.'), []);
+
+  return (
+    <Stack style={stackStyle}>
+      <Link appearance="subtle" url="https://www.bing.com/">
+        Click to navigate.
+      </Link>
+      <Text>
+        This is inline Link.{' '}
+        <Link appearance="subtle" inline onPress={doPress} onAccessibilityTap={doAllyTap}>
+          Click to alert.
+        </Link>
+      </Text>
+      <Link appearance="subtle" onPress={doPress} disabled>
+        Disabled Link
+      </Link>
+    </Stack>
+  );
+};
+
+const styles = StyleSheet.create({
+  tokensRow: {
+    flexDirection: 'row',
+    marginBottom: 10,
+  },
+  tokensColumn: {
+    flexDirection: 'column',
+    margin: 10,
+  },
+});
+
+const BlueHeaderBold = Link.customize({ variant: 'headerStandard', fontWeight: '700', color: '#0229c4', textAlign: 'right' });
+const CustomLinks: React.FunctionComponent = () => {
+  const [linkColor, setLinkColor] = React.useState<string>('blue');
+  const [linkFont, setLinkFont] = React.useState<string>('Ariel');
+  const [linkFontSize, setLinkFontSize] = React.useState<number>(12);
+  const [linkText, setLinkText] = React.useState<string>('Click to Navigate');
+  const [linkUrl, setLinkUrl] = React.useState<string>('https://www.bing.com/');
+
+  const CustomLink = React.useMemo(() => {
+    const tokens: LinkTokens = {
+      color: linkColor,
+      fontFamily: linkFont,
+      fontSize: linkFontSize,
+    };
+    return Link.customize(tokens);
+  }, [linkColor, linkFont, linkFontSize, linkText, linkUrl]);
+
+  return (
+    <View style={styles.tokensColumn}>
+      <View style={styles.tokensRow}>
+        <View>
+          <Text>Text Tokens</Text>
+          <TextInput
+            accessibilityLabel="Link color"
+            style={commonStyles.textBox}
+            placeholder="Link color"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setLinkColor(e.nativeEvent.text);
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Link font"
+            style={commonStyles.textBox}
+            placeholder="Link font"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setLinkFont(e.nativeEvent.text);
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Link font size"
+            style={commonStyles.textBox}
+            placeholder="Link font size"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setLinkFontSize(parseInt(e.nativeEvent.text));
+            }}
+          />
+        </View>
+        <View>
+          <Text>Content and URL customize</Text>
+          <TextInput
+            accessibilityLabel="Link text"
+            style={commonStyles.textBox}
+            placeholder="Link text"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setLinkText(e.nativeEvent.text);
+            }}
+          />
+          <TextInput
+            accessibilityLabel="Link Url"
+            style={commonStyles.textBox}
+            placeholder="Link URL"
+            blurOnSubmit={true}
+            onSubmitEditing={(e) => {
+              setLinkUrl(e.nativeEvent.text);
+            }}
+          />
+        </View>
+      </View>
+      <CustomLink align="end" url={linkUrl}>
+        {linkText}
+      </CustomLink>
+      <BlueHeaderBold>BlueHeaderBold</BlueHeaderBold>
+    </View>
+  );
+};
+
+const linkSections: TestSection[] = [
+  {
+    name: 'Default Links',
+    testID: EXPERIMENTAL_LINK_TESTPAGE,
+    component: DefaultLinks,
+  },
+  {
+    name: 'Inline Links',
+    component: InlineLinks,
+  },
+  {
+    name: 'Subtle Links',
+    component: SubtleLinks,
+  },
+  {
+    name: 'Custom Link',
+    component: CustomLinks,
+  },
+  {
+    name: 'Link E2E Test',
+    component: LinkE2ETest,
+  },
+];
+
+export const ExperimentalLinkTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Beta',
+    uwpStatus: 'Experimental',
+    iosStatus: 'Experimental',
+    macosStatus: 'Beta',
+    androidStatus: 'Backlog',
+  };
+
+  const description =
+    'With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter.\n\nA Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design.';
+
+  return <Test name="Link Test" description={description} sections={linkSections} status={status}></Test>;
+};

package/src/TestComponents/LinkExperimental/consts.ts

@@ -0,0 +1,10 @@
+export const HOMEPAGE_EXPERIMENTAL_LINK_BUTTON = 'Homepage_LinkExperimental_Button';
+export const EXPERIMENTAL_LINK_TESTPAGE = 'LinkExperimental_TestPage';
+
+/* E2E Testing Link 1 */
+export const EXPERIMENTAL_LINK_TEST_COMPONENT = 'Experimental_Link_Test_Component'; // A component on each specific test page
+export const EXPERIMENTAL_LINK_ACCESSIBILITY_LABEL = 'E2E testing Experimental Link accessibility label';
+
+/* E2E Testing Link 2 */
+export const EXPERIMENTAL_LINK_NO_A11Y_LABEL_COMPONENT = 'Experimental Link_No_A11y_label_Component';
+export const EXPERIMENTAL_LINK_TEST_COMPONENT_LABEL = 'Test Experimental Link2 - No Accessibility Label'; // A component on each specific test page

package/src/TestComponents/LinkExperimental/index.ts

@@ -0,0 +1,2 @@
+export * from './LinkTest';
+export * from './consts';

package/src/testPages.ts

@@ -36,6 +36,7 @@ import { TextTest, HOMEPAGE_TEXT_BUTTON } from './TestComponents/Text';
 import { TextExperimentalTest, HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON } from './TestComponents/TextExperimental';
 import { ThemeTest, HOMEPAGE_THEME_BUTTON } from './TestComponents/Theme';
 import { TokenTest, HOMEPAGE_TOKEN_BUTTON } from './TestComponents/Tokens';
+import { ExperimentalLinkTest, HOMEPAGE_EXPERIMENTAL_LINK_BUTTON } from './TestComponents/LinkExperimental';
 
 export const tests: TestDescription[] = [
   {
@@ -141,6 +142,12 @@ export const tests: TestDescription[] = [
     testPage: HOMEPAGE_LINK_BUTTON,
     platforms: ['android', 'ios', 'macos', 'web', 'win32', 'windows'],
   },
+  {
+    name: 'Link (Experimental)',
+    component: ExperimentalLinkTest,
+    testPage: HOMEPAGE_EXPERIMENTAL_LINK_BUTTON,
+    platforms: ['win32'],
+  },
   {
     name: 'Menu',
     component: MenuTest,