From d92eddb9c7a2ba2528262cecaa93484dd4c463fd Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Wed, 12 Nov 2025 16:16:02 -0800
Subject: [PATCH] fix(close-button): add a default slot containing visually
 hidden text for close button

---
 .changeset/odd-times-give.md                  |  5 +++
 1st-gen/packages/button/src/CloseButton.ts    |  9 ++++-
 .../packages/button/test/close-button.test.ts | 34 +++++++++++++++++--
 .../src/close-button-overrides.css            | 13 +++++++
 4 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/odd-times-give.md

diff --git a/.changeset/odd-times-give.md b/.changeset/odd-times-give.md
new file mode 100644
index 00000000000..b1707c65d6d
--- /dev/null
+++ b/.changeset/odd-times-give.md
@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/close-button': minor
+---
+
+Added visually hidden default slot rendering to sp-close-button so text content is accessible to screen readers while remaining invisible to sighted users.
diff --git a/1st-gen/packages/button/src/CloseButton.ts b/1st-gen/packages/button/src/CloseButton.ts
index 75d36e4eea9..403c826631a 100644
--- a/1st-gen/packages/button/src/CloseButton.ts
+++ b/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>
+            `,
+        ];
     }
 }
diff --git a/1st-gen/packages/button/test/close-button.test.ts b/1st-gen/packages/button/test/close-button.test.ts
index 5c896c83ae1..f085fc9fbdc 100644
--- a/1st-gen/packages/button/test/close-button.test.ts
+++ b/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();
+        });
+    });
 });
diff --git a/1st-gen/packages/close-button/src/close-button-overrides.css b/1st-gen/packages/close-button/src/close-button-overrides.css
index 9b023fa4f22..7fe5d252683 100644
--- a/1st-gen/packages/close-button/src/close-button-overrides.css
+++ b/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;
+}