fix(clear-button): add deprecation warning

Author: cdransf

1st-gen/packages/button/src/ClearButton.ts

@@ -64,6 +64,14 @@ export class ClearButton extends SizedMixin(StyledButton, {
         return [...super.styles, buttonStyles, crossMediumStyles];
     }
 
+    /**
+     * An accessible label that describes the component.
+     * It will be applied to aria-label, but not visually rendered.
+     * This attribute is required for clear buttons.
+     */
+    @property()
+    public override label!: string;
+
     @property({ type: Boolean, reflect: true })
     public quiet = false;
 
@@ -121,4 +129,28 @@ export class ClearButton extends SizedMixin(StyledButton, {
             <div class="fill">${super.render()}</div>
         `;
     }
+
+    public override connectedCallback(): void {
+        super.connectedCallback();
+
+        // Deprecation warning for default slot when content is provided
+        if (window.__swc.DEBUG && this.textContent?.trim()) {
+            window.__swc.warn(
+                this,
+                `The default slot for text content in <${this.localName}> has been deprecated and will be removed in a future release. The clear button is icon-only and does not render slot content. Use the "label" attribute instead to provide an accessible name.`,
+                'https://opensource.adobe.com/spectrum-web-components/components/button/#clear-button',
+                { level: 'deprecation' }
+            );
+        }
+
+        // Warning for missing label attribute
+        if (window.__swc.DEBUG && !this.label) {
+            window.__swc.warn(
+                this,
+                `The "label" attribute is required on <${this.localName}> to provide an accessible name for screen readers. Please add a label attribute, e.g., <${this.localName} label="Clear">.`,
+                'https://opensource.adobe.com/spectrum-web-components/components/button/#clear-button',
+                { level: 'high' }
+            );
+        }
+    }
 }

1st-gen/packages/button/test/clear-button.test.ts

@@ -112,5 +112,45 @@ describe('Clear Button', () => {
             expect(consoleStub).to.be.calledOnce;
             expect(warning.includes(expectedContent)).to.be.true;
         });
+
+        it('should log deprecation warning when slot content is provided', async () => {
+            const el = await fixture<ClearButton>(html`
+                <sp-clear-button label="Clear">Clear</sp-clear-button>
+            `);
+
+            await elementUpdated(el);
+
+            const warning = consoleStub.getCall(0).args.at(0);
+            const expectedContent =
+                'The default slot for text content in <sp-clear-button> has been deprecated';
+
+            expect(consoleStub).to.be.calledOnce;
+            expect(warning.includes(expectedContent)).to.be.true;
+        });
+
+        it('should log warning when label attribute is missing', async () => {
+            const el = await fixture<ClearButton>(html`
+                <sp-clear-button></sp-clear-button>
+            `);
+
+            await elementUpdated(el);
+
+            const warning = consoleStub.getCall(0).args.at(0);
+            const expectedContent =
+                'The "label" attribute is required on <sp-clear-button>';
+
+            expect(consoleStub).to.be.calledOnce;
+            expect(warning.includes(expectedContent)).to.be.true;
+        });
+
+        it('should not log warning when label attribute is provided without slot content', async () => {
+            const el = await fixture<ClearButton>(html`
+                <sp-clear-button label="Clear"></sp-clear-button>
+            `);
+
+            await elementUpdated(el);
+
+            expect(consoleStub).to.not.be.called;
+        });
     });
 });