docs: auto-slice documentation [skip ci]

Author: github-actions[bot]

components/action/button/button/dsm/accessibility/accessibility_challenges.md

@@ -0,0 +1,15 @@
+Buttons present unique accessibility challenges due to their diverse appearances (Strong, Default, Minimal, Brand, Negative), multiple layouts (text-only, icon-only, text+icon), and various states that must all communicate clearly to assistive technologies.
+
+### Key Challenges
+
+- Icon-only buttons require explicit accessible labels since visual icons alone provide no information to screen readers
+- Focus states must be clearly visible across all appearance variants and background contexts
+- Loading and disabled states must communicate programmatically, not just visually
+- Buttons on colored backgrounds require careful contrast management
+
+### Critical Success Factors
+
+1. Use semantic `<button>` element or `role="button"` with proper keyboard handling
+2. Ensure all interactive states have ≥3:1 contrast for focus indicators and ≥4.5:1 for text
+3. Provide `aria-label` for icon-only buttons and `aria-describedby` for additional context
+4. Communicate loading/disabled states via `aria-busy` and `aria-disabled` attributes

components/action/button/button/dsm/accessibility/accessibility_intro.md

@@ -0,0 +1 @@
+Buttons must meet WCAG 2.2 Level AA compliance for keyboard operability, focus visibility, and semantic structure. 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/action/button/button/dsm/accessibility/additional_resources.md

@@ -0,0 +1,4 @@
+- [Orange Accessibility Guidelines - Forms and Buttons](https://a11y-guidelines.orange.com/en/web/components-examples/forms/)
+- [W3C ARIA Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/)
+- [WCAG 2.2 Understanding Focus Visible](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html)
+- [Orange Design System - Accessibility & Sustainability](https://unified-design-system.orange.com/472794e18/p/88ebab-accessibility-and-sustainability)

components/action/button/button/dsm/accessibility/design_requirements.md

@@ -0,0 +1,16 @@
+### Structure & Labels
+
+- [ ] **Semantic HTML**: Use native `<button>` element; avoid `<div>` or `<span>` with click handlers ([Orange Forms Guidelines](https://a11y-guidelines.orange.com/en/web/components-examples/forms/))
+- [ ] **Accessible names**: All buttons must have discernible text via visible label or `aria-label`
+- [ ] **Icon-only labeling**: Provide `aria-label` and tooltip for icon-only variants
+
+### Visual Design
+
+- [ ] **Focus indicator**: Visible focus ring with ≥3:1 contrast ratio against adjacent colors ([Orange Focus Guidelines](https://a11y-guidelines.orange.com/en/web/design/colors-and-contrasts/#focus-visibility))
+- [ ] **Text contrast**: Button text must have ≥4.5:1 contrast against button background
+- [ ] **Disabled styling**: Use reduced opacity (0.28) and `aria-disabled="true"`; avoid `disabled` attribute when possible
+
+### Content
+
+- [ ] **Button labels**: Use action verbs (Save, Submit, Delete); ❌ "Click here" / ✅ "Submit form"
+- [ ] **Concise text**: Keep labels under 3 words when possible; avoid truncation

components/action/button/button/dsm/accessibility/key_wcag_criteria.md

@@ -0,0 +1,7 @@
+- **2.1.1 Keyboard** (A): All button functionality operable via keyboard without timing requirements
+- **2.4.7 Focus Visible** (AA): Focus indicator visible with sufficient contrast on all button variants
+- **4.1.2 Name, Role, Value** (A): Buttons expose correct name, role, and state to assistive technologies
+- **1.4.3 Contrast (Minimum)** (AA): Text and icons have ≥4.5:1 contrast; UI components ≥3:1
+- **3.2.2 On Input** (A): Activating a button does not cause unexpected context changes without warning
+
+For complete reference: [Orange Accessibility Guidelines - Interactive Components](https://a11y-guidelines.orange.com/en/web/components-examples/)

components/action/button/button/dsm/accessibility/testing_checklist.md

@@ -0,0 +1,11 @@
+### Screen Reader Testing
+
+- [ ] Test with NVDA (Windows), JAWS (Windows), VoiceOver (macOS/iOS), TalkBack (Android)
+- [ ] Verify button name announced, role identified as "button", states (disabled, loading) communicated
+
+### Keyboard Testing
+
+- [ ] Tab navigates to button, `Enter` and `Space` activate, focus ring visible with ≥3:1 contrast
+- [ ] Verify disabled buttons are either focusable with announcement or removed from tab order consistently
+
+Resources: [Orange Accessibility Testing Guide](https://a11y-guidelines.orange.com/en/web/toolbox/)

components/action/button/button/dsm/changelog.md

@@ -0,0 +1,10 @@
+# Changelog
+
+| Date | Number | Notes | Designer |
+|------|--------|-------|----------|
+| Oct 10, 2025 | 3.2.0 | The specific component "On colored bg" has been split into two distinct components: <ul><li>A public version offering traditional management of dark and light modes <li>A private version (allowing the core team to nest the component with other components) offering customized mode management with four possible configurations: <ul><li>Always in light mode <li>Always in dark mode <li>Light to dark mode <li>Dark to light mode </ul><li>Consequently, for the private version, the name of the "Inverted color" variant has been replaced to "Mode control".</ul> | Maxime Tonnerre |
+| Sep 28, 2025 | 3.1.0 | <ul><li>Brand variant: New background and content color tokens added for hover/pressed/loading/focus states <li>The name of the "Hierarchy" variant has been replaced to "Appearance"</ul> | Maxime Tonnerre |
+| Jul 24, 2025 | 3.0.0 | <ul><li>New hierarchical variant: Brand → [Component tokens changelog 1.4.0](https://www.figma.com/design/Co2t6wHMf4GB9NJVGs2Hes/-OUDS-Core-Lib--Design-tokens?m=auto&node-id=9280-2568&t=HLVB4jOd35DWr8Bj-1) <li>Rounded corner property is now available → [Component tokens changelog 1.4.0](https://www.figma.com/design/Co2t6wHMf4GB9NJVGs2Hes/-OUDS-Core-Lib--Design-tokens?m=auto&node-id=9280-2568&t=HLVB4jOd35DWr8Bj-1) <li>Minimal variant: Color and width border tokens removed <li>Minimal variant: Color background tokens removed in the enabled state <li>Minimal variant: Color background tokens removed in the loading state <li>Minimal variant: Color background tokens removed in the disabled state</ul> | Maxime Tonnerre |
+| Jul 21, 2025 | 2.1.0 | <ul><li>Several design token updates: [Component tokens changelog 1.3.0](https://www.figma.com/design/Co2t6wHMf4GB9NJVGs2Hes/-OUDS-Core-Lib--Design-tokens?m=auto&node-id=9280-2568&t=HLVB4jOd35DWr8Bj-1) <li>Button: Expanded: The chevron is also present in the 'icon only' variant. The gap between these 2 elements is defined by a design token: ouds-action-button-space-column-gap-icon-chevron→ouds-space-column-gap-2xs</ul> | Maxime Tonnerre |
+| Apr 19, 2025 | 2.0.0 | <ul><li>Creation of "On colored bg" variant</ul> | Maxime Tonnerre |
+| Dec 5, 2024 | 1.0.0 | <ul><li>Component creation</ul> | Maxime Tonnerre |

components/action/button/button/dsm/guideline/anatomy.md

@@ -0,0 +1,8 @@
+| # | Element | Purpose | Optional |
+|---|---------|---------|----------|
+| 1 | Container | Defines the interactive boundary and visual shape of the button | N |
+| 2 | Text label | Communicates the action the button performs | Y |
+| 3 | Leading icon | Provides visual context or reinforces the action meaning | Y |
+| 4 | Loading indicator | Indicates an ongoing process after button activation | Y |
+| 5 | Focus ring | Shows keyboard focus state for accessibility | N |
+| 6 | Border | Defines button boundaries, especially for outline variants | Y |

components/action/button/button/dsm/guideline/appearance.md

@@ -0,0 +1,10 @@
+**`Default`** Default buttons are used for actions which are not mandatory or essential for the user. Often screens will include multiple Outline buttons alongside one of the Full button.
+
+**`Strong`** The Strong button on the page should be singular and prominent, ideally limited to one per view. It should be reserved for the most critical action, such as "Buy," "Save," "Submit," etc.
+
+**`Brand`** A brand primary color alternative to the Strong button.
+To be used sparingly for high-value specific actions or to visually anchor a brand moment. Do not use it as the default primary button in your interfaces.
+
+**`Minimal`** Minimal buttons are commonly used for actions that are considered less crucial. They can be used independently or together with a strong button.
+
+**`Negative`** Negative buttons should be used sparingly to warn of a destructive action, for example, delete or remove, typically resulting in the opening of a confirmation dialog.

components/action/button/button/dsm/guideline/appearance_do_dont.md

@@ -0,0 +1,14 @@
+✅ **Do:** Use only one Strong or Brand button per view to establish a clear visual hierarchy and guide users to the primary action.  
+❌ **Don't:** Place multiple high-emphasis buttons together, which confuses users about which action is most important.
+
+✅ **Do:** Reserve Negative buttons exclusively for destructive actions like "Delete" or "Remove" that require user awareness of consequences.  
+❌ **Don't:** Use Negative styling for cancel actions or secondary dismissals that aren't truly destructive.
+
+✅ **Do:** Pair Default (outline) buttons with Strong buttons to create clear primary/secondary action relationships.  
+❌ **Don't:** Use Minimal buttons for important actions that users might miss due to low visual prominence.
+
+✅ **Do:** Use Brand buttons sparingly for specific brand moments or high-value marketing actions to maintain their impact.  
+❌ **Don't:** Use Brand buttons as the default primary throughout the interface, which dilutes brand emphasis.
+
+✅ **Do:** Match button appearance to action importance—Strong for primary, Default for secondary, Minimal for tertiary.  
+❌ **Don't:** Mix visual hierarchies inconsistently across similar workflows, creating unpredictable user experiences.