chore(swatch): use swatch-group in documentation sizes examples

[cdransf]

Description

Updates swatch documentation to use <sp-swatch-group> instead of <div> wrappers in the Sizes section, ensuring proper ARIA semantics for screen readers.

Motivation and context

Swatches in the Sizes section documentation were wrapped in plain <div> elements, causing each swatch to render with role="button" and aria-pressed="false". This resulted in screen readers announcing "Mixed toggle button not pressed" for the mixed-value swatch, which is confusing and incorrect since these swatches are not functioning as toggle controls.

By wrapping swatches in <sp-swatch-group selects="multiple">, swatches receive proper checkbox semantics (role="checkbox") and the mixed-value swatches correctly use aria-checked="mixed".

Related issue(s)

• fixes SWC-1140

---

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 swatch documentation renders correctly with screen reader

  1. Run yarn start:1st-gen (Storybook runs on http://localhost:8080)
  2. Navigate to Swatch > Docs
  3. Use a screen reader (NVDA/VoiceOver) to navigate the Sizes section
  4. Confirm swatches are announced as checkboxes, not toggle buttons
  5. Confirm mixed-value swatch is announced with "mixed" state, not "not pressed"

• Verify swatch group semantics are correct

  1. In Storybook, navigate to Swatch > Docs > Sizes section
  2. Inspect the swatch elements in DevTools
  3. Confirm swatches have role="checkbox" instead of role="button"

Device review

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

---

Note: This is a documentation-only change. No component code was modified. The change replaces <div> wrappers with <sp-swatch-group selects="multiple"> in the Sizes section examples.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0980f89

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 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-5989

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.