fix(button): double tab navigation when clicking button/action-button with href and target="_blank" (#5937)

* fix(button): fix anchorlink href double tab opening

* chore: added changeset

* fix: added link click on space

---------

Co-authored-by: Rajdeep Chandra <rajdeepc@adobe.com>

Author: Rajdeepc

.changeset/fix-double-tab-navigation.md

@@ -0,0 +1,7 @@
+---
+'@spectrum-web-components/button': patch
+---
+
+**Fixed** issue where clicking `sp-button` or `sp-action-button` with `href` and `target="_blank"` opened two tabs in Chrome instead of one.
+
+The fix checks if the anchor element is already in the click event's composed path before triggering a proxy click. When the user clicks directly on the button, the absolutely-positioned anchor naturally receives the click, so no proxy is needed. The proxy click is now only triggered for keyboard activation and VoiceOver, where the anchor isn't in the click path.

1st-gen/packages/button/src/ButtonBase.ts

@@ -114,9 +114,17 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
     }
 
     if (this.anchorElement) {
+      // Check if the click already went through the anchor element.
+      // If so, the browser will handle navigation naturally and we
+      // don't need to proxy the click (which would cause double navigation).
+      const path = event?.composedPath() || [];
+      if (path.includes(this.anchorElement)) {
+        return false;
+      }
       // Click HTML anchor element by proxy, but only for non-modified clicks
       this.anchorElement.click();
       handled = true;
+      return handled;
       // if the button type is `submit` or `reset`
     } else if (this.type !== 'button') {
       // create an HTML Button Element by proxy, click it, and remove it
@@ -159,11 +167,9 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
     switch (code) {
       case 'Space':
         event.preventDefault();
-        // allows button to activate when `Space` is pressed
-        if (typeof this.href === 'undefined') {
-          this.addEventListener('keyup', this.handleKeyup);
-          this.active = true;
-        }
+        // allows button or link to activate when `Space` is pressed
+        this.addEventListener('keyup', this.handleKeyup);
+        this.active = true;
         break;
       default:
         break;

1st-gen/packages/link/src/spectrum-link.css

@@ -47,6 +47,7 @@
 }
 
 a {
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
   text-decoration-skip: objects;
   color: var(--highcontrast-link-text-color, var(--mod-link-text-color, var(--mod-link-text-color-primary-default, var(--spectrum-accent-content-color-default))));
   text-decoration: underline;

1st-gen/packages/radio/src/spectrum-radio.css

@@ -87,6 +87,7 @@
   position: fixed;
   inset-block-end: 100%;
   inset-inline-end: 100%;
+  /* stylelint-disable-next-line property-no-deprecated */
   clip: rect(1px, 1px, 1px, 1px);
   clip-path: inset(50%);
 }