chore(tabs): add VRT coverage

[cdransf]

Description

Adds 2nd-gen/packages/swc/components/tabs/test/vrt/tabs.vrt.ts and tabs-custom-properties.vrt.ts, providing dedicated Chromatic VRT coverage for the tabs three-element component (swc-tabs, swc-tab, swc-tab-panel):

• Permutations: direction (horizontal/vertical) x density (regular/compact), individual tab states (default/selected/disabled), a fully disabled container, anatomy (text-only/icon+text/icon-only), forced hover/focus-visible/active on individual tabs, and CJK tab labels (ja/ko/zh).
• ForcedColors: the same permutation set under forced-colors emulation, covering the forced-colors overrides defined on all three parts of the architecture.
• CustomProperties: one reference/override row per documented custom property, split into two groups (Tabs, Tab) and verified against the manifest for each of the two declarations independently. TabPanel has no documented @cssprop (the --swc-tab-panel-padding-top its CSS uses isn't part of its public API contract), so it has no custom-properties row here - that's expected, not a gap.

This PR touches only files under components/tabs/test/vrt/ - no component source and no shared .storybook/helpers changes. (An earlier version of this PR also documented a missing @cssprop on TabPanel.ts and re-added a shared VRT caption helper; both were reverted to keep this change scoped purely to test coverage for tabs, per review discussion.)

Motivation and context

The tabs component had no dedicated VRT coverage. This follows the VRT foundation established for button (PR #6463), extending it to tabs per the linked ticket.

The ticket's acceptance criteria asked for a "quiet variant" snapshot, but swc-tabs has no quiet property - it was explicitly removed in the 2nd-gen migration (migration-guide.mdx: "No replacement; not part of Spectrum 2 surface"). Substituted density (regular/compact) instead, since that's the actual replacement axis for the removed quiet treatment.

Related issue(s)

• fixes SWC-2414

Screenshots (if appropriate)

N/A - test-only change, no visual/behavioral change to the components themselves. Manually verified via Playwright screenshots of the built Storybook (including real forced-colors media emulation, not just the inert Chromatic parameter) during development; a nesting bug in the custom-properties layout was caught and fixed this way before landing.

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

• Tabs VRT stories render correctly
  1. Go to Storybook > Components > Tabs > Tabs VRT
  2. Review the Permutations, ForcedColors, and CustomProperties stories
  3. Expect direction/density/state/anatomy/forced-state/CJK combinations to render correctly in both light/ltr and dark/rtl, with the selection indicator correctly positioned under the selected tab in every group

Device review

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

Accessibility testing checklist

• Keyboard
  These are non-interactive VRT snapshot fixtures (tagged dev, excluded from the interactive Storybook sidebar in normal use); no new keyboard behavior is introduced. Confirm no regressions in the existing tabs.stories.ts docs examples' keyboard navigation (arrow keys, Home/End, Enter/Space activation).

• Screen reader

  1. Go to Storybook > Components > Tabs > Tabs VRT > Permutations
  2. Inspect the icon-only anatomy group and the individual tab-states group with a screen reader or the accessibility tree
  3. Expect icon-only tabs to announce their aria-label (e.g. "Dashboard"), the disabled tab to announce as unavailable, and the selected tab to announce aria-selected="true"

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9076e60

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

• Storybook (Gen2, dev mode)
• Storybook (Gen2, prod mode)
• Documentation Site (Gen1)
• Storybook (Gen1)

🔍 Gen1 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-6621

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.

[aramos-adobe]

Super cool!

[aramos-adobe]

My only comment is the forced states. Realistically, shouldn't the focus-visible state be selected when tabbed and the underline is visible?

[rise-erpelding]

A few tiny questions/suggestions, but overall looks good!

[cdransf]

My only comment is the forced states. Realistically, shouldn't the focus-visible state be selected when tabbed and the underline is visible?

Ended up dropping in a change here 285921f based on @rise-erpelding's feedback that touched on the same spot in the code. ✨

[rise-erpelding]

My only comment is the forced states. Realistically, shouldn't the focus-visible state be selected when tabbed and the underline is visible?

@aramos-adobe I think this is a valid concern, in a real use case focus-visible would always happen when a tab is also selected... @cdransf Would we want to change the forced states so that the first selected tab is actually a focus visible instead?

Claude did bring up the concern that we're not testing selected + hover, but I think that may be overkill for this component, because the only hover effect is a text color change, and it's the same color change that selected gets. But could be a valid thing to look out for in other components!