fix(close-button): add a default slot containing visually hidden text for close button

Author: cdransf

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

@@ -75,6 +75,13 @@ export class CloseButton extends SizedMixin(StyledButton, {
     public staticColor?: 'black' | 'white';
 
     protected override get buttonContent(): TemplateResult[] {
-        return [crossIcon[this.size]()];
+        return [
+            crossIcon[this.size](),
+            html`
+                <span id="label" class="visually-hidden">
+                    <slot @slotchange=${this.manageTextObservedSlot}></slot>
+                </span>
+            `,
+        ];
     }
 }

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

@@ -12,8 +12,8 @@
 
 import '@spectrum-web-components/button/sp-close-button.js';
 import { CloseButton } from '@spectrum-web-components/button';
-import { expect, fixture, html } from '@open-wc/testing';
-import { testForLitDevWarnings } from '../../../test/testing-helpers';
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
 
 describe('Close Button', () => {
     testForLitDevWarnings(
@@ -41,4 +41,34 @@ describe('Close Button', () => {
             await expect(el).to.be.accessible();
         });
     });
+
+    describe('accessibility', () => {
+        it('should have accessible name with label attribute', async () => {
+            const el = await fixture<CloseButton>(html`
+                <sp-close-button label="Close"></sp-close-button>
+            `);
+
+            await elementUpdated(el);
+            expect(el.getAttribute('aria-label')).to.equal('Close');
+            await expect(el).to.be.accessible();
+        });
+
+        it('should have accessible name with default slot content', async () => {
+            const el = await fixture<CloseButton>(html`
+                <sp-close-button>Close</sp-close-button>
+            `);
+
+            await elementUpdated(el);
+            await expect(el).to.be.accessible();
+        });
+
+        it('should have accessible name when disabled', async () => {
+            const el = await fixture<CloseButton>(html`
+                <sp-close-button disabled>Close</sp-close-button>
+            `);
+
+            await elementUpdated(el);
+            await expect(el).to.be.accessible();
+        });
+    });
 });

1st-gen/packages/close-button/src/close-button-overrides.css

@@ -28,3 +28,16 @@
     --spectrum-closebutton-static-background-color-down: var(--system-close-button-static-black-static-background-color-down);
     --spectrum-closebutton-static-background-color-focus: var(--system-close-button-static-black-static-background-color-focus);
 }
+
+.visually-hidden {
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: 0 -1px -1px 0;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
+}