Skip to content

Commit 62bfbf6

Browse files
github-actions[bot]github-actions[bot]
committed
docs: auto-slice documentation [skip ci]
1 parent 5fa0ed9 commit 62bfbf6

19 files changed

Lines changed: 165 additions & 0 deletions

‎components/indicator/badge/badge/dsm/accessibility/accessibility_challenges.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
Badges present unique accessibility challenges because they rely heavily on color to convey meaning, are typically small in size, and may update dynamically without user interaction. Screen reader users cannot perceive color differences, so status information must be communicated through alternative means.
2+
3+
### Key Challenges
4+
- Color-dependent meaning requires text alternatives for color-blind and screen reader users
5+
- Small size may make badges difficult to perceive for users with low vision
6+
- Dynamic badge updates may not be announced to assistive technology users
7+
- Status semantics must be conveyed programmatically, not just visually
8+
9+
### Critical Success Factors
10+
1. Provide text labels or accessible names that convey the badge's meaning (WCAG 1.1.1)
11+
2. Ensure sufficient color contrast between badge background and surrounding content (WCAG 1.4.3)
12+
3. Use ARIA live regions for dynamically updating badge content (WCAG 4.1.3)
13+
4. Never rely solely on color to communicate status—pair with text or icons

‎components/indicator/badge/badge/dsm/accessibility/accessibility_intro.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Badge components must meet WCAG 2.2 Level AA requirements to ensure status information is perceivable by all users, including those using assistive technologies. 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/badge/badge/dsm/accessibility/additional_resources.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
- [Orange Accessibility Guidelines - Colors and Contrasts](https://a11y-guidelines.orange.com/en/web/design/colors-and-contrasts/)
2+
- [Orange Accessibility Guidelines - Textual Content](https://a11y-guidelines.orange.com/en/web/develop/textual-content/)
3+
- [WCAG 2.2 Understanding Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color)
4+
- [W3C ARIA Status Role](https://www.w3.org/TR/wai-aria-1.2/#status)
5+
- [Orange Design System - Accessibility & Sustainability](https://unified-design-system.orange.com/472794e18/p/88ebab-accessibility-and-sustainability)

‎components/indicator/badge/badge/dsm/accessibility/design_requirements.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
### Structure & Labels
2+
- [ ] **Accessible name**: Provide `aria-label` or visible text that describes the badge status ([Orange labelling guide](https://a11y-guidelines.orange.com/en/web/develop/textual-content/))
3+
- [ ] **Semantic meaning**: Use `role="status"` for badges that convey current state information
4+
- [ ] **Programmatic association**: Associate badge with related element using `aria-describedby` when needed
5+
6+
### Visual Design
7+
- [ ] **Color contrast**: Ensure ≥3:1 contrast ratio between badge and adjacent background ([Orange contrast guide](https://a11y-guidelines.orange.com/en/web/design/colors-and-contrasts/))
8+
- [ ] **Non-color indicators**: Supplement color with text labels or patterns for status meaning
9+
- [ ] **Minimum size**: Maintain minimum 8px dimension; consider 16px+ for critical status information
10+
11+
### Content
12+
- [ ] **Descriptive labels**: ❌ "Red badge" / ✅ "Error status" ([Orange text alternatives](https://a11y-guidelines.orange.com/en/web/develop/textual-content/))
13+
- [ ] **Concise text**: Keep badge labels brief but meaningful—use full words when space permits

‎components/indicator/badge/badge/dsm/accessibility/key_wcag_criteria.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
- **1.1.1 Non-text Content** (A): Provide text alternatives for badge icons or color-only indicators
2+
- **1.4.1 Use of Color** (A): Don't use color as the only visual means of conveying status information
3+
- **1.4.3 Contrast (Minimum)** (AA): Badge background must have ≥4.5:1 contrast with any text content
4+
- **1.4.11 Non-text Contrast** (AA): Badge container must have ≥3:1 contrast against adjacent backgrounds
5+
- **4.1.3 Status Messages** (AA): Use `role="status"` or `aria-live="polite"` for dynamic badge updates
6+
7+
For complete reference: [Orange Accessibility Guidelines - Components](https://a11y-guidelines.orange.com/en/web/components-examples/)

‎components/indicator/badge/badge/dsm/accessibility/testing_checklist.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
### Screen Reader Testing
2+
- [ ] Test with NVDA (Windows), JAWS (Windows), VoiceOver (macOS/iOS), TalkBack (Android)
3+
- [ ] Verify status meaning announced, not just color; dynamic updates spoken via live regions
4+
5+
### Keyboard Testing
6+
- [ ] Confirm badge is not focusable (badges are display-only, not interactive)
7+
- [ ] Verify focus moves logically past badges to interactive elements
8+
9+
### Visual Testing
10+
- [ ] Test with Windows High Contrast Mode, grayscale filters, and color blindness simulators
11+
12+
Resources: [Orange Accessibility Testing Guide](https://a11y-guidelines.orange.com/en/web/test/)

‎components/indicator/badge/badge/dsm/changelog.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Changelog
2+
3+
| Date | Number | Notes | Designer |
4+
|------|--------|-------|----------|
5+
| Oct 14, 2025 | 1.2.0 | • The component now has two states: Enabled and Disabled. • Documentation has been updated and published in Zeroeight, with use case examples provided for every state. • The colors and background tokens for the functional states of the positive and info statuses have been changed. • For the "Status neutral" variant, the surface token "color-surface-status-neutral-emphasized" has been replaced by the token "color-surface-inverse-high" | Anton Astafev |
6+
| Jun 16, 2025 | 1.1.0 | • "Accent" variant added | Maxime Tonnerre |
7+
| Mai 9, 2025 | 1.0.0 | • Component creation | Anton Astafev |

‎components/indicator/badge/badge/dsm/guideline/anatomy.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
| # | Element | Purpose | Optional |
2+
|---|---------|---------|----------|
3+
| 1 | Container | Pill-shaped background that holds the badge and applies semantic color | N |
4+
| 2 | Background fill | Color surface indicating status type (neutral, accent, positive, info, warning, negative) | N |
5+
| 3 | Border radius | Fully rounded corners (pill shape) for visual distinction | N |
6+
| 4 | Size constraint | Fixed dimensions based on size variant (8px, 12px, 16px, 20px) | N |
7+
| 5 | Disabled state styling | Reduced opacity/color to indicate inactive status | Y |

‎components/indicator/badge/badge/dsm/guideline/best_for.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
✅ Indicating system or item status (success, warning, error, info)
2+
3+
✅ Highlighting new features, updates, or content discoveries
4+
5+
✅ Showing approval or completion states in workflows
6+
7+
✅ Categorizing content with color-coded visual labels
8+
9+
✅ Drawing attention to important metadata without interrupting user flow
10+
11+
✅ Communicating urgency levels in dashboard or list views
12+
13+
✅ Displaying content states like "Draft", "Published", or "Archived"
14+
15+
✅ Supplementing navigation items with status context
16+
17+
✅ Providing quick visual feedback for data validation results
18+
19+
✅ Marking items requiring user attention in compact spaces

‎components/indicator/badge/badge/dsm/guideline/definition.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
The Badge is a small UI element used to highlight status, notifications, or categorization within an interface. It is often displayed as a label or indicator with a distinct background color and text.
2+
3+
**Usage:**
4+
• Renders as a static label without a number.
5+
Used for status indicators (e.g., "New", "Pending", "Success").
6+
The size remains unchanged despite the increase in the interface size.

0 commit comments

Comments
 (0)