fix(button): handles modifier keys correctly

.changeset/witty-streets-mix.md

@@ -0,0 +1,9 @@
+---
+'@spectrum-web-components/button': patch
+---
+
+** Fixed** -
+
+- ✅ Regular click on action button with href opens exactly one tab
+- ✅ Command + Click continues to open exactly one tab
+- ✅ Ctrl + Click continues to open exactly one tab

packages/button/src/ButtonBase.ts

@@ -105,6 +105,11 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
     private shouldProxyClick(event?: MouseEvent): boolean {
         let handled = false;
 
+        // If this is a link (has href), let the browser handle it naturally
+        if (this.href && this.href.length > 0) {
+            return false; // Don't interfere with browser's link handling
+        }
+
         // Don't proxy clicks with modifier keys (Command/Meta, Ctrl, Shift, Alt)
         if (
             event &&

packages/button/test/button.test.ts

@@ -827,7 +827,7 @@ describe('Button', () => {
                 expect(el.hasAttribute('static-color')).to.be.false;
             });
         });
-        it('handles modifier key clicks correctly', async () => {
+        it('handles modifier key clicks correctly for buttons with href', async () => {
             const el = await fixture<Button>(html`
                 <sp-button href="#test">Button with href</sp-button>
             `);
@@ -839,7 +839,7 @@ describe('Button', () => {
             ) as HTMLAnchorElement;
             expect(anchorElement).to.not.be.undefined;
 
-            // Set up spies instead of counters
+            // Set up spies to track events
             const buttonClickSpy = spy();
             const anchorClickSpy = spy();
 
@@ -852,7 +852,7 @@ describe('Button', () => {
             // Track button clicks with spy
             el.addEventListener('click', buttonClickSpy);
 
-            // Test normal click - should proxy to anchor
+            // Test normal click - should NOT proxy to anchor when href is present
             const normalClick = new MouseEvent('click', {
                 bubbles: true,
                 cancelable: true,
@@ -865,9 +865,13 @@ describe('Button', () => {
             await elementUpdated(el);
 
             expect(
-                anchorClickSpy.called,
-                'Normal click should be proxied to the anchor'
+                buttonClickSpy.called,
+                'Normal click should be received by the button'
             ).to.be.true;
+            expect(
+                anchorClickSpy.called,
+                'Normal click should NOT be proxied to the anchor when href is present'
+            ).to.be.false;
 
             buttonClickSpy.resetHistory();
             anchorClickSpy.resetHistory();