docs(thumbnail): accessibility migration analysis

[nikkimk]

Description

In CONTRIBUTOR-DOCS/03_project-planning/03_components/thumbnail/accessibility-migration-analysis.md:

• Documented recommendations for ARIA roles, states, and properties for the 2nd-gen Thumbnail: role="img" on the host, aria-label required for the accessible name, and alt="" on the slotted <img> to avoid redundant announcements
• Shadow DOM and cross-root ARIA considerations documented: decorative wrappers only, no cross-root ID references needed
• Accessibility tree expectations documented for default (with slotted image), "hide image" variant, and thumbnail embedded in disabled or selected parent
• Keyboard interaction model specified: not focusable; parent component is responsible for focus, disabled, and selected states
• Testing requirements defined, including unit tests, aXe/Storybook, Playwright ARIA snapshots, contrast checks, and manual screen reader testing in browse mode
• Known 1st-gen accessibility gaps cataloged: no role="img" on host, alt on slotted <img> rather than aria-label on host, and disabled/focused/selected exposed as thumbnail attributes
• disabled, focused, and selected are called out as state the thumbnail must not own; visual treatment for these comes from a parent component
• 1st-gen Jira items cataloged with status; gen2 tickets and audit epics excluded per doc rules

Motivation and context

The 2nd-gen migration is an opportunity to address known accessibility gaps, align with WAI-ARIA Authoring Practices, and ensure the component meets WCAG 2.2 AA compliance. The primary change from 1st-gen is moving from alt on the slotted <img> to role="img" + aria-label on the host, making the semantics consistent across all rendering modes (slotted image, CSS background, checkerboard).

Related issue(s)

• resolves SWC-2196

Screenshots (if appropriate)

---

Author's checklist

• I have read the CONTRIBUTING and PULL_REQUESTS documents.
• I have reviewed 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

Review the Thumbnail accessibility migration analysis

• ARIA roles, states, and properties covered
• Shadow DOM and cross-root ARIA considerations covered
• Accessibility tree documented
• Keyboard interaction fully specified
• Testing requirements defined
• Known 1st-gen issues cataloged with dispositions
• Review the changes that include the adaptive dual-border guidance

Device review

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

Accessibility testing checklist

This PR adds only documentation (a contributor planning doc). No interactive component was added or modified. No runtime behavior changed.

• Keyboard — not applicable; no component code was added or modified
• Screen reader — not applicable; no component code was added or modified

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2bfea85

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

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.

[coveralls]

Coverage Report for CI Build 28254118672

Coverage remained the same at 96.246%

Details

• Coverage remained the same as the base build.
• Patch coverage: No coverable lines changed in this PR.
• No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.

---

Coverage Stats

Relevant Lines:	39173
Covered Lines:	37902
Line Coverage:	96.76%
Relevant Branches:	6459
Covered Branches:	6017
Branch Coverage:	93.16%
Branches in Coverage %:	Yes
Coverage Strength:	458.87 hits per line

---

💛 - Coveralls

[cdransf]

Looks great! ✨

[5t3ph]

Question on labeling strictness

[5t3ph]

I think most often the name will come from associated content (visible layer name, card title, etc) and the thumbnail itself will effectively be alt="". So I'm not sure throwing a warning is necessary if we default to an empty alt?

[nikkimk]

@5t3ph we could follow asset's pattern of the decorative attribute being required. What are your thoughts?

[nikkimk]

My bad: it was swc-avatar that had the decorative property. And decorative sets aria-hidden