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

[cdransf]

fix(close-button): add accessible name support for default slot

Description

Added visually hidden default slot rendering to sp-close-button so text content is accessible to screen readers while remaining invisible to sighted users.

Changes:

• Render default slot with .visually-hidden styling in CloseButton.ts
• Add .visually-hidden CSS class to close-button-overrides.css
• Add accessibility tests to verify screen reader support

Motivation and context

<sp-close-button>Close</sp-close-button> had no accessible name for screen readers because the default slot wasn't being rendered. This caused WCAG 4.1.2 (Name, Role, Value - Level A) violations when using slot content instead of the label attribute.

The label attribute already worked correctly (via aria-label), but the documented default slot pattern was inaccessible.

Related issue(s)

• fixes SWC-1150

---

Author's checklist

• I have read the CONTRIBUTING and PULL_REQUESTS documents.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
• I have added automated tests to cover my changes.
• I have included a well-written changeset if my change needs to be published.
• I have included updated documentation if my change required it.

---

Reviewer's checklist

• Includes a Github Issue with appropriate flag or Jira ticket number without a link
• Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
• Automated tests cover all use cases and follow best practices for writing
• Validated on all supported browsers
• All VRTs are approved before the author can update Golden Hash

Manual review test cases

• Verify accessible name with default slot

  1. Go to close-button documentation
  2. Enable a screen reader (NVDA, JAWS, VoiceOver, etc.)
  3. Navigate to <sp-close-button>Close</sp-close-button> examples
  4. Expect screen reader announces "Close" as the button's accessible name

• Verify disabled state accessibility

  1. Navigate to disabled close button: <sp-close-button disabled>Disabled</sp-close-button>
  2. Expect screen reader announces the label "Disabled" along with its disabled state when the element is programmatically focused or inspected

• Verify label attribute still works

  1. Navigate to <sp-close-button label="Close"></sp-close-button>
  2. Expect screen reader announces "Close" via aria-label (existing behavior)

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?

[changeset-bot]

🦋 Changeset detected

Latest commit: d92eddb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 78 packages

Name	Type
@spectrum-web-components/close-button	Minor
@spectrum-web-components/button	Minor
@spectrum-web-components/bundle	Minor
@spectrum-web-components/action-bar	Minor
@spectrum-web-components/action-button	Minor
@spectrum-web-components/alert-banner	Minor
@spectrum-web-components/alert-dialog	Minor
@spectrum-web-components/button-group	Minor
@spectrum-web-components/coachmark	Minor
@spectrum-web-components/dialog	Minor
@spectrum-web-components/infield-button	Minor
@spectrum-web-components/picker-button	Minor
@spectrum-web-components/picker	Minor
@spectrum-web-components/search	Minor
@spectrum-web-components/tags	Minor
@spectrum-web-components/toast	Minor
@spectrum-web-components/action-group	Minor
@spectrum-web-components/action-menu	Minor
@spectrum-web-components/combobox	Minor
@spectrum-web-components/contextual-help	Minor
@spectrum-web-components/menu	Minor
@spectrum-web-components/overlay	Minor
@spectrum-web-components/tabs	Minor
@spectrum-web-components/number-field	Minor
@spectrum-web-components/breadcrumbs	Minor
@spectrum-web-components/popover	Minor
@spectrum-web-components/tooltip	Minor
@spectrum-web-components/truncated	Minor
@spectrum-web-components/top-nav	Minor
@spectrum-web-components/slider	Minor
@spectrum-web-components/card	Minor
@spectrum-web-components/accordion	Minor
@spectrum-web-components/asset	Minor
@spectrum-web-components/avatar	Minor
@spectrum-web-components/badge	Minor
@spectrum-web-components/checkbox	Minor
@spectrum-web-components/clear-button	Minor
@spectrum-web-components/color-area	Minor
@spectrum-web-components/color-field	Minor
@spectrum-web-components/color-handle	Minor
@spectrum-web-components/color-loupe	Minor
@spectrum-web-components/color-slider	Minor
@spectrum-web-components/color-wheel	Minor
@spectrum-web-components/divider	Minor
@spectrum-web-components/dropzone	Minor
@spectrum-web-components/field-group	Minor
@spectrum-web-components/field-label	Minor
@spectrum-web-components/help-text	Minor
@spectrum-web-components/icon	Minor
@spectrum-web-components/icons-ui	Minor
@spectrum-web-components/icons-workflow	Minor
@spectrum-web-components/icons	Minor
@spectrum-web-components/iconset	Minor
@spectrum-web-components/illustrated-message	Minor
@spectrum-web-components/link	Minor
@spectrum-web-components/meter	Minor
@spectrum-web-components/modal	Minor
@spectrum-web-components/progress-bar	Minor
@spectrum-web-components/progress-circle	Minor
@spectrum-web-components/radio	Minor
@spectrum-web-components/sidenav	Minor
@spectrum-web-components/split-view	Minor
@spectrum-web-components/status-light	Minor
@spectrum-web-components/swatch	Minor
@spectrum-web-components/switch	Minor
@spectrum-web-components/table	Minor
@spectrum-web-components/textfield	Minor
@spectrum-web-components/thumbnail	Minor
@spectrum-web-components/tray	Minor
@spectrum-web-components/underlay	Minor
@spectrum-web-components/base	Minor
@spectrum-web-components/grid	Minor
@spectrum-web-components/opacity-checkerboard	Minor
@spectrum-web-components/reactive-controllers	Minor
@spectrum-web-components/shared	Minor
@spectrum-web-components/styles	Minor
@spectrum-web-components/theme	Minor
@spectrum-web-components/eslint-plugin	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

📚 Branch Preview

• Documentation Site
• Storybook

🔍 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-5881

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

[Rajdeepc]

@cdransf Disabled buttons will not be included in the tab order. The assertion should be "A screen reader should announce the label “Disabled” along with its disabled state when the element is programmatically focused or inspected"

[rise-erpelding]

This looks great! I think this only needs a changeset, and it's good to go!

I can hear slot content/label attributes being announced, and noted that running axe DevTools on the updated docs page, the "ARIA commands must have an accessible name" issue disappears! 🙌

[github-actions]

📚 Branch Preview Links

• Documentation Site (first-gen)
• Storybook (first-gen)
• Storybook (second-gen)

🔍 First Generation Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-5881

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.