Draft
Conversation
* docs(illustrated-message): add migration plan for SWC-1834 * docs(illustrated-message): update migration plan with reviewer feedback for SWC-1834 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs(illustrated-message): add size variants s|m|l with m as default per React Spectrum --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat(illustrated-message): file structure and initial API pass * test(illustrated-message): add stories, interaction tests, and a11y spec Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(illustrated-message): update a11y snapshot to match current story heading Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(illustrated-message): extract headingClass const and fix Playground illustration slot * refactor(illustrated-message): remove heading and description attributes, rely on slots only * refactor(illustrated-message): update stories to use template pattern and simplify API docs * refactor(illustrated-message): update stories to use html template slot pattern with inline SVG --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
* feat(illustrated-message): file structure and initial API pass * test(illustrated-message): add stories, interaction tests, and a11y spec Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(illustrated-message): update a11y snapshot to match current story heading Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(illustrated-message): add size and orientation additive features Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(illustrated-message): re-add size and orientation additive API * feat(illustrated-message): add size and orientation additive API and css * fix(illustrated-message): add runtime validation and tighten const types * test(illustrated-message): add size and orientation attribute/property tests --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
… into s2/illustrated-message
…6173) * feat(illustrated-message): slot-based heading API + gen1 deprecation * fix(illustrated-message): enable verbose mode for deprecation tests and add heading slot validation * feat(illustrated-message): update status to unsupported (SWC-1944) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(illustrated-message): register custom element in stories to unblock a11y tests * fix(illustrated-message): replace component-level deprecation with property-level warnings * docs(contributor-docs): add deprecation warning guidance to debug-validation guide * docs(contributor-docs): rename "Warning structure" to "Deprecation warning structure" for clarity * fix(illustrated-message): scope heading slot validation to slotchange instead of every updated() * test(illustrated-message): update heading slot test * fix(illustrated-message): register slotchange listener unconditionally, guard warn inside method --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
…ctrum-web-components into s2/illustrated-message
* feat(illustrated-message): slot-based heading API + gen1 deprecation * fix(illustrated-message): enable verbose mode for deprecation tests and add heading slot validation * feat(illustrated-message): update status to unsupported (SWC-1944) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(illustrated-message): register custom element in stories to unblock a11y tests * fix(illustrated-message): migrate CSS to S2 tokens and fix story illustration scaling * fix(illustrated-message): dry up cloud SVG and revert doc-story selector change * fix(illustrated-message): address CSS PR feedback * refactor(illustrated-message): scope heading slot validation to slotchange event * fix(illustrated-message): add Sizes and Orientation option stories * fix(illustrated-message): minor copy tweaks * fix(illustrated-message): css selector updates and jsdoc --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
…nd tests (#6191) * style(illustrated-message): align source, stories, and tests with CONTRIBUTOR-DOCS code standards * chore(illustrated-message): add SWC-1992 ticket reference to Stackblitz todo * fix(illustrated-message): scope a11y spec locators to swc-illustrated-message instances
… into s2/illustrated-message
|
Contributor
📚 Branch Preview Links🔍 First Generation 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Migrates
sp-illustrated-messagetoswc-illustrated-messagefor Spectrum 2. This includes the full component implementation, CSS token migration, accessibility improvements, and consumer-facing migration documentation.Key changes:
size(s|m|l) andorientation(vertical|horizontal) attributesheadinganddescriptionattributes removed; consumers must use<h2>–<h6 slot="heading">and<span slot="description"><h2>)aria-hiddenorrole="img"+aria-labelon the slotted SVG)--mod-illustrated-message-*to--swc-illustrated-message-*tokensMotivation and context
Part of the Spectrum 2 component migration workstream. The 1st-gen component had no size or layout control, always rendered a fixed
<h2>with no heading level API, and did not give consumers control over illustration accessibility intent.Related issue(s)
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
Consumer migration guide renders in Storybook
Components / Illustrated message / Consumer migration guideHeading level is consumer-controlled
swc-illustrated-messageStorybook entry<h3>into the heading slot<h3>, not a fixed<h2>Size and orientation attributes work
swc-illustrated-messagesize="s",size="m",size="l"render at the correct illustration sizesorientation="horizontal"switches to a row layoutDevice review
Accessibility testing checklist
Keyboard — No focusable parts on the host. Confirm Tab moves through any interactive elements in the description slot in document order, with no focus traps.
swc-illustrated-messageStorybook entryScreen reader — Heading level, heading text, and description are announced correctly.
swc-illustrated-messageStorybook entry with a screen reader activearia-hidden)