diff --git a/CONTRIBUTOR-DOCS/03_project-planning/03_components/README.md b/CONTRIBUTOR-DOCS/03_project-planning/03_components/README.md
index cab19cbf7cf..49ff818082c 100644
--- a/CONTRIBUTOR-DOCS/03_project-planning/03_components/README.md
+++ b/CONTRIBUTOR-DOCS/03_project-planning/03_components/README.md
@@ -27,9 +27,7 @@
- Asset
- [Asset migration roadmap](asset/rendering-and-styling-migration-analysis.md)
- Avatar
- - [Avatar accessibility migration analysis](avatar/accessibility-migration-analysis.md)
- - [Avatar — 2nd-Gen Migration Plan](avatar/migration-plan.md)
- - [Avatar migration roadmap](avatar/rendering-and-styling-migration-analysis.md)
+ - [Avatar accessibility migration analysis](avatar/rendering-and-styling-migration-analysis.md)
- Badge
- [Badge accessibility migration analysis](badge/accessibility-migration-analysis.md)
- [Badge migration roadmap](badge/rendering-and-styling-migration-analysis.md)
@@ -41,6 +39,8 @@
- [Checkbox migration roadmap](checkbox/rendering-and-styling-migration-analysis.md)
- Color Field
- [Color field migration roadmap](color-field/rendering-and-styling-migration-analysis.md)
+- Color Loupe
+ - [Color loupe accessibility migration analysis](color-loupe/accessibility-migration-analysis.md)
- Divider
- [Divider accessibility migration analysis](divider/accessibility-migration-analysis.md)
- [Divider migration roadmap](divider/rendering-and-styling-migration-analysis.md)
@@ -53,6 +53,7 @@
- Help Text
- [Help text migration roadmap](help-text/rendering-and-styling-migration-analysis.md)
- Illustrated Message
+ - [Illustrated message accessibility migration analysis](illustrated-message/accessibility-migration-analysis.md)
- [Illustrated message migration roadmap](illustrated-message/rendering-and-styling-migration-analysis.md)
- Infield Button
- [In-field button migration roadmap](infield-button/rendering-and-styling-migration-analysis.md)
@@ -69,6 +70,7 @@
- Picker Button
- [Picker button migration roadmap](picker-button/rendering-and-styling-migration-analysis.md)
- Progress Bar
+ - [Progress bar accessibility migration analysis](progress-bar/accessibility-migration-analysis.md)
- [Progress bar migration roadmap](progress-bar/rendering-and-styling-migration-analysis.md)
- Progress Circle
- [Progress circle accessibility migration analysis](progress-circle/accessibility-migration-analysis.md)
diff --git a/CONTRIBUTOR-DOCS/03_project-planning/03_components/avatar/rendering-and-styling-migration-analysis.md b/CONTRIBUTOR-DOCS/03_project-planning/03_components/avatar/rendering-and-styling-migration-analysis.md
index 32071223a2a..a8fda78aeab 100644
--- a/CONTRIBUTOR-DOCS/03_project-planning/03_components/avatar/rendering-and-styling-migration-analysis.md
+++ b/CONTRIBUTOR-DOCS/03_project-planning/03_components/avatar/rendering-and-styling-migration-analysis.md
@@ -1,243 +1,186 @@
-[CONTRIBUTOR-DOCS](../../../README.md) / [Project planning](../../README.md) / [Components](../README.md) / Avatar / Avatar migration roadmap
+[CONTRIBUTOR-DOCS](../../../README.md) / [Project planning](../../README.md) / [Components](../README.md) / Avatar / Avatar accessibility migration analysis
-# Avatar migration roadmap
+# Avatar accessibility migration analysis
In this doc
-- [Component specifications](#component-specifications)
- - [CSS](#css)
- - [SWC](#swc)
-- [Comparison](#comparison)
- - [DOM Structure changes](#dom-structure-changes)
- - [CSS => SWC mapping](#css--swc-mapping)
-- [Summary of changes](#summary-of-changes)
- - [CSS => SWC implementation gaps](#css--swc-implementation-gaps)
- - [CSS Spectrum 2 changes](#css-spectrum-2-changes)
-- [Resources](#resources)
+- [Overview](#overview)
+ - [Also read](#also-read)
+ - [Avatar image as an SWC style](#avatar-image-as-an-swc-style)
+ - [Avatar image as **``** (component)](#avatar-image-as-swc-avatar-component)
+ - [When to use **`swc-avatar-link`** instead](#when-to-use-swc-avatar-link-instead)
+- [ARIA and WCAG context](#aria-and-wcag-context)
+ - [Pattern in the APG](#pattern-in-the-apg)
+ - [Guidelines that apply](#guidelines-that-apply)
+- [Related 1st-gen accessibility (Jira)](#related-1st-gen-accessibility-jira)
+- [Recommendations: avatar image](#recommendations-avatar-image)
+ - [SWC style (native **`
`**)](#swc-style-native-img)
+ - [**``** (component)](#swc-avatar-component)
+ - [Shared: tokens and **`swc-avatar-link`**](#shared-tokens-and-swc-avatar-link)
+ - [ARIA roles, states, and properties](#aria-roles-states-and-properties)
+ - [Shadow DOM and cross-root ARIA Issues](#shadow-dom-and-cross-root-aria-issues)
+ - [Accessibility tree expectations](#accessibility-tree-expectations)
+ - [Keyboard and focus](#keyboard-and-focus)
+- [Known 1st-gen issues](#known-1st-gen-issues)
+- [Testing](#testing)
+ - [Automated tests](#automated-tests)
+- [Summary checklist](#summary-checklist)
+- [References](#references)
-## Component specifications
+## Overview
-### CSS
+This doc defines how the **avatar image** should work for **accessibility**—the **static**, **non-navigating** photo (not wrapped in a link)—targeting **WCAG 2.2 Level AA**. **2nd-gen** should **offer** the avatar image in **two** ways so teams can choose what fits their stack:
-
-CSS selectors
+1. **SWC style** — Spectrum **CSS** / **design tokens** and **usage guidance** applied to a native **`
`** (or equivalent) in **light** DOM.
+2. **Component** — **``** (no **`href`**) that **encapsulates** the same **visual** **language**, **`src`**, **`label`** → shadow **`
`**, **`isDecorative`**, and **dev** **warnings**, matching **1st-gen** **``** without **`href`** in spirit.
-**Root class**: `.spectrum-Avatar`
+**Linked** avatars (hyperlink affordance) use a **separate** **component**: **`swc-avatar-link`** (see [Avatar link accessibility migration analysis](../avatar-link/accessibility-migration-analysis.md)).
-**Elements**:
+**1st-gen** **``** mixes **avatar image** and **`href`** on one tag; **2nd-gen** splits **``** (static) **or** **styled** **`
`** from **`swc-avatar-link`**.
-- `.spectrum-Avatar-image`
-- `.spectrum-Avatar-link`
+### Also read
-**States**:
+- [Avatar migration roadmap](./rendering-and-styling-migration-analysis.md) for layout, CSS, and DOM.
+- [Avatar link accessibility migration analysis](../avatar-link/accessibility-migration-analysis.md) for **`href`**, keyboard, and link naming.
-- `.spectrum-Avatar.is-disabled`
-- `.spectrum-Avatar.is-focused:not(.is-disabled):after`
-- `.spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible:after`
+### Avatar image as an SWC style
-**Variants**:
+- **Visual:** circular (or Spectrum-shaped) chrome via shared classes / custom properties (see the rendering roadmap), applied to a standard **`
`**.
+- **Semantics:** **`alt`** / **`alt=""`** + **`aria-hidden="true"`** are **author-owned**; optional **ESLint**, Storybook, or docs checks can mirror **1st-gen** **warnings** when **avatar** **styling** is detected.
-- `.spectrum-Avatar--size50`
-- `.spectrum-Avatar--size75`
-- `.spectrum-Avatar--size100`
-- `.spectrum-Avatar--size200`
-- `.spectrum-Avatar--size300`
-- `.spectrum-Avatar--size400`
-- `.spectrum-Avatar--size500`
-- `.spectrum-Avatar--size600`
-- `.spectrum-Avatar--size700`
-- `.spectrum-Avatar--size800`
-- `.spectrum-Avatar--size900`
-- `.spectrum-Avatar--size1000`
-- `.spectrum-Avatar--size1100`
-- `.spectrum-Avatar--size1200`
-- `.spectrum-Avatar--size1300`
-- `.spectrum-Avatar--size1400`
-- `.spectrum-Avatar--size1500`
+### Avatar image as **``** (component)
-
+- **Visual:** same **tokens** / **stylesheet** surface as the **SWC** **style** path so **`swc-avatar-link`** and **``** stay **visually** **aligned**.
+- **Semantics:** expose **`label`** → shadow **`
`**, **`isDecorative`** (reflect **`is-decorative`**), and **dev-only** **`window.__swc.warn`** when **`!label && !isDecorative`**, per **1st-gen** **`Avatar.ts`** and resolved **[SWC-915](https://jira.corp.adobe.com/browse/SWC-915)** (Adobe internal Jira).
+- **No `href`** on **``**; navigation is **`swc-avatar-link`** only.
-
-Passthroughs
+### When to use **`swc-avatar-link`** instead
-None found for this component.
+- The avatar image should **navigate** (profile, mailto, external URL). Use **`swc-avatar-link`** so focus, keyboard, and name match a real hyperlink.
-
+---
-
-Modifiers *deprecated*
+## ARIA and WCAG context
-- `--mod-avatar-block-size`
-- `--mod-avatar-border-radius`
-- `--mod-avatar-color-opacity`
-- `--mod-avatar-color-opacity-disabled`
-- `--mod-avatar-focus-indicator-color`
-- `--mod-avatar-focus-indicator-gap`
-- `--mod-avatar-focus-indicator-thickness`
-- `--mod-avatar-inline-size`
+### Pattern in the APG
-
+- Treat the **avatar image** as an **informative** or **decorative** image ([non-text content](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content)). There is no separate APG “avatar” role.
-### SWC
+### Guidelines that apply
-
-Attributes
+| Idea | Plain meaning |
+|------|----------------|
+| [Non-text content (1.1.1)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) | Meaningful avatar images need **`alt`** text; decorative ones use **`alt=""`** and hide from AT when appropriate (**`aria-hidden="true"`**). |
+| [Name, role, value (4.1.2)](https://www.w3.org/TR/WCAG22/#name-role-value) | The meaningful node is the **`
`** (name via **`alt`**); the **avatar image** is not an interactive widget. |
-- `src` (string) - Source URL for the avatar image
-- `size` (number) - Size of the avatar (50, 75, 100, 200, 300, 400, 500, 600, 700)
-- `href` (string) - Link URL when avatar is clickable
-- `label` (string) - Alt text for the avatar image
-- `disabled` (boolean) - Whether the avatar is disabled
+**Bottom line:** The **avatar image** is not a link or button. Do not put it in the **Tab** order. A native **`
`** is not tab-focusable by default; **``** must **not** delegate **focus** to the host or shadow **`
`** (fix **1st-gen** **`Focusable`** behavior for the static case).
-Note that other link-related attributes are available on the base `LikeAnchor` class, such as `download`, `href`, `referrerpolicy`, `rel`, `target`, and `type` but are not necessarily applicable to the avatar component and so not listed out explicitly here.
+---
-
+## Related 1st-gen accessibility (Jira)
-
-Slots
+| Jira | Type | Status (snapshot) | Resolution (snapshot) | Summary |
+|------|------|-------------------|-------------------------|---------|
+| [SWC-915](https://jira.corp.adobe.com/browse/SWC-915) | Bug | Done | Done | [Bug][a11y]: Avatar should render an `alt` tag even if no label is specified to avoid a11y violations |
-None found for this component.
+---
-
+## Recommendations: avatar image
-## Comparison
+### SWC style (native **`
`**)
-### DOM Structure changes
+| Topic | What to do |
+|-------|------------|
+| **Decorative** | **`alt=""`** and **`aria-hidden="true"`** when the image adds no information—same outcome as **`isDecorative`** on **``**. |
+| **Informative** | Non-empty **`alt`** (person name, account role, entity name)—**WCAG 1.1.1**. |
+| **Tooling** | Optional ESLint / Storybook / docs checks flag **`
`** with avatar styling that lacks **`alt`** or a decorative pairing. |
+| **Role** | Do not wrap in **`role="button"`** or **`role="link"`** unless interactive (then use **`swc-avatar-link`** or a button). |
-
-Spectrum Web Components
+### **``** (component)
-```html
-
-
-
-
+| Topic | What to do |
+|-------|------------|
+| **`isDecorative`** | Add **`is-decorative`**; **`alt=""`** and **`aria-hidden="true"`** on shadow **`
`** when decorative and not linked (match **1st-gen** render rules). |
+| **`label`** | Maps to shadow **`
`** when the image is informative. |
+| **Dev warning** | **`!label && !isDecorative`** → **`window.__swc.warn`** in dev, as **1st-gen**. |
+| **No `href`** | Reject or ignore **`href`** on **``**; authors use **`swc-avatar-link`**. Consider a dev mode warning for **`href`** on **``** to help teams migrate to **`swc-avatar-link`**.|
+| **Focus** | **Not** **focusable**; do **not** extend **`Focusable`** for the static avatar image, or ensure **`tabIndex`** **-1** and **no** **delegated** **focus** **to** **host**. |
-
-
-```
+### Shared: tokens and **`swc-avatar-link`**
-
+- Ship one **avatar** **appearance** **surface** (CSS + tokens) consumed by **apps**, **``**, and **`swc-avatar-link`** internally.
-
-Legacy (CSS main branch)
-
-```html
-
-
-
-
-
-
![[altText]]([image])
-
-```
+### ARIA roles, states, and properties
-
+| Topic | What to do |
+|-------|------------|
+| **Host** | **``** should **not** expose **`role="button"`** or **`role="link"`**. |
+| **Decorative** | Empty **`alt`** and **`aria-hidden="true"`** on the **`
`** when the photo is pure decoration relative to adjacent text. |
-
-Spectrum 2 (CSS spectrum-two branch)
-
-```html
-
-
-
-
-
-
![[altText]]([image])
-
-```
+### Shadow DOM and cross-root ARIA Issues
-
+- **SWC** **style** path: **`
`** in **light** DOM—**`alt`** is straightforward.
+- **``**: **`label`** → shadow **`
`** **`alt`**; no **cross-root** **`aria-labelledby`** required if **`alt`** is correct.
-
-Diff: Legacy (CSS main) → Spectrum 2 (CSS spectrum-two)
+### Accessibility tree expectations
-No significant structural changes.
+- **Informative:** screen readers announce **`alt`** (from author or **`label`**).
+- **Decorative:** image skipped per **`alt=""`** / **`aria-hidden`**; nearby text carries identity.
-
+### Keyboard and focus
+
+**Not focusable.** Keyboard navigation should skip this component and move to the next focusable element.
+
+---
+
+## Known 1st-gen issues
-### CSS => SWC mapping
+- **Single** **``** supports **`href`** and **`Focusable`**, mixing **avatar image** and **link**—migrate to **``** **or** **SWC** **style** **+** **`img`**, **plus** **`swc-avatar-link`** for links.
+- **Non-link** **`Focusable`** may leave the host as **`focusElement`** when **`#link`** is absent—**``** must not repeat that for static avatar images.
+- **`warnMissingAlt`** and **[SWC-915](https://jira.corp.adobe.com/browse/SWC-915)** define **1st-gen** avatar image rules; **2nd-gen** **`swc-avatar`** should preserve them on the component path, and the **SWC** **style** path should document the same rules for authors and optional lint.
-| CSS selector | Attribute or slot | Status |
-| ---------------------------- | -------------------- | ---------------------------------------- |
-| `.spectrum-Avatar--size50` | `size="50"` | Implemented |
-| `.spectrum-Avatar--size75` | `size="75"` | Implemented |
-| `.spectrum-Avatar--size100` | `size="100"` | Implemented |
-| `.spectrum-Avatar--size200` | `size="200"` | Implemented |
-| `.spectrum-Avatar--size300` | `size="300"` | Implemented |
-| `.spectrum-Avatar--size400` | `size="400"` | Implemented |
-| `.spectrum-Avatar--size500` | `size="500"` | Implemented |
-| `.spectrum-Avatar--size600` | `size="600"` | Implemented |
-| `.spectrum-Avatar--size700` | `size="700"` | Implemented |
-| `.spectrum-Avatar-image` | `src` attribute | Implemented |
-| `.spectrum-Avatar-link` | `href` attribute | Implemented |
-| `.is-focused` | Focus state | Implemented |
-| `.is-disabled` | `disabled` attribute | Implemented |
-| `.spectrum-Avatar--size800` | `size="800"` | Missing from WC (new size in Spectrum 2) |
-| `.spectrum-Avatar--size900` | `size="900"` | Missing from WC (new size in Spectrum 2) |
-| `.spectrum-Avatar--size1000` | `size="1000"` | Missing from WC (new size in Spectrum 2) |
-| `.spectrum-Avatar--size1100` | `size="1100"` | Missing from WC (new size in Spectrum 2) |
-| `.spectrum-Avatar--size1200` | `size="1200"` | Missing from WC (new size in Spectrum 2) |
-| `.spectrum-Avatar--size1300` | `size="1300"` | Missing from WC (new size in Spectrum 2) |
-| `.spectrum-Avatar--size1400` | `size="1400"` | Missing from WC (new size in Spectrum 2) |
-| `.spectrum-Avatar--size1500` | `size="1500"` | Missing from WC (new size in Spectrum 2) |
+---
-## Summary of changes
+## Testing
-### CSS => SWC implementation gaps
+### Automated tests
-**CSS features missing from Web Component:**
+| Kind of test | What to check |
+|--------------|----------------|
+| **Docs / examples** | **SWC** **style:** styled **`
`** has **`alt`** or decorative pattern (**`alt=""`** + **`aria-hidden`**). **Component:** **``** stories cover **`label`**, **`isDecorative`**, and dev warnings. |
+| **Unit (`swc-avatar`)** | **`label`** → **`img.alt`**; **`isDecorative`** matches **1st-gen**; **`href`** not supported. |
+| **Focus** | **``** is in the Tab order. |
+| **aXe + Storybook** | Stories cover both **style** and **component** examples with real **`alt`** or explicit decorative markup. |
-- Larger size variants (800, 900, 1000, 1100, 1200, 1300, 1400, 1500)
+---
-**Web Component features missing from CSS:**
-None found for this component.
+## Summary checklist
-### CSS Spectrum 2 changes
+- [ ] **Avatar image** is offered and documented as **both** **SWC** **style** (**`
`**) **and** **``** (no **`href`**).
+- [ ] Shared **CSS** / **tokens** keep **``**, **SWC** **style**, and **`swc-avatar-link`** visually aligned.
+- [ ] Guidance covers decorative vs informative **`alt`**, **`aria-hidden`**, and **`isDecorative`** / **`label`** on **``**.
+- [ ] **``** uses dev warnings like **1st-gen**; **SWC** **style** path documents optional lint or docs checks.
+- [ ] Avatar image is not keyboard-focusable on either path.
+- [ ] **`swc-avatar-link`** owns linked cases; cross-link [Avatar link accessibility migration analysis](../avatar-link/accessibility-migration-analysis.md) from Storybook.
-No significant structural changes between CSS main and spectrum-two branches. The templates are identical, indicating that the avatar component structure remains consistent across Spectrum 2 migration.
+---
-## Resources
+## References
-- [CSS migration](https://github.com/adobe/spectrum-css/pull/3355)
-- [Spectrum 2 preview](https://spectrumcss.z13.web.core.windows.net/pr-2352/index.html?path=/docs/components-avatar--docs)
-- [React](https://react-spectrum.adobe.com/Avatar)
+- [WCAG 2.2](https://www.w3.org/TR/WCAG22/)
+- [Understanding 1.1.1 Non-text content](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content)
+- [Using ARIA (read this first)](https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/)
+- [Avatar migration roadmap](./rendering-and-styling-migration-analysis.md)
+- [Avatar link accessibility migration analysis](../avatar-link/accessibility-migration-analysis.md)
+- [SWC-915](https://jira.corp.adobe.com/browse/SWC-915) (resolved)—**avatar image** accessibility for **``** without **`href`** (Adobe internal Jira)
diff --git a/CONTRIBUTOR-DOCS/03_project-planning/03_components/badge/accessibility-migration-analysis.md b/CONTRIBUTOR-DOCS/03_project-planning/03_components/badge/accessibility-migration-analysis.md
index 11d9ac447b3..c2f6a44f0a0 100644
--- a/CONTRIBUTOR-DOCS/03_project-planning/03_components/badge/accessibility-migration-analysis.md
+++ b/CONTRIBUTOR-DOCS/03_project-planning/03_components/badge/accessibility-migration-analysis.md
@@ -18,6 +18,7 @@
- [ARIA and WCAG context](#aria-and-wcag-context)
- [Pattern in the APG](#pattern-in-the-apg)
- [Guidelines that apply](#guidelines-that-apply)
+- [Related 1st-gen accessibility (Jira)](#related-1st-gen-accessibility-jira)
- [Recommendations: ``](#recommendations-swc-badge)
- [ARIA roles, states, and properties](#aria-roles-states-and-properties)
- [Shadow DOM and cross-root ARIA Issues](#shadow-dom-and-cross-root-aria-issues)
@@ -67,6 +68,14 @@ This doc tells you how **`swc-badge`** should work for **accessibility**. It mat
---
+## Related 1st-gen accessibility (Jira)
+
+| Jira | Type | Status (snapshot) | Resolution (snapshot) | Summary |
+|------|------|-------------------|-------------------------|---------|
+| [SWC-1136](https://jira.corp.adobe.com/browse/SWC-1136) | Bug | To Do | Unresolved | [Accessibility] Text content lacks 4.5:1 contrast ratio — `sp-badge` (semantic) |
+
+---
+
## Recommendations: ``
### ARIA roles, states, and properties
diff --git a/CONTRIBUTOR-DOCS/03_project-planning/03_components/color-loupe/accessibility-migration-analysis.md b/CONTRIBUTOR-DOCS/03_project-planning/03_components/color-loupe/accessibility-migration-analysis.md
new file mode 100644
index 00000000000..9e13c836574
--- /dev/null
+++ b/CONTRIBUTOR-DOCS/03_project-planning/03_components/color-loupe/accessibility-migration-analysis.md
@@ -0,0 +1,146 @@
+
+
+[CONTRIBUTOR-DOCS](../../../README.md) / [Project planning](../../README.md) / [Components](../README.md) / Color Loupe / Color loupe accessibility migration analysis
+
+
+
+# Color loupe accessibility migration analysis
+
+
+
+
+In this doc
+
+- [Overview](#overview)
+ - [Also read](#also-read)
+ - [What it is](#what-it-is)
+- [ARIA and WCAG context](#aria-and-wcag-context)
+ - [Pattern in the APG](#pattern-in-the-apg)
+ - [Guidelines that apply](#guidelines-that-apply)
+- [Related 1st-gen accessibility (Jira)](#related-1st-gen-accessibility-jira)
+- [Recommendations: ``](#recommendations-swc-color-loupe)
+ - [ARIA roles, states, and properties](#aria-roles-states-and-properties)
+ - [Shadow DOM and cross-root ARIA Issues](#shadow-dom-and-cross-root-aria-issues)
+ - [Accessibility tree expectations](#accessibility-tree-expectations)
+ - [Keyboard and focus](#keyboard-and-focus)
+ - [Story and test examples](#story-and-test-examples)
+- [Known 1st-gen issues](#known-1st-gen-issues)
+ - [Non-text contrast on loupe chrome (WCAG 1.4.11)](#non-text-contrast-on-loupe-chrome-wcag-1411)
+- [Testing](#testing)
+ - [Automated tests](#automated-tests)
+- [Summary checklist](#summary-checklist)
+- [References](#references)
+
+
+
+
+
+## Overview
+
+This doc explains how **`swc-color-loupe`** should work for **accessibility**. It supports **WCAG 2.2 Level AA** as the team target, while recording **known** limitations for **non-text contrast** on the loupe chrome. Until **`swc-color-loupe`** ships, use **`1st-gen/packages/color-loupe/src/ColorLoupe.ts`** (``) as the behavioral reference.
+
+### Also read
+
+- [Color field migration roadmap](../color-field/rendering-and-styling-migration-analysis.md)—the loupe is almost always used **with** a color **field** or similar **picker** UI, not alone.
+
+### What it is
+
+- A **visual magnifier** that shows the **picked color** (including **transparency** over an **opacity checkerboard**) inside a **loupe** shape with **inner** / **outer** borders.
+- It is **not** the primary control for choosing a color; it **reflects** the current sample.
+
+---
+
+## ARIA and WCAG context
+
+### Pattern in the APG
+
+- The [APG](https://www.w3.org/WAI/ARIA/apg/) does **not** define a standalone “color loupe” widget. Treat the loupe as **supporting UI** for **color selection**, with **accessibility** carried by the **surrounding** pattern (**label**, **inputs**, **live** value text where appropriate).
+
+### Guidelines that apply
+
+| Idea | Plain meaning |
+|------|----------------|
+| [Non-text contrast (WCAG 1.4.11)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast) | **Borders** and other **non-text** parts needed to **perceive** the loupe shape against **adjacent** colors should meet **at least 3:1** contrast. The loupe sits over **variable** content; **1st-gen** styling often **does not** meet **3:1** for the loupe **chrome**—see **Known 1st-gen issues** and [SWC-1193](https://jira.corp.adobe.com/browse/SWC-1193). |
+| [Non-text content (WCAG 1.1.1)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) | **1st-gen** marks the **SVG** **`aria-hidden="true"`**—the graphic is **decorative** relative to assistive tech **if** the **parent** pattern exposes the **color** and **purpose** in text or other accessible names. |
+| [Use of color (WCAG 1.4.1)](https://www.w3.org/TR/WCAG22/#use-of-color) | The **loupe** shows **color**; meaning must **not** rely on the loupe **alone**. The **field** / **slider** / **hex** input must **state** what is being adjusted. |
+
+**Bottom line:** Pair **`swc-color-loupe`** with a **fully labeled** color **workflow**. Accept **documented** **1.4.11** limitations on loupe **chrome** per **SWC-1193** unless design finds a **conformant** approach that still meets product goals.
+
+---
+
+## Related 1st-gen accessibility (Jira)
+
+| Jira | Type | Status (snapshot) | Resolution (snapshot) | Summary |
+|------|------|-------------------|-------------------------|---------|
+| [SWC-1193](https://jira.corp.adobe.com/browse/SWC-1193) | Bug | Done | Working As Designed | [Accessibility] Graphical object lacks 3:1 contrast ratio — `sp-color-loupe` (Color Loupe Example) |
+
+---
+
+## Recommendations: ``
+
+### ARIA roles, states, and properties
+
+| Topic | What to do |
+|-------|------------|
+| **Non-text contrast (1.4.11)** | Aim for **3:1** on **loupe** **borders** / **edges** vs **adjacent** UI where **feasible**. Where **variable color** constraints make **3:1** **unrealistic** for all states, record the **[SWC-1193](https://jira.corp.adobe.com/browse/SWC-1193)** **decision** and keep **audit** language aligned with SWC-1196's **[comment](https://jira.corp.adobe.com/browse/SWC-1193?focusedId=51301299&page=com.atlassian.jira.plugin.system.issuetabpanels%3Acomment-tabpanel#comment-51301299)** on practical limits. |
+| **Docs** | State that the loupe is a **visual aid**, not a **standalone** **accessible** color **control**. Point authors to **color field** / **picker** docs for **labels**, **keyboard**, and **values**. |
+
+### Shadow DOM and cross-root ARIA Issues
+
+None
+
+### Accessibility tree expectations
+
+- With **1st-gen** **`aria-hidden`** **SVG**, assistive technologies typically **ignore** the **vector** graphic; users rely on **paired** **controls** and **text** for **color** and **context**.
+- If **`open`** is **false**, the loupe is **hidden** visually; behavior should stay **consistent** with **CSS** / **display** and **not** trap **focus** in a **closed** loupe.
+
+### Keyboard and focus
+
+**Not focusable.** Keyboard navigation should skip this component and move to the next focusable element.
+
+### Story and test examples
+
+- **Stories** and **automated tests** should show **`swc-color-loupe`** / **``** **in context** with **other** components (for example a **color field**, **sliders**, **labels**, **help text**), **not** as a **lone** widget on an empty canvas—unless the story’s **only** goal is a **narrow** **visual** check.
+- Examples must be **fully accessible**: **correct** **`label`** / **`aria-labelledby`** / **`aria-label`** where needed, **descriptive** strings (no **placeholder-only** meaning), and **layouts** that resemble **real** product **usage** so **docs**, **VRT**, and **a11y** tests **exercise** realistic **trees**.
+
+---
+
+## Known 1st-gen issues
+
+### Non-text contrast on loupe chrome (WCAG 1.4.11)
+
+- **1st-gen** **``** **border** / **loupe** **outline** styling often **does not** achieve the **minimum 3:1** **contrast ratio** against **adjacent** colors required by [**WCAG 2.2 Success Criterion 1.4.11** (Non-text contrast, Level AA)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast).
+- **[SWC-1193](https://jira.corp.adobe.com/browse/SWC-1193)** (Adobe **internal** Jira): **Najika** notes that meeting **1.4.11** for this control **realistically** may **not** be **achievable** given how the loupe **overlays** **arbitrary** **content** and **Spectrum** **visual** **intent**. Treat that ticket as the **product** / **a11y** **decision** record for **exceptions** or **risk** **acceptance** until **design** **changes** or **new** **techniques** land.
+
+---
+
+## Testing
+
+### Automated tests
+
+| Kind of test | What to check |
+|--------------|----------------|
+| **Unit** | **`open`** / **`color`** do **not** break **parent** **label** associations; **SVG** **`aria-hidden`** matches implementation. |
+| **aXe + Storybook** | Run on **composite** stories (loupe **+** **field** / **sliders**), **not** only **isolated** loupe frames. |
+| **Contrast** | Where **policy** requires, measure **loupe** **chrome** at **representative** backgrounds; **document** **gaps** **per** **SWC-1193** when **3:1** is **not** met. |
+| **Integration** | **E2E** / **snapshots** use **realistic** **pages**: **labels**, **focus order**, and **values** on **surrounding** **controls**. |
+
+---
+
+## Summary checklist
+
+- [ ] **Stories** place the loupe **in** **real** **picker** **contexts** with **accessible** **siblings**, not **only** the loupe **on** **gray** **canvas**.
+- [ ] **Copy** is **descriptive**; **no** **token-only** **labels** as the **sole** **accessible** **name** for **user-facing** **steps**.
+- [ ] **Color field** (or **equivalent**) **owns** **name**, **value**, and **keyboard**; loupe does **not** **stand** **in** for **that**.
+- [ ] **SWC-1193** **position** on **1.4.11** is **reflected** in **internal** **audit** / **release** **notes** where **needed**.
+- [ ] **Contrast** **measurements** for **loupe** **chrome** are **attempted** on **key** **themes**; **failures** are **known** **issues**, **not** **silent**.
+
+---
+
+## References
+
+- [WCAG 2.2 Success Criterion 1.4.11: Non-text contrast (understanding)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast)
+- [WCAG 2.2](https://www.w3.org/TR/WCAG22/)
+- [Using ARIA (read this first)](https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/)
+- [SWC-1193](https://jira.corp.adobe.com/browse/SWC-1193) (Adobe internal Jira—non-text contrast / realistic constraints for color loupe)
+- [Color field migration roadmap](../color-field/rendering-and-styling-migration-analysis.md)
diff --git a/CONTRIBUTOR-DOCS/03_project-planning/03_components/divider/accessibility-migration-analysis.md b/CONTRIBUTOR-DOCS/03_project-planning/03_components/divider/accessibility-migration-analysis.md
index 8e4634e73e7..d23a0e6bf2a 100644
--- a/CONTRIBUTOR-DOCS/03_project-planning/03_components/divider/accessibility-migration-analysis.md
+++ b/CONTRIBUTOR-DOCS/03_project-planning/03_components/divider/accessibility-migration-analysis.md
@@ -18,6 +18,7 @@
- [ARIA and WCAG context](#aria-and-wcag-context)
- [Pattern in the APG](#pattern-in-the-apg)
- [Guidelines that apply](#guidelines-that-apply)
+- [Related 1st-gen accessibility (Jira)](#related-1st-gen-accessibility-jira)
- [Recommendations: ``](#recommendations-swc-divider)
- [ARIA roles, states, and properties](#aria-roles-states-and-properties)
- [Shadow DOM and cross-root ARIA Issues](#shadow-dom-and-cross-root-aria-issues)
@@ -69,6 +70,13 @@ This doc explains how **`swc-divider`** should work for **accessibility**. It su
---
+## Related 1st-gen accessibility (Jira)
+
+| Jira | Type | Status (snapshot) | Resolution (snapshot) | Summary |
+|------|------|-------------------|-------------------------|---------|
+
+---
+
## Recommendations: ``
### ARIA roles, states, and properties
diff --git a/CONTRIBUTOR-DOCS/03_project-planning/03_components/illustrated-message/accessibility-migration-analysis.md b/CONTRIBUTOR-DOCS/03_project-planning/03_components/illustrated-message/accessibility-migration-analysis.md
new file mode 100644
index 00000000000..d49336f618e
--- /dev/null
+++ b/CONTRIBUTOR-DOCS/03_project-planning/03_components/illustrated-message/accessibility-migration-analysis.md
@@ -0,0 +1,138 @@
+
+
+[CONTRIBUTOR-DOCS](../../../README.md) / [Project planning](../../README.md) / [Components](../README.md) / Illustrated Message / Illustrated message accessibility migration analysis
+
+
+
+# Illustrated message accessibility migration analysis
+
+
+
+
+In this doc
+
+- [Overview](#overview)
+ - [Also read](#also-read)
+ - [What it is](#what-it-is)
+ - [What it is not](#what-it-is-not)
+- [ARIA and WCAG context](#aria-and-wcag-context)
+ - [Pattern in the APG](#pattern-in-the-apg)
+ - [Guidelines that apply](#guidelines-that-apply)
+- [Related 1st-gen accessibility (Jira)](#related-1st-gen-accessibility-jira)
+- [Recommendations: ``](#recommendations-swc-illustrated-message)
+ - [ARIA roles, states, and properties](#aria-roles-states-and-properties)
+ - [Shadow DOM and cross-root ARIA Issues](#shadow-dom-and-cross-root-aria-issues)
+ - [Accessibility tree expectations](#accessibility-tree-expectations)
+ - [Keyboard and focus](#keyboard-and-focus)
+- [Testing](#testing)
+ - [Automated tests](#automated-tests)
+- [Summary checklist](#summary-checklist)
+- [References](#references)
+
+
+
+
+
+## Overview
+
+This doc explains how **`swc-illustrated-message`** should work for **accessibility**. It supports **WCAG 2.2 Level AA**. Until **`swc-illustrated-message`** ships, use **`1st-gen/packages/illustrated-message/src/IllustratedMessage.ts`** (``) as a behavioral reference, while aligning **2nd-gen** **API** and **docs** with the decisions below.
+
+### Also read
+
+[Illustrated message migration roadmap](./rendering-and-styling-migration-analysis.md).
+
+### What it is
+
+- A **block** for **empty**, **error**, or **onboarding** states: an **illustration** (often **SVG**), a **title**, and **description** text (sometimes with **actions**).
+- **2nd-gen** supplies the **title** and **description** through **slots** only—**no** string **`heading`** / **`description`** **attributes** as fallbacks in the slot (see **Recommendations** and [PR #6150 discussion](https://github.com/adobe/spectrum-web-components/pull/6150#discussion_r3047502294)).
+
+### What it is not
+
+- **Not** a **dialog** or **alertdialog** by itself unless a **separate** spec wraps it that way.
+- **Not** a substitute for **page**-level **`h1`**—keep **one** top-level heading per view where that pattern applies.
+
+---
+
+## ARIA and WCAG context
+
+### Pattern in the APG
+
+- The APG does **not** define an “illustrated message” widget. Treat it as **structured content**: **heading**, **text**, optional **links** in the description, optional **buttons** in an **actions** area, and a usually **decorative** illustration.
+
+### Guidelines that apply
+
+| Idea | Plain meaning |
+|------|----------------|
+| [Info and relationships (WCAG 1.3.1)](https://www.w3.org/TR/WCAG22/#info-and-relationships) | The **programmatic** heading level must match the **document** outline. Avoid a second **`h1`** inside this pattern unless the product shell intentionally nests it—typically the block uses **`h2`–`h6`** per **`heading-level`** (or equivalent) from the host. |
+| [Headings and labels (WCAG 2.4.6)](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html) | The **title** should describe **purpose**; the **description** should add **useful** detail. |
+| [Non-text content (WCAG 1.1.1)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) | If the **illustration** is **decorative**, hide it from assistive tech (**`aria-hidden="true"`** on the **SVG** or equivalent). If it **conveys** information not in the **heading** / **description**, give it a **short** accessible **name**. |
+| [Name, role, value (WCAG 4.1.2)](https://www.w3.org/TR/WCAG22/#name-role-value) | **Action** **buttons** and **links** in the **description** or **actions** region need **discernible** **names**. |
+
+**Bottom line:** Authors choose **`heading-level`** (or the implementation maps **`h2`–`h6`**) to match the page. **2nd-gen** puts **title** and **body** copy in **slots** only; see [PR #6150 discussion](https://github.com/adobe/spectrum-web-components/pull/6150#discussion_r3047502294).
+
+---
+
+## Related 1st-gen accessibility (Jira)
+
+| Jira | Type | Status (snapshot) | Resolution (snapshot) | Summary |
+|------|------|-------------------|-------------------------|---------|
+
+---
+
+## Recommendations: ``
+
+### ARIA roles, states, and properties
+
+| Topic | What to do |
+|-------|------------|
+| **Heading and description content (2nd-gen)** | Provide **title** and **description** **only** via **`slot="heading"`** and **`slot="description"`**. **Do not** rely on **reflecting** **`heading`** or **`description`** **string properties** as **default slot content** the way **1st-gen** **``** could—those **attribute** fallbacks are **removed** in **2nd-gen** to **sever the 1st-gen dependency**. This matches maintainer direction ([discussion with @5t3ph](https://github.com/adobe/spectrum-web-components/pull/6150#discussion_r3047502294)); further API tweaks remain **open to discussion** in that thread. |
+| **Heading level** | Expose a **real** heading in shadow DOM (**`h2`–`h6`**) from **`heading-level`** (or the agreed property). **Do not** accept **`heading-level="1"`** / **`h1`** for this block—the **page** (or **dialog** title) should own **`h1`**. |
+| **Illustration** | Prefer **`aria-hidden="true"`** on **decorative** **SVG**s. If the graphic is **meaningful**, use **`role="img"`** and **`aria-label`** (or **visible** text that names it). |
+| **Actions** | **Buttons** or **links** in an **actions** slot must keep **visible** **text** or **`aria-label`** as required by **WCAG**. |
+| **Docs** | Examples should **only** show **slotted** **heading** and **description** for **2nd-gen**; **do not** teach **`heading="..."`** / **`description="..."`** as an alternative **content** API. |
+
+### Shadow DOM and cross-root ARIA Issues
+
+None for a minimal implementation if **slots** carry **light-DOM** **links** / **buttons** with **native** semantics. If **IDs** for **`aria-labelledby`** must point across roots, document the **pattern** (or prefer **slots** that **project** into shadow **heading** / **description** wrappers).
+
+### Accessibility tree expectations
+
+- Users hear a **heading** at the **chosen** level and the **description** content.
+- **Decorative** **illustration** does **not** add **noise** to the **tree**.
+- **Actions** are **real** **controls** with **names**.
+
+### Keyboard and focus
+
+- The **illustrated message** host is **not** a single **tab stop** by default; **Tab** moves among **focusable** **children** (**buttons**, **links**, etc.) in **document** order.
+
+---
+
+## Testing
+
+### Automated tests
+
+| Kind of test | What to check |
+|--------------|----------------|
+| **Unit** | **Heading** tag matches **`heading-level`**; **no** **`h1`** when disallowed; **SVG** **`aria-hidden`** (or **img** **name**) matches **decorative** vs **informative** stories. |
+| **aXe + Storybook** | **WCAG 2.x** on **overview** and **empty-state**-style stories with **slotted** **heading** / **description**. |
+| **Playwright ARIA snapshots** | **Heading** **role** / **level** and **description** text; **actions** **names** when present. |
+
+---
+
+## Summary checklist
+
+- [ ] **2nd-gen** **docs** and **stories** use **slots** for **heading** and **description** **only**—**no** **`heading`** / **`description`** **attribute** fallbacks as the **content** API ([PR #6150](https://github.com/adobe/spectrum-web-components/pull/6150#discussion_r3047502294)).
+- [ ] **Heading level** is **correct** for the page; **no** **`h1`** inside the component when the pattern forbids it.
+- [ ] **Illustration** is **decorative** (**`aria-hidden`**) or **named** when it carries **meaning**.
+- [ ] **Actions** and **inline** **links** in **description** are **labeled**.
+- [ ] **Snapshots** / **aXe** cover representative **stories**.
+
+---
+
+## References
+
+- [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/)
+- [WCAG 2.2](https://www.w3.org/TR/WCAG22/)
+- [Using ARIA (read this first)](https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/)
+- [Illustrated message migration roadmap](./rendering-and-styling-migration-analysis.md)
+- [PR #6150 — illustrated message: file structure and initial API (discussion: slots vs heading attributes)](https://github.com/adobe/spectrum-web-components/pull/6150#discussion_r3047502294)
diff --git a/CONTRIBUTOR-DOCS/03_project-planning/03_components/progress-bar/accessibility-migration-analysis.md b/CONTRIBUTOR-DOCS/03_project-planning/03_components/progress-bar/accessibility-migration-analysis.md
new file mode 100644
index 00000000000..f842926ca62
--- /dev/null
+++ b/CONTRIBUTOR-DOCS/03_project-planning/03_components/progress-bar/accessibility-migration-analysis.md
@@ -0,0 +1,188 @@
+
+
+[CONTRIBUTOR-DOCS](../../../README.md) / [Project planning](../../README.md) / [Components](../README.md) / Progress Bar / Progress bar accessibility migration analysis
+
+
+
+# Progress bar accessibility migration analysis
+
+
+
+
+In this doc
+
+- [Overview](#overview)
+ - [Also read](#also-read)
+ - [What it is](#what-it-is)
+ - [What it is not](#what-it-is-not)
+ - [Related](#related)
+- [ARIA and WCAG context](#aria-and-wcag-context)
+ - [Pattern in the APG](#pattern-in-the-apg)
+ - [Guidelines that apply](#guidelines-that-apply)
+- [Related 1st-gen accessibility (Jira)](#related-1st-gen-accessibility-jira)
+- [Recommendations: ``](#recommendations-swc-progress-bar)
+ - [ARIA roles, states, and properties](#aria-roles-states-and-properties)
+ - [Shadow DOM and cross-root ARIA Issues](#shadow-dom-and-cross-root-aria-issues)
+ - [Accessibility tree expectations](#accessibility-tree-expectations)
+ - [Keyboard and focus](#keyboard-and-focus)
+- [Known 1st-gen issues](#known-1st-gen-issues)
+ - [Non-text contrast at 0% (WCAG 1.4.11)](#non-text-contrast-at-0-wcag-1411)
+ - [Developer warning copy](#developer-warning-copy)
+- [Testing](#testing)
+ - [Automated tests](#automated-tests)
+- [Summary checklist](#summary-checklist)
+- [References](#references)
+
+
+
+
+
+## Overview
+
+This doc explains how **`swc-progress-bar`** should work for **accessibility**. It supports **WCAG 2.2 Level AA**. Until **`swc-progress-bar`** ships, treat **`1st-gen/packages/progress-bar/src/ProgressBar.ts`** (``) as the primary reference for behavior; align 2nd-gen with this doc and the [progress bar migration roadmap](./rendering-and-styling-migration-analysis.md).
+
+### Also read
+
+[Progress bar migration roadmap](./rendering-and-styling-migration-analysis.md).
+
+### What it is
+
+- A **horizontal bar** with a **track** and **fill** that shows **progress** (0–100) or an **indeterminate** loading animation.
+- It is **read-only**: the user does **not** adjust the value with the keyboard inside this component.
+
+### What it is not
+
+- A **meter** showing a scalar measurement (for example disk usage)—see [Meter migration roadmap](../meter/rendering-and-styling-migration-analysis.md).
+- The **small spinner** inside a **button** or **field** pending state—use an **icon** pattern there, not a full progress bar.
+
+### Related
+
+- **Circular** progress → [Progress circle accessibility migration analysis](../progress-circle/accessibility-migration-analysis.md) and [migration roadmap](../progress-circle/rendering-and-styling-migration-analysis.md).
+
+---
+
+## ARIA and WCAG context
+
+### Pattern in the APG
+
+- The [progress bar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/progressbar/) applies: **`role="progressbar"`**, **accessible name**, **values** when **determinate**, **no** spurious value attributes when **indeterminate**, and **not** in the **Tab** order for the default **read-only** bar.
+
+### Guidelines that apply
+
+| Idea | Plain meaning |
+|------|----------------|
+| [`progressbar` role](https://www.w3.org/TR/wai-aria-1.2/#progressbar) | Needs a **name**. When **determinate**, expose **min**, **max**, **current value**, and **spoken text** (for example a localized **percent** string). When **indeterminate**, **omit** min, max, now, and valuetext so assistive tech treats the task as **busy** / unknown length. |
+| [Non-text content (WCAG 1.1.1)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html) | **Track** and **fill** live in **shadow DOM** for **`swc-progress-bar`**. The **host** should own **`role`** and **ARIA values**; inner nodes are **visual** unless a separate spec adds more. |
+| [Use of color (WCAG 1.4.1)](https://www.w3.org/TR/WCAG22/#use-of-color) | Do not rely on **fill color alone**. **Values**, **label**, and visible **percentage** (when present) carry meaning. |
+| [Non-text contrast (WCAG 1.4.11)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast) | **Track** and **fill** are **graphical objects** and need **at least 3:1** with **adjacent** colors. At **0%**, the **fill** may have **no width**—if only a faint **track** shows, the bar can fail this criterion. Test **`static-color`**, photos, and **thin** bars carefully. |
+| [Pause, stop, hide (WCAG 2.2.2)](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) | **Indeterminate** motion on the **fill** must meet WCAG expectations. Respect **reduced motion** where supported. Align **Spectrum motion tokens** across libraries where applicable; document **fallback** if **flicker** is a risk. |
+
+**Bottom line:** Ship a **non-focusable** **`progressbar`** with **determinate** vs **indeterminate** rules consistent with **`swc-progress-circle`** and **`ProgressBar.ts`**, verified in **`swc-progress-bar`** once implemented.
+
+---
+
+## Related 1st-gen accessibility (Jira)
+
+| Jira | Type | Status (snapshot) | Resolution (snapshot) | Summary |
+|------|------|-------------------|-------------------------|---------|
+| [SWC-1122](https://jira.corp.adobe.com/browse/SWC-1122) | Bug | Done | Fixed | [Accessibility] - Progress bar: Progress bar is missing appropriate role and/or attributes - sp-progress-bar (updating progress bar) |
+
+---
+
+## Recommendations: ``
+
+### ARIA roles, states, and properties
+
+| Topic | What to do |
+|-------|------------|
+| **`role="progressbar"`** | **Prescribed** and **fixed** on the **host**. It must **not** be author-overridable in implementation or docs. If another role is needed, use a **different** component or pattern—not a role change on **`swc-progress-bar`**. This element satisfies **one** semantic role only. |
+| **Name (required)** | Provide a **name** via **`label`**, **default slot** text, **`aria-label`**, or **`aria-labelledby`** ([WCAG 4.1.2](https://www.w3.org/TR/WCAG22/#name-role-value)). Prefer **`aria-labelledby`** when a **visible** label exists; use **`aria-label`** when it does not. Keep **dev-mode** warnings accurate for **`swc-progress-bar`** (1st-gen’s warning text incorrectly references **progress-circle** in one bullet—fix in 2nd-gen). |
+| **Known percent** (`indeterminate` = false) | Set **`aria-valuemin="0"`**, **`aria-valuemax="100"`**, **`aria-valuenow`** = **`progress`**, **`aria-valuetext`** = **localized** percent string. Update when **`progress`** or locale changes. |
+| **0% appearance ([WCAG 1.4.11](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast))** | When **`progress`** is **0**, show a **small** visible **fill** width (or another treatment that keeps **track** / **fill** details at **at least 3:1** with adjacent colors). A **fully invisible** fill with a **weak** track often fails **non-text contrast**. **`aria-valuenow`**, **`aria-valuetext`**, and visible **percent** must still read as **0%**. |
+| **Unknown time** (`indeterminate` = true) | **Remove** min, max, now, and valuetext. |
+| **`label` vs slot** | If slot text **mirrors** **`label`**, document **one** clear naming path. **Default** copy can be generic (“Loading”); prefer **specific** labels when context is known (“Uploading document,” “Saving project”). |
+| **`side-label` / `size` / `static-color`** | **Visual layout** only—no required ARIA mapping beyond what implementation already sets. |
+| **Motion / animation** | Meet **[WCAG 2.2.2](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html)** for **indeterminate** (and any) **fill** animation. Follow **reduced-motion** rules. Align **Spectrum** motion tokens where applicable; document **flicker** fallbacks. |
+| **Docs** | Say **read-only**: **no Tab stop**, **no arrow keys** to change value. Warn against **over-announcing**: **never** **`aria-live="assertive"`**; use **`aria-live="polite"`** only **rarely**, especially when **multiple** components or live regions update. |
+
+### Shadow DOM and cross-root ARIA Issues
+
+None
+
+### Accessibility tree expectations
+
+#### Known percent
+
+- **Role:** **progressbar** with a **clear name**.
+- **Values:** min, max, now, valuetext as above.
+- Optional **visible** **percentage** (1st-gen uses **`sp-field-label`**) should stay consistent with **`aria-valuetext`** where both are shown.
+
+#### Busy / unknown
+
+- **Role:** **progressbar** with a **name**, **without** numeric value attrs.
+
+#### Good names
+
+- Use **task-specific** language. The **percent** belongs in **value / valuetext** (and optional visible percentage), not as a substitute for **what** is loading.
+
+### Keyboard and focus
+
+**Not focusable.** Keyboard navigation should skip this component and move to the next focusable element.
+
+---
+
+## Known 1st-gen issues
+
+Gaps in **1st-gen** **``** (`1st-gen/packages/progress-bar/src/ProgressBar.ts`) that **2nd-gen** **`swc-progress-bar`** should fix or cover with regression tests.
+
+### Non-text contrast at 0% (WCAG 1.4.11)
+
+- At **`progress` = 0**, the **fill** is drawn with **zero** width (`transform: scaleX(calc(${this.progress} / 100))`), so only the **track** shows. If the **track** does **not** meet **at least 3:1** contrast with **adjacent** colors, the bar can **violate** [**WCAG 2.2 Success Criterion 1.4.11** (Non-text contrast, Level AA)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast)—users with low vision may not perceive the control.
+- Treat this as a **known 1st-gen** risk on many backgrounds. **2nd-gen** should follow the **0% appearance** row under **Recommendations** and validate **0%** with **contrast** tooling (including **`static-color`** and photo backgrounds).
+
+### Developer warning copy
+
+- The **DEBUG** missing-name warning lists **``** in one **issues** bullet where it should reference **``**. Correct during migration so authors get accurate guidance.
+
+---
+
+## Testing
+
+### Automated tests
+
+| Kind of test | What to check |
+|--------------|----------------|
+| **Unit** | **`role="progressbar"`**. **Determinate** vs **indeterminate** **ARIA** matches rules above (verify in **`swc-progress-bar`** or **`ProgressBar.ts`** during migration). Host is **not** focusable. **Name** from **`label`**, **slot**, or **`aria-label`**. |
+| **aXe + Storybook** | **WCAG 2.x** on progress-bar stories (1st-gen today; 2nd-gen when migrated). |
+| **Playwright ARIA snapshots** | Add or keep **`progress-bar.a11y.spec.ts`** for 2nd-gen when available; mirror **determinate**, **indeterminate**, **sizes**, and **`static-color`** coverage patterns from **progress-circle**. |
+| **Contrast** | **`static-color`**, **0%**, and **indeterminate** stories. |
+| **Motion / reduced motion** | **Indeterminate** animation meets **WCAG 2.2.2** and product **reduced-motion** rules. |
+
+---
+
+## Summary checklist
+
+- [ ] Stories use **task-specific** labels, not **only** “Loading” or **token** names from **`size`** / **`static-color`**.
+- [ ] **Determinate** stories show **min / max / now / valuetext** matching **`progress`** and locale.
+- [ ] **Indeterminate** stories **omit** value attrs as required.
+- [ ] Default build is **not focusable**; docs match **read-only** behavior.
+- [ ] Tree / snapshots show **`progressbar`** + good **name**; **0%** and **non-text contrast** are considered.
+- [ ] **Dev warning** for missing name uses the correct **element name** and issues list (**no** wrong **progress-circle** reference).
+- [ ] **ARIA snapshot** (or equivalent) tests cover **determinate**, **indeterminate**, and main variants.
+- [ ] **Unit tests** prove **no** **Tab** focus by default.
+- [ ] **aXe** (WCAG 2.x tags) runs on progress-bar stories.
+- [ ] Docs and examples **never** recommend **`aria-live="assertive"`** for loading; **`aria-live="polite"`** is **rare** only, with a warning when **many** loaders or live regions update.
+
+---
+
+## References
+
+- [WAI-ARIA 1.2: progressbar](https://www.w3.org/TR/wai-aria-1.2/#progressbar)
+- [APG: progress bar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/progressbar/)
+- [WCAG 2.2](https://www.w3.org/TR/WCAG22/)
+- [WCAG 1.4.11: non-text contrast (understanding)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast)
+- [WCAG 2.2.2: pause, stop, hide (understanding)](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html)
+- [Using ARIA (read this first)](https://www.w3.org/WAI/ARIA/apg/practices/read-me-first/)
+- [Figma: Loading animation discovery](https://www.figma.com/design/42VzvpW262EAUbYsadO4e8/Loading-animation-discovery?node-id=478-948207&t=RVTbvK49jUbfoa0P-0)
+- [Progress bar migration roadmap](./rendering-and-styling-migration-analysis.md)
+- [Progress circle accessibility migration analysis](../progress-circle/accessibility-migration-analysis.md)
diff --git a/CONTRIBUTOR-DOCS/03_project-planning/03_components/progress-circle/accessibility-migration-analysis.md b/CONTRIBUTOR-DOCS/03_project-planning/03_components/progress-circle/accessibility-migration-analysis.md
index 511eeaba1e5..44bd88e5207 100644
--- a/CONTRIBUTOR-DOCS/03_project-planning/03_components/progress-circle/accessibility-migration-analysis.md
+++ b/CONTRIBUTOR-DOCS/03_project-planning/03_components/progress-circle/accessibility-migration-analysis.md
@@ -19,6 +19,7 @@
- [ARIA and WCAG context](#aria-and-wcag-context)
- [Pattern in the APG](#pattern-in-the-apg)
- [Guidelines that apply](#guidelines-that-apply)
+- [Related 1st-gen accessibility (Jira)](#related-1st-gen-accessibility-jira)
- [Recommendations: ``](#recommendations-swc-progress-circle)
- [ARIA roles, states, and properties](#aria-roles-states-and-properties)
- [Shadow DOM and cross-root ARIA Issues](#shadow-dom-and-cross-root-aria-issues)
@@ -76,6 +77,16 @@ This doc explains how **`swc-progress-circle`** should work for **accessibility*
---
+## Related 1st-gen accessibility (Jira)
+
+| Jira | Type | Status (snapshot) | Resolution (snapshot) | Summary |
+|------|------|-------------------|-------------------------|---------|
+| [SWC-1125](https://jira.corp.adobe.com/browse/SWC-1125) | Bug | Blocked | Unresolved | [Accessibility] Graphical object lacks 3:1 contrast ratio — `sp-progress-circle` (progress bar and loading indicator) |
+| [SWC-1171](https://jira.corp.adobe.com/browse/SWC-1171) | Bug | Done | Fixed | [Accessibility] ARIA `progressbar` nodes do not have an accessible name — `sp-picker` (loading indicator) |
+| [SWC-1369](https://jira.corp.adobe.com/browse/SWC-1369) | Bug | To Do | Unresolved | `Pending` button not visible in WHCM |
+
+---
+
## Recommendations: ``
### ARIA roles, states, and properties
diff --git a/CONTRIBUTOR-DOCS/03_project-planning/03_components/status-light/accessibility-migration-analysis.md b/CONTRIBUTOR-DOCS/03_project-planning/03_components/status-light/accessibility-migration-analysis.md
index 52c41dc1cc8..f36d316a37c 100644
--- a/CONTRIBUTOR-DOCS/03_project-planning/03_components/status-light/accessibility-migration-analysis.md
+++ b/CONTRIBUTOR-DOCS/03_project-planning/03_components/status-light/accessibility-migration-analysis.md
@@ -18,6 +18,7 @@
- [ARIA and WCAG context](#aria-and-wcag-context)
- [Pattern in the APG](#pattern-in-the-apg)
- [Guidelines that apply](#guidelines-that-apply)
+- [Related 1st-gen accessibility (Jira)](#related-1st-gen-accessibility-jira)
- [Recommendations: ``](#recommendations-swc-status-light)
- [ARIA roles, states, and properties](#aria-roles-states-and-properties)
- [Shadow DOM and cross-root ARIA Issues](#shadow-dom-and-cross-root-aria-issues)
@@ -69,6 +70,15 @@ This doc explains how **`swc-status-light`** should work for **accessibility**.
---
+## Related 1st-gen accessibility (Jira)
+
+| Jira | Summary (short) | Typical 1st-gen / scope | Notes |
+|------|-----------------|-------------------------|--------|
+
+None of the rows above target **`sp-status-light` / `swc-status-light`** specifically. Add a row when you file or find a Jira issue for this component.
+
+---
+
## Recommendations: ``
### ARIA roles, states, and properties
diff --git a/CONTRIBUTOR-DOCS/03_project-planning/README.md b/CONTRIBUTOR-DOCS/03_project-planning/README.md
index b3989cb494f..65ceca45c14 100644
--- a/CONTRIBUTOR-DOCS/03_project-planning/README.md
+++ b/CONTRIBUTOR-DOCS/03_project-planning/README.md
@@ -36,6 +36,7 @@
- Button Group
- Checkbox
- Color Field
+ - Color Loupe
- Divider
- Dropzone
- Field Group