fix(clear-button): updates documentation, examples and adds tests for clear button accessibility

[cdransf]

Description

Fixed accessibility violations in the <sp-clear-button> documentation by adding the required label attribute to all examples. The component implementation already correctly handles the label attribute (via the LikeAnchor mixin), but the documentation examples were missing it, causing WCAG 2.1 Level A violations (4.1.2 Name, Role, Value) when rendered on the documentation site.

Additionally:

• Corrected misleading documentation that suggested slot content could be used for labels (the ClearButton overrides buttonContent and does not render slot content)
• Fixed JSDoc in ClearButton.ts to accurately document the label attribute instead of the non-functional slot
• Added three new accessibility tests to verify aria-label behavior
• Fixed grammar: "only close icon" → "only a close icon"

Motivation and context

Users running Axe DevTools on https://swcpreviews.z13.web.core.windows.net/pr-5861/docs/components/clear-button reported "ARIA commands must have an accessible name" violations. The clear button examples were missing the label attribute, which is the only way to provide an accessible name since the component only renders an icon (no slot content).

Related issue(s)

• Reported via accessibility audit using Axe DevTools Chrome extension

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

Manual review test cases

• Verify all clear-button examples on documentation page have accessible names

  1. Navigate to https://opensource.adobe.com/spectrum-web-components/components/clear-button/
  2. Run Axe DevTools browser extension
  3. Expect no "ARIA commands must have an accessible name" violations for clear buttons

• Verify clear button aria-label is set correctly

  1. Inspect any <sp-clear-button label="Clear"> element
  2. Check the rendered HTML attributes
  3. Expect role="button" and aria-label="Clear" on the host element

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8c64af6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a 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-5861

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.

[nikkimk]

LGTM

[caseyisonit]

📚 Branch Preview

• Documentation Site
• Storybook

The documentation site is not reflecting the changes in the markdown. im going to check it out locally but we might need to investigate why thats not working

[caseyisonit]

Probably a follow up ticket but the docs site for clear button is rendering the default button demo at the top and not a close button

[Rajdeepc]

📚 Branch Preview

• Documentation Site
• Storybook

The documentation site is not reflecting the changes in the markdown. im going to check it out locally but we might need to investigate why thats not working

The documentation system (copy-component-docs.js) looks for template.js/ts in the package directory's stories/ folder, not the parent package.

Currently:

• clear-button.md lives in packages/button/clear-button.md
• Documentation system processes it as component clear-button with package button
• It looks for template at: packages/button/stories/template.js
• That template only renders <sp-button>, not <sp-clear-button> as here

There are several ways to tackle this but would be a good follow up fix.

[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-5861

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.

[caseyisonit]

lgtm

Reviewed all of Rajdeeps comments have been addressed and unblocking this PR while he is on PTO