create component

Author: taohsu

components/indicator/progress_indicator/circular_progress_indicator/circular_progress_indicator.md

@@ -0,0 +1,13 @@
+A progress indicator conveys a changing, often non-textual state, so its meaning must be exposed to assistive technologies and remain clear when motion is reduced or the view is zoomed. The hardest part is announcing progress meaningfully without flooding screen readers, and distinguishing determinate from indeterminate behavior.
+
+### Key Challenges
+- Communicating a live, changing value to assistive technology without constant interruptions
+- Conveying status (success, error…) without relying on color alone
+- Indeterminate waits have no value to report, yet must still signal activity
+- Motion-based feedback must survive reduced-motion preferences and zoom
+
+### Critical Success Factors
+1. Correct `progressbar` role with an accessible name (3.3.2, 4.1.2)
+2. Determinate value exposed via `aria-valuenow`/`min`/`max`; omitted when indeterminate
+3. Non-text and status meaning not conveyed by color alone (1.4.1, 1.4.11)
+4. Polite live updates and respect for reduced motion (2.3.3, 4.1.3)

components/indicator/progress_indicator/circular_progress_indicator/dsm/accessibility/accessibility_challenges.md

@@ -0,0 +1 @@
+The circular progress indicator must meet WCAG 2.2 Level AA so that loading status is perceivable and understandable without relying on sight or motion alone. For comprehensive accessibility guidance, see the [Orange Unified Design System Accessibility Overview](https://unified-design-system.orange.com/472794e18/p/88ebab-accessibility-and-sustainability).

components/indicator/progress_indicator/circular_progress_indicator/dsm/accessibility/accessibility_intro.md

@@ -0,0 +1,4 @@
+- [Orange Accessibility Guidelines](https://a11y-guidelines.orange.com/en/)
+- [ARIA: progressbar role — MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/progressbar_role)
+- [WCAG 2.2 Understanding — 4.1.3 Status Messages](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html)
+- [Orange Design System — Accessibility & Sustainability](https://unified-design-system.orange.com/472794e18/p/88ebab-accessibility-and-sustainability)

components/indicator/progress_indicator/circular_progress_indicator/dsm/accessibility/additional_resources.md

@@ -0,0 +1,13 @@
+### Structure & Labels
+- [ ] **Role & name**: Expose `role="progressbar"` with an accessible name describing what is loading ([Orange A11y guidelines](https://a11y-guidelines.orange.com/en/web/components-examples/))
+- [ ] **Determinate value**: Provide `aria-valuenow`, `aria-valuemin`, `aria-valuemax`; use `aria-valuetext` for human-readable progress
+- [ ] **Indeterminate**: Omit `aria-valuenow` so assistive tech announces an unspecified wait
+
+### Visual Design
+- [ ] **Non-text contrast**: Indicator/track meet ≥3:1 against their background ([Link](https://a11y-guidelines.orange.com/en/articles/contrasts/))
+- [ ] **Status not by color alone**: Pair functional statuses with text or context (1.4.1)
+- [ ] **Zoom**: Stays clear and undistorted up to 200% and at small embedded sizes (1.4.4, 1.4.10)
+
+### Content
+- [ ] **Meaningful announcement**: ❌ "1, 2, 3, 4…" / ✅ "Uploading file, 50 percent complete" ([Link](https://a11y-guidelines.orange.com/en/web/components-examples/))
+- [ ] **Context at parent level**: Provide descriptive text where needed, since helper text is not built in

components/indicator/progress_indicator/circular_progress_indicator/dsm/accessibility/design_requirements.md

@@ -0,0 +1,7 @@
+- **1.4.1 Use of Color** (A): Status (success, warning, error) is not signaled by color alone — pair with text or context
+- **1.4.11 Non-text Contrast** (AA): The indicator and track keep ≥3:1 contrast against adjacent colors
+- **2.3.3 Animation from Interactions** (AAA, recommended): Honor reduced-motion settings; do not rely on motion for essential meaning
+- **4.1.2 Name, Role, Value** (A): Correct `progressbar` role, accessible name, and `aria-valuenow`/`valuetext` (omitted when indeterminate)
+- **4.1.3 Status Messages** (AA): Progress updates use a polite live region so they are announced without moving focus
+
+For complete reference: [Orange Accessibility Guidelines - WCAG Criteria](https://a11y-guidelines.orange.com/en/web/components-examples/)

components/indicator/progress_indicator/circular_progress_indicator/dsm/accessibility/key_wcag_criteria.md

@@ -0,0 +1,13 @@
+### Screen Reader Testing
+- [ ] Test with NVDA (Windows), JAWS (Windows), VoiceOver (macOS/iOS), TalkBack (Android)
+- [ ] Verify the accessible name, determinate value/percentage, and indeterminate "in progress" are announced without flooding
+
+### Keyboard Testing
+- [ ] Confirm the indicator is not a focus stop (non-interactive) yet does not trap focus, and the surrounding flow remains operable
+- [ ] Verify any associated controls (cancel, retry) are reachable and focus is visible
+
+### Motion & Zoom Testing
+- [ ] With reduced-motion enabled, essential progress is still conveyed without animation
+- [ ] At 200% zoom and reflow, the indicator stays visible, proportional, and unclipped
+
+Resources: [Orange Accessibility Testing Guide](https://a11y-guidelines.orange.com/en/)

components/indicator/progress_indicator/circular_progress_indicator/dsm/accessibility/testing_checklist.md

@@ -0,0 +1,6 @@
+# Changelog
+
+| Date | Number | Notes |
+|------|--------|-------|
+| Jun 29, 2026 | 1.1.0 | Version 2.6 of the design tokens is required for the development of this update. <ul><li>Introduced Status variants, including both non-functional (Neutral, Accent) and functional (Positive, Warning, Negative, Info) statuses. Removed the Brand color boolean in favor of the new Status property. <li>Updated the Progress type and usage guidance for Deteminate and Indeterminate variants. <li>Added the Animated property for the Determinate variant to support animated progress in prototypes. <li>Added the Start animation property to control whether progress animates from 0% to the current value when the component is first displayed. <li>Added Gap size options (Default and Small) for greater visual flexibility. <li>Replaced the dedicated Rounded corner variant with a boolean property implemented as a mask, reducing the overall number of component variants.</ul> |
+| May 18, 2026 | 1.0.0 | Version 2.6 of the design tokens is required for the development of this update. <ul><li>Component creation</ul> |

components/indicator/progress_indicator/circular_progress_indicator/dsm/changelog.md

@@ -0,0 +1,7 @@
+| # | Element | Purpose | Optional |
+|---|---------|---------|----------|
+| 1 | Indicator | The colored arc that grows to represent completed (or ongoing) progress | N |
+| 2 | Track | The background ring showing the full extent of the progress path | Y |
+| 3 | Gap | The spacing that separates the indicator from the track ends | N |
+| 4 | Rounded cap | The end style applied to the indicator and track strokes | Y |
+| 5 | Container (bounding box) | The square area that defines the component's size and proportional scaling | N |

components/indicator/progress_indicator/circular_progress_indicator/dsm/guideline/anatomy.md

@@ -0,0 +1,10 @@
+Controls whether the progress indicator uses motion to communicate progress.
+
+The Animated property is available only for the Determinate variant. Indeterminate progress indicators always rely on animation and therefore do not expose this property.
+
+**`True`** The progress indicator uses animation to communicate changes in progress. Use when progress updates over time and motion helps users understand that the process is actively advancing.
+• **Start animation** Controls how the progress indicator appears when it is first displayed.
+  • **`True`** The progress indicator animates from 0% to the current progress value when the component enters the screen. Use when introducing a new process and providing a smooth visual transition (for example, 0% → 50%).
+  • **`False`** The progress indicator immediately displays the current progress value without an introductory animation. Use when the progress value is already known or when restoring an existing process (for example, 50%).
+
+**`False`** The progress indicator remains static and does not animate. Use when the component represents a fixed progress value rather than an actively changing process.