docs(thumbnail): accessibility migration analysis#6447
Conversation
|
nikkimk
added
Status:Ready for review
📚 Branch Preview Links🔍 Gen1 Visual Regression Test ResultsWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
Deployed to Azure Blob Storage: If the changes are expected, update the |
Coverage Report for CI Build 28890658393Warning Build has drifted: This PR's base is out of sync with its target branch, so coverage data may include unrelated changes. Coverage decreased (-0.001%) to 96.254%Details
Uncovered ChangesNo uncovered changes found. Coverage RegressionsNo coverage regressions found. Coverage Stats
💛 - Coveralls |
5t3ph
left a comment
5t3ph
left a comment
There was a problem hiding this comment.
Question on labeling strictness
| |-------|------------| | ||
| | **One semantic role** | `swc-thumbnail` is an image container. It exposes one prescribed role: `role="img"`. **Do not** allow authors to override the host role (for example, do **not** expose `role="button"` or `role="presentation"`). If an interactive thumbnail is needed, authors should wrap the component inside an interactive element like a button or link. | | ||
| | **Host `role="img"`** | Set `role="img"` on the host element. This is **prescribed and fixed**. The host carries the image semantics in all rendering modes: slotted image, CSS background, or checkerboard only. | | ||
| | **Accessible name (required)** | Every thumbnail must have a name that assistive technology can announce. Use `aria-label` on the host (for example `aria-label="Layer 1 preview"`). An empty or missing accessible name fails [WCAG 1.1.1](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html). A dev-mode warning is appropriate when no name is detectable at runtime. | |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
@5t3ph we could follow asset's pattern of the decorative attribute being required. What are your thoughts?
There was a problem hiding this comment.
My bad: it was swc-avatar that had the decorative property. And decorative sets aria-hidden
4 participants
Description
In
CONTRIBUTOR-DOCS/03_project-planning/03_components/thumbnail/accessibility-migration-analysis.md:role="img"on the host,aria-labelrequired for the accessible name, andalt=""on the slotted<img>to avoid redundant announcementsrole="img"on host,alton slotted<img>rather thanaria-labelon host, anddisabled/focused/selectedexposed as thumbnail attributesdisabled,focused, andselectedare called out as state the thumbnail must not own; visual treatment for these comes from a parent componentMotivation 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
alton the slotted<img>torole="img"+aria-labelon the host, making the semantics consistent across all rendering modes (slotted image, CSS background, checkerboard).Related issue(s)
Screenshots (if appropriate)
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
Review the Thumbnail accessibility migration analysis
Device review
Accessibility testing checklist
This PR adds only documentation (a contributor planning doc). No interactive component was added or modified. No runtime behavior changed.