fix(action-button): action-button with href can be perceived by screen reader

packages/action-button/stories/action-button.stories.ts

@@ -44,3 +44,12 @@ toggles.args = {
         <sp-icon-edit hidden slot="icon"></sp-icon-edit>
     `,
 };
+
+export const href = (args: Properties): TemplateResult =>
+    renderButtonsSelected(args);
+href.args = {
+    href: 'https://github.com/adobe/spectrum-web-components',
+    icon: html`
+        <sp-icon-edit hidden slot="icon"></sp-icon-edit>
+    `,
+};

packages/action-button/stories/index.ts

@@ -31,11 +31,13 @@ export interface Properties {
     icon?: TemplateResult;
     label?: string;
     [prop: string]: unknown;
+    href: undefined;
 }
 
 export function renderButton(properties: Properties): TemplateResult {
     return html`
         <sp-action-button
+            href=${ifDefined(properties.href)}
             ?quiet="${!!properties.quiet}"
             ?emphasized="${!!properties.emphasized}"
             static-color="${ifDefined(properties.staticColor)}"

packages/action-button/test/action-button.test.ts

@@ -27,6 +27,7 @@ import { sendKeys } from '@web/test-runner-commands';
 import { spy } from 'sinon';
 import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
 import { m as BlackActionButton } from '../stories/action-button-black.stories.js';
+import { sendMouse } from '../../../test/plugins/browser.js';
 
 describe('ActionButton', () => {
     testForLitDevWarnings(
@@ -295,4 +296,38 @@ describe('ActionButton', () => {
         expect(el.staticColor).to.be.null;
         expect(el.hasAttribute('static-color')).to.be.false;
     });
+    it('allows link click', async () => {
+        let clicked = false;
+        const el = await fixture<ActionButton>(html`
+            <sp-action-button href="#top" target="_blank">
+                With Target
+            </sp-action-button>
+        `);
+
+        // ensures that proxy listener isn't removed when button is updated to link
+        await elementUpdated(el);
+        el.href = '#top';
+        await elementUpdated(el);
+
+        el.shadowRoot
+            ?.querySelector('.anchor')
+            ?.addEventListener('click', (event: Event) => {
+                event.preventDefault();
+                clicked = true;
+            });
+        const rect = el.getBoundingClientRect();
+        await sendMouse({
+            steps: [
+                {
+                    position: [
+                        rect.left + rect.width / 2,
+                        rect.top + rect.height / 2,
+                    ],
+                    type: 'click',
+                },
+            ],
+        });
+        await elementUpdated(el);
+        expect(clicked).to.be.true;
+    });
 });

packages/button/src/ButtonBase.ts

@@ -36,14 +36,23 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
         return [buttonStyles];
     }
 
+    // TODO we need to document this property for consumers,
+    // as it's not a 1:1 equivalent to active
     @property({ type: Boolean, reflect: true })
     public active = false;
 
+    /**
+     * The default behavior of the button.
+     * Possible values are: `button` (default), `submit`, and `reset`.
+     */
     @property({ type: String })
     public type: 'button' | 'submit' | 'reset' = 'button';
 
+    /**
+     * HTML anchor element that component clicks by proxy
+     */
     @query('.anchor')
-    private anchorElement!: HTMLButtonElement;
+    private anchorElement!: HTMLAnchorElement;
 
     public override get focusElement(): HTMLElement {
         return this;
@@ -76,25 +85,17 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
         });
     }
 
-    public override click(): void {
-        if (this.disabled) {
-            return;
-        }
-
-        if (this.shouldProxyClick()) {
-            return;
-        }
-
-        super.click();
-    }
-
     private handleClickCapture(event: Event): void | boolean {
         if (this.disabled) {
             event.preventDefault();
             event.stopImmediatePropagation();
             event.stopPropagation();
             return false;
         }
+
+        if (this.shouldProxyClick()) {
+            return;
+        }
     }
 
     private proxyFocus(): void {
@@ -104,9 +105,12 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
     private shouldProxyClick(): boolean {
         let handled = false;
         if (this.anchorElement) {
+            // click HTML anchor element by proxy
             this.anchorElement.click();
             handled = true;
+            // 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
             const proxy = document.createElement('button');
             proxy.type = this.type;
             this.insertAdjacentElement('afterend', proxy);
@@ -145,6 +149,7 @@ 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;
@@ -160,6 +165,7 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
         switch (code) {
             case 'Enter':
             case 'NumpadEnter':
+                // allows button or link to be activated with `Enter` and `NumpadEnter`
                 this.click();
                 break;
             default:
@@ -181,22 +187,26 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
     }
 
     private manageAnchor(): void {
+        // for a link
         if (this.href && this.href.length > 0) {
+            // if the role is set to button
             if (
                 !this.hasAttribute('role') ||
                 this.getAttribute('role') === 'button'
             ) {
+                // change role to link
                 this.setAttribute('role', 'link');
             }
-            this.removeEventListener('click', this.shouldProxyClick);
+            // else for a button
         } else {
+            // if the role is set to link
             if (
                 !this.hasAttribute('role') ||
                 this.getAttribute('role') === 'link'
             ) {
+                // change role to button
                 this.setAttribute('role', 'button');
             }
-            this.addEventListener('click', this.shouldProxyClick);
         }
     }
 

packages/button/test/button.test.ts

@@ -26,6 +26,7 @@ import {
     findAccessibilityNode,
     sendKeys,
 } from '@web/test-runner-commands';
+import { sendMouse } from '../../../test/plugins/browser.js';
 import { spy, stub } from 'sinon';
 
 type TestableButtonType = {
@@ -219,6 +220,38 @@ describe('Button', () => {
             expect(el).to.not.be.undefined;
             expect(el.textContent).to.include('With Target');
         });
+        it('allows link click', async () => {
+            let clicked = false;
+            const el = await fixture<Button>(html`
+                <sp-button>Button as link</sp-button>
+            `);
+
+            // ensures that proxy listener isn't removed when button is updated to link
+            await elementUpdated(el);
+            el.href = '#top';
+            await elementUpdated(el);
+
+            el.shadowRoot
+                ?.querySelector('.anchor')
+                ?.addEventListener('click', (event: Event) => {
+                    event.preventDefault();
+                    clicked = true;
+                });
+            const rect = el.getBoundingClientRect();
+            await sendMouse({
+                steps: [
+                    {
+                        position: [
+                            rect.left + rect.width / 2,
+                            rect.top + rect.height / 2,
+                        ],
+                        type: 'click',
+                    },
+                ],
+            });
+            await elementUpdated(el);
+            expect(clicked).to.be.true;
+        });
         it('accepts shift+tab interactions', async () => {
             let focusedCount = 0;
             const el = await fixture<Button>(html`