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

[Rajdeepc]

Description

Fixes an issue where clicking sp-button or sp-action-button with href and target="_blank" attributes opened two browser tabs in Chrome instead of one.

Root cause

The ButtonBase component renders an anchor element with position: absolute; inset: 0 that overlays the entire button. When clicked:

1. handleClickCapture catches the click and calls shouldProxyClick() → anchorElement.click() → first navigation
2. The original click event continues propagating and naturally reaches the anchor → second navigation

This only manifested in Chrome due to how it handles click event propagation on absolutely-positioned elements within shadow DOM.

Solution

Check if the anchor element is already in the click event's composedPath() before triggering a proxy click. If the anchor is in the path, the browser will handle navigation naturally and no proxy is needed.

const path = event?.composedPath() || [];
if (path.includes(this.anchorElement)) {
    return false;  // Skip proxy - browser handles it naturally
}

Motivation and context

Related issue(s)

• fixes [SWC-921]

Screenshots (if appropriate)

---

Author's checklist

• I have read the CONTRIBUTING and PULL_REQUESTS documents.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
• I have added automated tests to cover my changes.
• I have included a well-written changeset if my change needs to be published.
• I have included updated documentation if my change required it.

---

Reviewer's checklist

• Includes a Github Issue with appropriate flag or Jira ticket number without a link
• Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
• Automated tests cover all use cases and follow best practices for writing
• Validated on all supported browsers
• All VRTs are approved before the author can update Golden Hash

Manual review test cases

• Modifier Clicks

  1. Go here
  2. Cmd+Click, Ctrl+Click
  3. Expect it to open a single new tab and not double

• VO testing

  1. Go here
  2. CMD + F5 to enable, VO + Space to activate
  3. Expect it calls out as "link"

• Keyboard Testing

  1. Go here
  2. Tab to focus, Enter/Space to activate
  3. Expect it calls out as "link"

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?

[changeset-bot]

🦋 Changeset detected

Latest commit: 414e7bf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 84 packages

Name	Type
@spectrum-web-components/button	Patch
@spectrum-web-components/action-bar	Patch
@spectrum-web-components/action-button	Patch
@spectrum-web-components/alert-banner	Patch
@spectrum-web-components/alert-dialog	Patch
@spectrum-web-components/button-group	Patch
@spectrum-web-components/coachmark	Patch
@spectrum-web-components/dialog	Patch
@spectrum-web-components/infield-button	Patch
@spectrum-web-components/picker-button	Patch
@spectrum-web-components/picker	Patch
@spectrum-web-components/search	Patch
@spectrum-web-components/tags	Patch
@spectrum-web-components/toast	Patch
example-project-rollup	Patch
example-project-webpack	Patch
@spectrum-web-components/bundle	Patch
@spectrum-web-components/vrt-compare	Patch
@spectrum-web-components/action-group	Patch
@spectrum-web-components/action-menu	Patch
@spectrum-web-components/combobox	Patch
@spectrum-web-components/contextual-help	Patch
@spectrum-web-components/menu	Patch
@spectrum-web-components/overlay	Patch
@spectrum-web-components/tabs	Patch
@spectrum-web-components/number-field	Patch
@spectrum-web-components/custom-vars-viewer	Patch
@spectrum-web-components/story-decorator	Patch
documentation	Patch
@spectrum-web-components/breadcrumbs	Patch
@spectrum-web-components/popover	Patch
@spectrum-web-components/tooltip	Patch
@spectrum-web-components/truncated	Patch
@spectrum-web-components/top-nav	Patch
@spectrum-web-components/slider	Patch
@spectrum-web-components/card	Patch
@spectrum-web-components/accordion	Patch
@spectrum-web-components/asset	Patch
@spectrum-web-components/avatar	Patch
@spectrum-web-components/badge	Patch
@spectrum-web-components/checkbox	Patch
@spectrum-web-components/clear-button	Patch
@spectrum-web-components/close-button	Patch
@spectrum-web-components/color-area	Patch
@spectrum-web-components/color-field	Patch
@spectrum-web-components/color-handle	Patch
@spectrum-web-components/color-loupe	Patch
@spectrum-web-components/color-slider	Patch
@spectrum-web-components/color-wheel	Patch
@spectrum-web-components/divider	Patch
@spectrum-web-components/dropzone	Patch
@spectrum-web-components/field-group	Patch
@spectrum-web-components/field-label	Patch
@spectrum-web-components/help-text	Patch
@spectrum-web-components/icon	Patch
@spectrum-web-components/icons-ui	Patch
@spectrum-web-components/icons-workflow	Patch
@spectrum-web-components/icons	Patch
@spectrum-web-components/iconset	Patch
@spectrum-web-components/illustrated-message	Patch
@spectrum-web-components/link	Patch
@spectrum-web-components/meter	Patch
@spectrum-web-components/modal	Patch
@spectrum-web-components/progress-bar	Patch
@spectrum-web-components/progress-circle	Patch
@spectrum-web-components/radio	Patch
@spectrum-web-components/sidenav	Patch
@spectrum-web-components/split-view	Patch
@spectrum-web-components/status-light	Patch
@spectrum-web-components/swatch	Patch
@spectrum-web-components/switch	Patch
@spectrum-web-components/table	Patch
@spectrum-web-components/textfield	Patch
@spectrum-web-components/thumbnail	Patch
@spectrum-web-components/tray	Patch
@spectrum-web-components/underlay	Patch
@spectrum-web-components/base	Patch
@spectrum-web-components/grid	Patch
@spectrum-web-components/opacity-checkerboard	Patch
@spectrum-web-components/reactive-controllers	Patch
@spectrum-web-components/shared	Patch
@spectrum-web-components/styles	Patch
@spectrum-web-components/theme	Patch
@spectrum-web-components/eslint-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

📚 Branch Preview Links

• Documentation Site (first-gen)
• Storybook (first-gen)
• Storybook (second-gen)

🔍 First Generation Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-5937

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

[nikkimk]

2. Tab to focus, Enter/Space to activate

@Rajdeepc links don't activate via space.

[nikkimk]

lgtm

[blunteshwar]

LGTM!