fix(web-components): stopImmediatePropagation on internalProxyAnchors (#36085)

Author: davatron5000

change/@fluentui-web-components-d0415dbe-0858-43bc-9baf-cefcf34715cd.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: stopImmediatePropagation on internalProxyAnchors",
+  "packageName": "@fluentui/web-components",
+  "email": "rupertdavid@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/anchor-button/anchor-button.base.ts

@@ -171,11 +171,13 @@ export class BaseAnchor extends FASTElement {
    * @internal
    */
   public clickHandler(e: PointerEvent): boolean {
+    if (e.composedPath()[0] === this.internalProxyAnchor) {
+      e.stopImmediatePropagation();
+      return true;
+    }
+
     if (this.href) {
-      const newTab = !this.isMac ? e.ctrlKey : e.metaKey;
-      if (newTab) {
-        e.preventDefault();
-      }
+      const newTab = e.ctrlKey || e.metaKey;
       this.handleNavigation(newTab);
     }
 
@@ -203,7 +205,7 @@ export class BaseAnchor extends FASTElement {
 
   /**
    * Handles navigation based on input
-   * If the metaKey is pressed, opens the href in a new window, if false, uses the click on the proxy
+   * If a modified activation requests a new tab, opens the href in a new window.
    * @internal
    */
   private handleNavigation(newTab: boolean): void {
@@ -226,8 +228,7 @@ export class BaseAnchor extends FASTElement {
 
   private createProxyElement(): HTMLAnchorElement {
     const proxy = this.internalProxyAnchor ?? document.createElement('a');
-    proxy.ariaHidden = 'true';
-    proxy.tabIndex = -1;
+    proxy.inert = true;
     return proxy;
   }
 }

packages/web-components/src/anchor-button/anchor-button.spec.ts

@@ -177,6 +177,25 @@ test.describe('Anchor Button', () => {
     await expect(page).toHaveURL(expectedUrl);
   });
 
+  test('should emit a single click event when clicked', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate({ attributes: { href: '#foo' } });
+
+    await element.evaluate(anchorButton => {
+      let clickCount = 0;
+      anchorButton.addEventListener('click', () => {
+        clickCount += 1;
+        anchorButton.setAttribute('data-click-count', String(clickCount));
+      });
+      anchorButton.setAttribute('data-click-count', '0');
+    });
+
+    await element.click();
+
+    await expect(element).toHaveAttribute('data-click-count', '1');
+  });
+
   test('should navigate to the provided url when clicked while pressing the `Control` key on Windows or `Meta` on Mac', async ({
     fastPage,
     context,

packages/web-components/src/link/link.spec.ts

@@ -80,4 +80,25 @@ test.describe('Link', () => {
 
     await expect(element).not.toHaveAttribute('inline');
   });
+
+  test('should emit a single click event when clicked', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+
+    await fastPage.setTemplate({ attributes: { href: '#foo' } });
+
+    await element.evaluate((link: Link) => {
+      let clickCount = 0;
+      link.addEventListener('click', () => {
+        clickCount += 1;
+        link.setAttribute('data-click-count', String(clickCount));
+      });
+      link.setAttribute('data-click-count', '0');
+    });
+
+    await element.evaluate((node: HTMLElement) => {
+      node.click();
+    });
+
+    await expect(element).toHaveAttribute('data-click-count', '1');
+  });
 });