create component icon

Author: taohsu

components/action/icon/interactive_icon/dsm/accessibility/accessibility_challenges.md

@@ -0,0 +1,15 @@
+Because the interactive icon has no visible label and no button container, the glyph is the only cue, state is conveyed by color, and the small, container-less hit area must still be reachable and operable for everyone.
+
+### Key Challenges
+
+- Providing an accessible name when there is no visible text label
+- Conveying interactive state without a background — color transitions only
+- Keeping an adequate interactive target despite the container-less, custom size
+- Announcing the Loading state so users know the action is processing
+
+### Critical Success Factors
+
+1. Use a native `<button>` element wrapping the icon for keyboard and screen-reader support
+2. Give every interactive icon a descriptive accessible name via `aria-label`
+3. Preserve a minimum 28px interactive area (larger where touch is the primary input)
+4. Provide a visible focus indicator with ≥3:1 contrast against adjacent colors

components/action/icon/interactive_icon/dsm/accessibility/accessibility_intro.md

@@ -0,0 +1 @@
+The interactive icon must meet WCAG 2.2 Level AA. With no visible label and no container, it must expose an accessible name, convey state without relying on color alone, and keep an operable target. For comprehensive guidance, see the [Orange Unified Design System Accessibility Overview](https://unified-design-system.orange.com/472794e18/p/88ebab-accessibility-and-sustainability).

components/action/icon/interactive_icon/dsm/accessibility/additional_resources.md

@@ -0,0 +1,4 @@
+- [Orange Accessibility Guidelines - Interactive Components](https://a11y-guidelines.orange.com/en/web/components-examples/)
+- [W3C WAI - Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/)
+- [WCAG 2.2 Understanding Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)
+- [Orange Design System - Accessibility & Sustainability](https://unified-design-system.orange.com/472794e18/p/88ebab-accessibility-and-sustainability)

components/action/icon/interactive_icon/dsm/accessibility/design_requirements.md

@@ -0,0 +1,16 @@
+### Structure & Labels
+
+- [ ] **Semantic markup**: Wrap the icon in a native `<button>` for automatic keyboard and screen-reader support
+- [ ] **Accessible name**: Always provide a descriptive `aria-label` ([Label guidance](https://a11y-guidelines.orange.com/en/web/develop/textual-content/#make-sure-the-user-can-use-native-browser-options))
+- [ ] **State communication**: Expose the Loading state with `aria-busy="true"` and announce completion
+
+### Visual Design
+
+- [ ] **Focus visibility**: Display a focus ring with ≥3:1 contrast against adjacent colors ([Focus guidance](https://a11y-guidelines.orange.com/en/web/design/navigation-focus/))
+- [ ] **Color independence**: State is shown by color only — pair it with focus and the icon so meaning isn't color-dependent
+- [ ] **Interactive area**: Maintain at least a 28px interactive target; enlarge it for touch-first contexts
+
+### Content
+
+- [ ] **Descriptive name**: ❌ "icon" / ✅ "Close dialog" ([Content guidance](https://a11y-guidelines.orange.com/en/web/design/textual-content/))
+- [ ] **No duplication**: If a visible label already exists nearby, don't repeat it redundantly in the accessible name

components/action/icon/interactive_icon/dsm/accessibility/key_wcag_criteria.md

@@ -0,0 +1,7 @@
+- **2.1.1 Keyboard** (A): All interactive-icon functionality operable via keyboard without timing
+- **2.4.7 Focus Visible** (AA): Visible focus indicator present on the icon when focused
+- **4.1.2 Name, Role, Value** (A): Button role, accessible name, and state programmatically exposed
+- **1.4.11 Non-text Contrast** (AA): Icon, focus indicator, and interactive states meet ≥3:1 contrast
+- **2.5.8 Target Size (Minimum)** (AA): Interactive target meets the minimum size, with spacing where smaller
+
+For complete reference: [Orange Accessibility Guidelines - Components](https://a11y-guidelines.orange.com/en/web/components-examples/)

components/action/icon/interactive_icon/dsm/accessibility/testing_checklist.md

@@ -0,0 +1,15 @@
+### Screen Reader Testing
+
+- [ ] Test with NVDA (Windows), JAWS (Windows), VoiceOver (macOS/iOS), TalkBack (Android)
+- [ ] Verify button role announced, accessible name read, and Loading state communicated
+
+### Keyboard Testing
+
+- [ ] Tab to the icon (focus visible), activate with Enter/Space, confirm the action triggers
+- [ ] Verify focus remains managed during and after the Loading state
+
+### Loading State Testing
+
+- [ ] Confirm the Loading state is announced and the icon is not prematurely re-triggerable
+
+Resources: [Orange Accessibility Testing Guide](https://a11y-guidelines.orange.com/en/web/testing/)

components/action/icon/interactive_icon/dsm/changelog.md

@@ -0,0 +1,5 @@
+# Changelog
+
+| Date | Number | Notes | Designer |
+|------|--------|-------|----------|
+| Jun 8, 2026 | 1.0.0 | Version 2.6 of the design tokens is required for the development of this update.<ul><li>Component creation</ul> | Maxime Tonnerre |

components/action/icon/interactive_icon/dsm/guideline/anatomy.md

@@ -0,0 +1,8 @@
+| # | Element | Purpose | Optional |
+|---|---------|---------|----------|
+| 1 | Icon | The glyph communicating the action | N |
+| 2 | Interactive area | Invisible hit target around the icon (min 28px) for pointer/touch | N |
+| 3 | Color treatment | State feedback expressed through icon color transitions (no background) | N |
+| 4 | Focus ring | Visible outline indicating keyboard focus for accessibility | N |
+| 5 | Loading indicator | Spinner shown in place of the icon during the Loading state | Y |
+| 6 | Skeleton placeholder | Neutral shape shown before the icon has fully loaded | Y |

components/action/icon/interactive_icon/dsm/guideline/best_for.md

@@ -0,0 +1,19 @@
+✅ Inline actions placed directly next to text or form fields
+
+✅ Compact toolbars where an icon-only action saves space
+
+✅ Toggling a state (open/close, show/hide, expand/collapse)
+
+✅ Lightweight actions inside content cards, rows, or list items
+
+✅ Embedding an action within another component (input, menu, chip)
+
+✅ Dense interfaces where a button's touch target would feel heavy
+
+✅ Repeated actions in tables or lists where buttons would add noise
+
+✅ Custom-sized affordances that must scale with the surrounding layout
+
+✅ Secondary actions that shouldn't compete with primary buttons
+
+✅ Icon-driven actions where the meaning is already clear from context

components/action/icon/interactive_icon/dsm/guideline/definition.md

@@ -0,0 +1 @@
+An Interactive Icon is an icon component designed to trigger a user interaction (e.g., open, close, toggle a state). It includes defined interactive states and can be used independently or within other components such as buttons, inputs, or menus.