chore: fix link buttons open twice

PiperOrigin-RevId: 879906530

Author: asyncliz

iconbutton/internal/icon-button.ts

@@ -267,8 +267,9 @@ export class IconButton extends iconButtonBaseClass implements FormSubmitter {
 
   private renderRipple() {
     const isRippleDisabled = !this.href && (this.disabled || this.softDisabled);
+    // TODO(b/310046938): use the same id for both elements
     return html`<md-ripple
-      .control=${this}
+      for=${this.href ? 'link' : nothing}
       ?disabled="${isRippleDisabled}"></md-ripple>`;
   }
 

internal/events/dispatch-hooks.ts

@@ -154,7 +154,17 @@ export function setupDispatchHooks(
         // Re-dispatch the event. We can't reuse `redispatchEvent()` since we
         // need to add the hooks to the copy before it's dispatched.
         isRedispatching = true;
-        const dispatched = element.dispatchEvent(eventCopy);
+        const composedTarget = event.composedPath()[0];
+        if (
+          event.type === 'click' &&
+          (composedTarget as Partial<HTMLElement>)?.matches?.('a')
+        ) {
+          // For legacy reasons, synthetic click events dispatching on
+          // HTMLAnchorElement will trigger link behavior. Prevent this since
+          // we will dispatch a copy of the same click event.
+          event.preventDefault();
+        }
+        const dispatched = event.composedPath()[0].dispatchEvent(eventCopy);
         isRedispatching = false;
         if (!dispatched) {
           event.preventDefault();

internal/events/dispatch-hooks_test.ts

@@ -39,6 +39,42 @@ describe('dispatch hooks', () => {
         .withContext('element.addEventListener')
         .toHaveBeenCalledTimes(3);
     });
+
+    it('triggers internal event listeners when a composed element is the source of the event', () => {
+      const shadowRoot = element.attachShadow({mode: 'open'});
+      const composedElement = document.createElement('button');
+      shadowRoot.appendChild(composedElement);
+      const innerClickListener = jasmine.createSpy('innerClickListener');
+      composedElement.addEventListener('click', innerClickListener);
+
+      setupDispatchHooks(element, 'click');
+      composedElement.click();
+
+      expect(innerClickListener)
+        .withContext('innerClickListener')
+        .toHaveBeenCalledTimes(1);
+    });
+
+    it('should not trigger activation behavior for clicks coming from inner <a> elements', () => {
+      const shadowRoot = element.attachShadow({mode: 'open'});
+      const anchorElement = document.createElement('a');
+      anchorElement.href = '#';
+      shadowRoot.appendChild(anchorElement);
+
+      setupDispatchHooks(element, 'click');
+
+      const clickEvent = new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+      });
+
+      anchorElement.dispatchEvent(clickEvent);
+
+      expect(clickEvent.defaultPrevented)
+        .withContext('clickEvent.defaultPrevented')
+        .toBeTrue();
+    });
   });
 
   describe('afterDispatch()', () => {