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 - - - [label] - +| 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**. | - -[label] -``` +### 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] -
-``` +### 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] -
-``` +### 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