Testing: button refactor

packages/button/package.json

@@ -96,7 +96,8 @@
         "@spectrum-web-components/icons-ui": "1.7.0",
         "@spectrum-web-components/progress-circle": "1.7.0",
         "@spectrum-web-components/reactive-controllers": "1.7.0",
-        "@spectrum-web-components/shared": "1.7.0"
+        "@spectrum-web-components/shared": "1.7.0",
+        "@spectrum-web-components/tooltip": "1.7.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

packages/button/src/Button.ts

@@ -37,8 +37,9 @@ export const VALID_VARIANTS = [
     'negative',
     'white',
     'black',
-];
-export const VALID_STATIC_COLORS = ['white', 'black'];
+] as const;
+
+export const VALID_STATIC_COLORS = ['white', 'black'] as const;
 
 export type ButtonTreatments = 'fill' | 'outline';
 
@@ -56,9 +57,8 @@ export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {
     @property({ type: String, attribute: 'pending-label' })
     public pendingLabel = 'Pending';
 
-    // Use this property to set the button into a pending state
-    @property({ type: Boolean, reflect: true, attribute: true })
-    public pending = false;
+    @property({ type: Boolean, reflect: true })
+    public override pending = false;
 
     public pendingStateController: PendingStateController<this>;
 
@@ -72,7 +72,7 @@ export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {
     }
 
     public override click(): void {
-        if (this.pending) {
+        if (this.pending || this.disabled) {
             return;
         }
         super.click();
@@ -191,11 +191,31 @@ export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {
         if (!this.hasAttribute('variant')) {
             this.setAttribute('variant', this.variant);
         }
+
+        // Set role="button" by default
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'button');
+        }
+
         if (this.pending) {
             this.pendingStateController.hostUpdated();
         }
     }
 
+    protected override updated(changes: PropertyValues<this>): void {
+        super.updated(changes);
+
+        // Update aria-disabled when disabled changes
+        if (changes.has('disabled')) {
+            this.setAttribute('aria-disabled', this.disabled.toString());
+        }
+
+        // Update aria-busy when pending changes
+        if (changes.has('pending')) {
+            this.setAttribute('aria-busy', this.pending.toString());
+        }
+    }
+
     protected override renderButton(): TemplateResult {
         return html`
             ${this.buttonContent}

packages/button/src/ButtonBase.ts

@@ -23,6 +23,7 @@ import {
 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 '@spectrum-web-components/tooltip/sp-tooltip.js';
 import buttonStyles from './button-base.css.js';
 
 /**
@@ -48,12 +49,33 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
     @property({ type: String })
     public type: 'button' | 'submit' | 'reset' = 'button';
 
+    /**
+     * The reason why the button is disabled. When set, this will override
+     * the native disabled attribute and use aria-disabled instead, keeping
+     * the button focusable for better accessibility.
+     */
+    @property({ type: String, attribute: 'disabled-reason' })
+    public disabledReason?: string;
+
+    /**
+     * Whether the button is disabled. This can be either through
+     * the native disabled attribute or through disabledReason.
+     */
+    public get isDisabled(): boolean {
+        return this.disabled || !!this.disabledReason;
+    }
+
+    @property({ type: Boolean, reflect: true })
+    public override disabled = false;
+
     /**
      * HTML anchor element that component clicks by proxy
      */
     @query('.anchor')
     private anchorElement!: HTMLAnchorElement;
 
+    private tooltipId = `tooltip-${Math.random().toString(36).substring(2)}`;
+
     public override get focusElement(): HTMLElement {
         return this;
     }
@@ -76,6 +98,9 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
         return content;
     }
 
+    @property({ type: Boolean, reflect: true })
+    public pending = false;
+
     constructor() {
         super();
         this.proxyFocus = this.proxyFocus.bind(this);
@@ -86,7 +111,7 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
     }
 
     private handleClickCapture(event: Event): void | boolean {
-        if (this.disabled) {
+        if (this.isDisabled) {
             event.preventDefault();
             event.stopImmediatePropagation();
             event.stopPropagation();
@@ -154,9 +179,24 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
     }
 
     protected override render(): TemplateResult {
-        return this.href && this.href.length > 0
-            ? this.renderAnchor()
-            : this.renderButton();
+        return html`
+            ${this.disabledReason
+                ? html`
+                      <sp-tooltip
+                          self-managed
+                          id=${this.tooltipId}
+                          placement="top"
+                          variant="info"
+                          offset="6"
+                      >
+                          ${this.disabledReason}
+                      </sp-tooltip>
+                  `
+                : ''}
+            ${this.href && this.href.length > 0
+                ? this.renderAnchor()
+                : this.renderButton()}
+        `;
     }
 
     protected handleKeydown(event: KeyboardEvent): void {
@@ -260,6 +300,12 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
             // Set up focus delegation
             this.anchorElement.addEventListener('focus', this.proxyFocus);
         }
+
+        if (changed.has('pending')) {
+            // Update ARIA attributes for loading state
+            this.setAttribute('aria-busy', this.pending ? 'true' : 'false');
+        }
+
     }
     protected override update(changes: PropertyValues): void {
         super.update(changes);

packages/button/stories/button-disabled-tooltip.stories.ts

@@ -0,0 +1,112 @@
+/*
+ * 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 { html, TemplateResult } from '@spectrum-web-components/base';
+import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+import '@spectrum-web-components/button/sp-button.js';
+import '@spectrum-web-components/tooltip/sp-tooltip.js';
+
+interface StoryArgs {
+    disabledReason?: string;
+    variant?: 'accent' | 'primary' | 'secondary' | 'negative';
+    treatment?: 'fill' | 'outline';
+}
+
+export default {
+    title: 'Button/Disabled with Tooltip',
+    component: 'sp-button',
+    argTypes: {
+        disabledReason: { control: 'text' },
+        variant: {
+            control: {
+                type: 'select',
+                options: ['accent', 'primary', 'secondary', 'negative'],
+            },
+        },
+        treatment: {
+            control: {
+                type: 'select',
+                options: ['fill', 'outline'],
+            },
+        },
+    },
+    args: {
+        disabledReason:
+            'This button is disabled because required fields are missing',
+        variant: 'primary',
+        treatment: 'fill',
+    },
+    parameters: {
+        actions: {
+            handles: ['click'],
+        },
+    },
+};
+
+export const Default = (args: StoryArgs): TemplateResult => {
+    return html`
+        <div style="display: flex; flex-direction: column; gap: 20px;">
+            <div style="display: flex; gap: 20px; align-items: center;">
+                <!-- Regular disabled button -->
+                <sp-button
+                    disabled
+                    variant=${ifDefined(args.variant)}
+                    treatment=${ifDefined(args.treatment)}
+                >
+                    Regular Disabled
+                </sp-button>
+
+                <!-- Disabled button with tooltip -->
+                <sp-button
+                    disabled-reason=${ifDefined(args.disabledReason)}
+                    variant=${ifDefined(args.variant)}
+                    treatment=${ifDefined(args.treatment)}
+                >
+                    Disabled with Tooltip
+                </sp-button>
+            </div>
+            <p>
+                <em>
+                    Try tabbing to the buttons. The second button will show a
+                    tooltip when focused.
+                </em>
+            </p>
+        </div>
+    `;
+};
+
+export const FocusExample = (): TemplateResult => {
+    return html`
+        <div style="display: flex; flex-direction: column; gap: 20px;">
+            <div style="display: flex; gap: 20px; align-items: center;">
+                <sp-button>Regular Button</sp-button>
+
+                <sp-button
+                    disabled-reason="This button requires additional permissions"
+                >
+                    Focusable Disabled
+                </sp-button>
+
+                <sp-button disabled>Regular Disabled</sp-button>
+            </div>
+            <p>
+                <em>Tab order demonstration:</em>
+                <br />
+                1. Regular Button (focusable)
+                <br />
+                2. Disabled with Tooltip (focusable, shows tooltip)
+                <br />
+                3. Regular Disabled (not focusable)
+            </p>
+        </div>
+    `;
+};

packages/button/test/button.test.ts

@@ -347,8 +347,8 @@ describe('Button', () => {
 
             await elementUpdated(el);
 
-            expect(el.hasAttribute('aria-disabled'), 'initially not').to.be
-                .false;
+            expect(el.getAttribute('aria-disabled')).to.equal('false');
+            expect(el.disabled).to.be.false;
 
             el.disabled = true;
             await elementUpdated(el);

yarn.lock

@@ -4892,6 +4892,7 @@ __metadata:
     "@spectrum-web-components/progress-circle": "npm:1.7.0"
     "@spectrum-web-components/reactive-controllers": "npm:1.7.0"
     "@spectrum-web-components/shared": "npm:1.7.0"
+    "@spectrum-web-components/tooltip": "npm:1.7.0"
   languageName: unknown
   linkType: soft