18528411984

Committed 15 Oct 2025 12:12PM UTC coverage: 97.964% (+0.007%) from 97.957%

Build # 18528411984

Build Type

Pull #5808

github

Committed by

web-flow

Commit Message

Merge cfcbaec01 into ad84aaf20

Pull Request Pull Request #5808: fix(overlay): Overlay trigger directive content not announced by screen readers

Run Details

5403 of 5694 branches covered (94.89%)

Branch coverage included in aggregate %.

154 of 154 new or added lines in 7 files covered. (100.0%)

34 existing lines in 3 files now uncovered.

34299 of 34833 relevant lines covered (98.47%)

628.24 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

99.04

/packages/button/src/ButtonBase.ts

/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

import {
    CSSResultArray,
    html,
    PropertyValues,
    TemplateResult,
} from '@spectrum-web-components/base';
import {
    property,
    query,
} from '@spectrum-web-components/base/src/decorators.js';
import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
import buttonStyles from './button-base.css.js';

/**
 * @slot - text content to be displayed in the Button element
 * @slot icon - icon element(s) to display at the start of the button
 */
export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
    'sp-overlay,sp-tooltip',
]) {
    public static override get styles(): CSSResultArray {
        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!: HTMLAnchorElement;

    public override get focusElement(): HTMLElement {
        return this;
    }

    protected get hasLabel(): boolean {
        return this.slotHasContent;
    }

    protected get buttonContent(): TemplateResult[] {
        const content = [
            html`
                <slot name="icon" ?icon-only=${!this.hasLabel}></slot>
            `,
            html`
                <span id="label">
                    <slot @slotchange=${this.manageTextObservedSlot}></slot>
                </span>
            `,
        ];
        return content;
    }

    constructor() {
        super();
        this.proxyFocus = this.proxyFocus.bind(this);

        this.addEventListener('click', this.handleClickCapture, {
            capture: true,
        });
    }

    private handleClickCapture(event: Event): void | boolean {
        if (this.disabled) {
            event.preventDefault();
            event.stopImmediatePropagation();
            event.stopPropagation();
            return false;
        }

        if (this.shouldProxyClick(event as MouseEvent)) {
            return;
        }
    }

    private proxyFocus(): void {
        this.focus();
    }

    private shouldProxyClick(event?: MouseEvent): boolean {
        let handled = false;

        // Don't proxy clicks with modifier keys (Command/Meta, Ctrl, Shift, Alt)
        if (
            event &&
            (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
        ) {
            return false;
        }

        if (this.anchorElement) {
            // Click HTML anchor element by proxy, but only for non-modified clicks
            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);
            proxy.click();
            proxy.remove();
            handled = true;
        }
        return handled;
    }

    public override renderAnchor(): TemplateResult {
        return html`
            ${this.buttonContent}
            ${super.renderAnchor({
                id: 'button',
                ariaHidden: true,
                className: 'button anchor',
                tabindex: -1,
            })}
        `;
    }

    protected renderButton(): TemplateResult {
        return html`
            ${this.buttonContent}
        `;
    }

    protected override render(): TemplateResult {
        return this.href && this.href.length > 0
            ? this.renderAnchor()
            : this.renderButton();
    }

    protected handleKeydown(event: KeyboardEvent): void {
        const { code } = event;
        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;
                }
                break;
            default:
                break;
        }
    }

    private handleKeypress(event: KeyboardEvent): void {
        const { code } = event;
        switch (code) {
            case 'Enter':
            case 'NumpadEnter':
                // allows button or link to be activated with `Enter` and `NumpadEnter`
                this.click();
                break;
            default:
                break;
        }
    }

    protected handleKeyup(event: KeyboardEvent): void {
        const { code } = event;
        switch (code) {
            case 'Space':
                this.removeEventListener('keyup', this.handleKeyup);
                this.active = false;
                this.click();
                break;
            default:
                break;
        }
    }

    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');
            }
            // 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');
            }
        }
    }

    protected override firstUpdated(changed: PropertyValues): void {
        super.firstUpdated(changed);
        if (!this.hasAttribute('tabindex')) {
            this.setAttribute('tabindex', '0');
        }

        this.manageAnchor();
        this.addEventListener('keydown', this.handleKeydown);
        this.addEventListener('keypress', this.handleKeypress);
    }

    protected override updated(changed: PropertyValues): void {
        super.updated(changed);
        if (changed.has('href')) {
            this.manageAnchor();
        }

        if (changed.has('label')) {
            if (this.label) {
                this.setAttribute('aria-label', this.label);
            } else {
                this.removeAttribute('aria-label');
            }
        }

        if (this.anchorElement) {
            // Ensure the anchor element is not focusable directly via tab
            this.anchorElement.tabIndex = -1;

            // Make sure it has proper ARIA attributes
            if (!this.anchorElement.hasAttribute('aria-hidden')) {
                this.anchorElement.setAttribute('aria-hidden', 'true');
            }

            // Set up focus delegation
            this.anchorElement.addEventListener('focus', this.proxyFocus);
        }
    }
}

1	/**	66✔
2	* Copyright 2025 Adobe. All rights reserved.	66✔
3	* This file is licensed to you under the Apache License, Version 2.0 (the "License");	66✔
4	* you may not use this file except in compliance with the License. You may obtain a copy	66✔
5	* of the License at http://www.apache.org/licenses/LICENSE-2.0	66✔
6	*	66✔
7	* Unless required by applicable law or agreed to in writing, software distributed under	66✔
8	* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS	66✔
9	* OF ANY KIND, either express or implied. See the License for the specific language	66✔
10	* governing permissions and limitations under the License.	66✔
11	*/	66✔
12		66✔
13	import {	66✔
14	CSSResultArray,	66✔
15	html,	66✔
16	PropertyValues,	66✔
17	TemplateResult,	66✔
18	} from '@spectrum-web-components/base';	66✔
19	import {	66✔
20	property,	66✔
21	query,	66✔
22	} from '@spectrum-web-components/base/src/decorators.js';	66✔
23	import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';	66✔
24	import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';	66✔
25	import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';	66✔
26	import buttonStyles from './button-base.css.js';	66✔
27		66✔
28	/**	66✔
29	* @slot - text content to be displayed in the Button element	66✔
30	* @slot icon - icon element(s) to display at the start of the button	66✔
31	*/	66✔
32	export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [	66✔
33	'sp-overlay,sp-tooltip',	66✔
34	]) {	66✔
35	public static override get styles(): CSSResultArray {	66✔
36	return [buttonStyles];	66✔
37	}	66✔
38		66✔
39	// TODO we need to document this property for consumers,	66✔
40	// as it's not a 1:1 equivalent to active	66✔
41	@property({ type: Boolean, reflect: true })	66✔
42	public active = false;	66✔
43		66✔
44	/**	66✔
45	* The default behavior of the button.	66✔
46	* Possible values are: `button` (default), `submit`, and `reset`.	66✔
47	*/	66✔
48	@property({ type: String })	66✔
49	public type: 'button' \| 'submit' \| 'reset' = 'button';	66✔
50		66✔
51	/**	66✔
52	* HTML anchor element that component clicks by proxy	66✔
53	*/	66✔
54	@query('.anchor')	66✔
55	private anchorElement!: HTMLAnchorElement;	66✔
56		66✔
57	public override get focusElement(): HTMLElement {	66✔
58	return this;	9,603✔
59	}	9,603✔
60		66✔
61	protected get hasLabel(): boolean {	66✔
62	return this.slotHasContent;	1,890✔
63	}	1,890✔
64		66✔
65	protected get buttonContent(): TemplateResult[] {	66✔
66	const content = [	1,887✔
67	html`	1,887✔
68	<slot name="icon" ?icon-only=${!this.hasLabel}></slot>	1,887✔
69	`,	1,887✔
70	html`	1,887✔
71	<span id="label">	1,887✔
72	<slot @slotchange=${this.manageTextObservedSlot}></slot>	1,887✔
73	</span>	1,887✔
74	`,	1,887✔
75	];	1,887✔
76	return content;	1,887✔
77	}	1,887✔
78		66✔
79	constructor() {	66✔
80	super();	1,405✔
81	this.proxyFocus = this.proxyFocus.bind(this);	1,405✔
82		1,405✔
83	this.addEventListener('click', this.handleClickCapture, {	1,405✔
84	capture: true,	1,405✔
85	});	1,405✔
86	}	1,405✔
87		66✔
88	private handleClickCapture(event: Event): void \| boolean {	66✔
89	if (this.disabled) {	239✔
90	event.preventDefault();	1✔
91	event.stopImmediatePropagation();	1✔
92	event.stopPropagation();	1✔
93	return false;	1✔
94	}	1✔
95		238✔
96	if (this.shouldProxyClick(event as MouseEvent)) {	239✔
97	return;	10✔
98	}	10✔
99	}	239✔
100		66✔
101	private proxyFocus(): void {	66✔
102	this.focus();	2✔
103	}	2✔
104		66✔
105	private shouldProxyClick(event?: MouseEvent): boolean {	66✔
106	let handled = false;	238✔
107		238✔
108	// Don't proxy clicks with modifier keys (Command/Meta, Ctrl, Shift, Alt)	238✔
109	if (	238✔
110	event &&	238✔
111	(event.metaKey \|\| event.ctrlKey \|\| event.shiftKey \|\| event.altKey)	238✔
112	) {	238✔
113	return false;	2✔
114	}	2✔
115		236✔
116	if (this.anchorElement) {	238✔
117	// Click HTML anchor element by proxy, but only for non-modified clicks	6✔
118	this.anchorElement.click();	6✔
119	handled = true;	6✔
120	// if the button type is `submit` or `reset`	6✔
121	} else if (this.type !== 'button') {	238✔
122	// create an HTML Button Element by proxy, click it, and remove it	4✔
123	const proxy = document.createElement('button');	4✔
124	proxy.type = this.type;	4✔
125	this.insertAdjacentElement('afterend', proxy);	4✔
126	proxy.click();	4✔
127	proxy.remove();	4✔
128	handled = true;	4✔
129	}	4✔
130	return handled;	236✔
131	}	238✔
132		66✔
133	public override renderAnchor(): TemplateResult {	66✔
134	return html`	29✔
135	${this.buttonContent}	29✔
136	${super.renderAnchor({	29✔
137	id: 'button',	29✔
138	ariaHidden: true,	29✔
139	className: 'button anchor',	29✔
140	tabindex: -1,	29✔
141	})}	29✔
142	`;	29✔
143	}	29✔
144		66✔
145	protected renderButton(): TemplateResult {	66✔
146	return html`	1,979✔
147	${this.buttonContent}	1,979✔
148	`;	1,979✔
149	}	1,979✔
150		66✔
151	protected override render(): TemplateResult {	66✔
152	return this.href && this.href.length > 0	2,569✔
153	? this.renderAnchor()	29✔
154	: this.renderButton();	2,540✔
155	}	2,569✔
156		66✔
157	protected handleKeydown(event: KeyboardEvent): void {	66✔
158	const { code } = event;	107✔
159	switch (code) {	107✔
160	case 'Space':	107✔
161	event.preventDefault();	9✔
162	// allows button to activate when `Space` is pressed	9✔
163	if (typeof this.href === 'undefined') {	9✔
164	this.addEventListener('keyup', this.handleKeyup);	9✔
165	this.active = true;	9✔
166	}	9✔
167	break;	9✔
168	default:	107✔
169	break;	98✔
170	}	107✔
171	}	107✔
172		66✔
173	private handleKeypress(event: KeyboardEvent): void {	66✔
174	const { code } = event;	29✔
175	switch (code) {	29✔
176	case 'Enter':	29✔
177	case 'NumpadEnter':	29✔
178	// allows button or link to be activated with `Enter` and `NumpadEnter`	28✔
179	this.click();	28✔
180	break;	28✔
181	default:	29✔
182	break;	1✔
183	}	29✔
184	}	29✔
185		66✔
186	protected handleKeyup(event: KeyboardEvent): void {	66✔
187	const { code } = event;	10✔
188	switch (code) {	10✔
189	case 'Space':	10✔
190	this.removeEventListener('keyup', this.handleKeyup);	9✔
191	this.active = false;	9✔
192	this.click();	9✔
193	break;	9✔
194	default:	10✔
195	break;	1✔
196	}	10✔
197	}	10✔
198		66✔
199	private manageAnchor(): void {	66✔
200	// for a link	1,419✔
201	if (this.href && this.href.length > 0) {	1,419✔
202	// if the role is set to button	25✔
203	if (	25✔
204	!this.hasAttribute('role') \|\|	25✔
205	this.getAttribute('role') === 'button'	14✔
206	) {	25✔
207	// change role to link	13✔
208	this.setAttribute('role', 'link');	13✔
209	}	13✔
210	// else for a button	25✔
211	} else {	1,419✔
212	// if the role is set to link	1,394✔
213	if (	1,394✔
214	!this.hasAttribute('role') \|\|	1,394✔
215	this.getAttribute('role') === 'link'	532✔
216	) {	1,394✔
217	// change role to button	863✔
218	this.setAttribute('role', 'button');	863✔
219	}	863✔
220	}	1,394✔
221	}	1,419✔
222		66✔
223	protected override firstUpdated(changed: PropertyValues): void {	66✔
224	super.firstUpdated(changed);	1,405✔
225	if (!this.hasAttribute('tabindex')) {	1,405✔
226	this.setAttribute('tabindex', '0');	993✔
227	}	993✔
228		1,405✔
229	this.manageAnchor();	1,405✔
230	this.addEventListener('keydown', this.handleKeydown);	1,405✔
231	this.addEventListener('keypress', this.handleKeypress);	1,405✔
232	}	1,405✔
233		66✔
234	protected override updated(changed: PropertyValues): void {	66✔
235	super.updated(changed);	2,641✔
236	if (changed.has('href')) {	2,641✔
237	this.manageAnchor();	14✔
238	}	14✔
239		2,641✔
240	if (changed.has('label')) {	2,641✔
241	if (this.label) {	668✔
242	this.setAttribute('aria-label', this.label);	667✔
243	} else {	668✔
244	this.removeAttribute('aria-label');	1✔
245	}	1✔
246	}	668✔
247		2,641✔
248	if (this.anchorElement) {	2,641✔
249	// Ensure the anchor element is not focusable directly via tab	29✔
250	this.anchorElement.tabIndex = -1;	29✔
251		29✔
252	// Make sure it has proper ARIA attributes	29✔
253	if (!this.anchorElement.hasAttribute('aria-hidden')) {	29!
UNCOV 254	this.anchorElement.setAttribute('aria-hidden', 'true');	×
UNCOV 255	}	×
256		29✔
257	// Set up focus delegation	29✔
258	this.anchorElement.addEventListener('focus', this.proxyFocus);	29✔
259	}	29✔
260	}	2,641✔
261	}	66✔

adobe / spectrum-web-components / 18528411984

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous