Skip to content

Commit 62d9f91

Browse files
taohsutaohsu
committed
update/badge_count.md
1 parent 62bfbf6 commit 62d9f91

2 files changed

Lines changed: 166 additions & 2 deletions

File tree

‎components/indicator/badge/badge/badge.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Guideline
22

3-
## Intro 👈🤖
3+
## Intro
44

55
A badge is a compact visual indicator that highlights status, notifications, or categorization within an interface using color-coded labels.
66

@@ -17,7 +17,7 @@ The size remains unchanged despite the increase in the interface size.
1717

1818
---
1919

20-
## Best for 👈🤔
20+
## Best for
2121

2222
✅ Indicating system or item status (success, warning, error, info)
2323

‎components/indicator/badge/badge_count/badge_count.md‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
# Guideline
2+
3+
## Intro 👈🤖
4+
5+
A badge count is a non-interactive visual indicator that displays numeric values to communicate quantities or notification counts.
6+
7+
---
8+
9+
## Definition
10+
11+
🚧 Missing from source: Definition section in badge_count_overview.md
12+
13+
---
14+
15+
## Best for 👈🤔
16+
17+
✅ Displaying unread notification counts on navigation icons or menu items
18+
19+
✅ Showing the number of items in a shopping cart or basket
20+
21+
✅ Indicating active filter counts in search or data table interfaces
22+
23+
✅ Communicating pending task or action quantities requiring user attention
24+
25+
✅ Displaying unread message counts in messaging or email applications
26+
27+
✅ Showing the number of updates or alerts in system status indicators
28+
29+
✅ Indicating quantities in tabbed interfaces where counts provide useful context
30+
31+
✅ Communicating real-time count changes for collaborative or dynamic content
32+
33+
✅ Displaying error or warning counts that need user acknowledgment
34+
35+
✅ Showing selection counts in multi-select or batch operation interfaces
36+
37+
---
38+
39+
## Anatomy 👈🤖
40+
41+
| # | Element | Purpose | Optional |
42+
|---|---------|---------|----------|
43+
| 1 | Container | Pill-shaped background that holds the count value and provides visual emphasis through status color | N |
44+
| 2 | Count label | Numeric text displaying the quantity value, centered within the container | N |
45+
| 3 | Status color | Background color indicating semantic meaning: Neutral, Accent, Positive, Info, Warning, or Negative | N |
46+
| 4 | Padding | Horizontal spacing ensuring consistent internal layout regardless of digit count | N |
47+
| 5 | Border radius | Pill shape (2000px radius) creating the characteristic rounded appearance | N |
48+
49+
---
50+
51+
🚧 Missing from source: badge_count_overview.md file required (no additional sections found to inject)
52+
53+
---
54+
55+
# Specs
56+
57+
## States
58+
59+
🚧 Missing from source: States section in badge_count_overview.md
60+
61+
Based on Figma component data, the Badge Count supports the following states:
62+
63+
**Enabled state**: The badge displays with full status color styling and readable count text. The contrast ratio between content and background meets the 4.5:1 minimum requirement.
64+
65+
**Disabled state**: The badge displays with a muted background color (`color-action-disabled`) and reduced contrast text (`color-content-on-action-disabled`), indicating the associated element or feature is unavailable.
66+
67+
---
68+
69+
## Layout and spacing
70+
71+
🚧 Content to be added
72+
73+
---
74+
75+
# Accessibility 👈🤖
76+
77+
## Accessibility intro
78+
79+
Badge Count components must meet WCAG 2.2 Level AA standards for color contrast, status communication, and assistive technology compatibility. For comprehensive accessibility guidance, see the [Orange Unified Design System Accessibility Overview](https://unified-design-system.orange.com/472794e18/p/88ebab-accessibility-and-sustainability).
80+
81+
---
82+
83+
## Accessibility Challenges
84+
85+
Badge counts present unique accessibility challenges because they are non-interactive visual indicators that communicate dynamic numeric information. Users must be able to perceive badge updates through multiple channels, and screen reader users need equivalent access to count changes without requiring focus navigation to the badge element.
86+
87+
### Key Challenges
88+
- Color-only status differentiation may exclude users with color vision deficiencies
89+
- Dynamic count updates may not be announced to screen reader users
90+
- Small text size within badges can impact readability for users with low vision
91+
- Non-interactive nature means standard focus-based announcement patterns don't apply
92+
93+
### Critical Success Factors
94+
1. Maintain 4.5:1 minimum contrast ratio between count text and background (WCAG 1.4.3)
95+
2. Provide programmatic context through `aria-label` or adjacent text for screen readers
96+
3. Use ARIA live regions to announce count changes when updates occur dynamically
97+
4. Ensure status meaning is conveyed through more than color alone
98+
99+
---
100+
101+
## Design Requirements
102+
103+
### Structure & Labels
104+
- [ ] **Accessible context**: Provide descriptive text via `aria-label` or visually hidden text (e.g., "5 unread messages" not just "5") ([Orange labeling guidelines](https://a11y-guidelines.orange.com/en/web/develop/textual-content/))
105+
- [ ] **Non-interactive element**: Badge should not receive keyboard focus as it is purely informational (WCAG 2.4.3)
106+
- [ ] **Semantic association**: Position badge adjacent to its related element so context is clear to all users
107+
108+
### Visual Design
109+
- [ ] **Text contrast**: Minimum 4.5:1 contrast ratio between count and background color ([Orange contrast guidelines](https://a11y-guidelines.orange.com/en/web/design/colors-and-contrasts/))
110+
- [ ] **Color independence**: Don't rely solely on color to convey status; combine with text labels or icons when critical
111+
- [ ] **Minimum size**: Ensure count text meets minimum 12px font size for readability
112+
113+
### Content
114+
- [ ] **Meaningful counts**: ❌ "5" / ✅ "5 notifications" (via accessible label) ([Orange content guidelines](https://a11y-guidelines.orange.com/en/web/develop/textual-content/))
115+
- [ ] **Truncation clarity**: Use "99+" pattern for large numbers with accessible full count available
116+
117+
---
118+
119+
## Testing Checklist
120+
121+
### Screen Reader Testing
122+
- [ ] Test with NVDA (Windows), JAWS (Windows), VoiceOver (macOS/iOS), TalkBack (Android)
123+
- [ ] Verify badge context announced correctly, count values read accurately, status meaning communicated
124+
125+
### Keyboard Testing
126+
- [ ] Confirm badge does not receive focus (non-interactive)
127+
- [ ] Verify associated interactive element (icon, button) is keyboard accessible and announces badge context
128+
129+
### Live Region Testing
130+
- [ ] Verify count changes announced via `aria-live="polite"` when updates occur dynamically
131+
- [ ] Confirm announcements don't interrupt critical user tasks
132+
133+
Resources: [Orange Accessibility Testing Guide](https://a11y-guidelines.orange.com/en/web/test/)
134+
135+
---
136+
137+
## Key WCAG Criteria
138+
139+
- **1.4.3 Contrast (Minimum)** (AA): Count text must have 4.5:1 contrast ratio against badge background
140+
- **1.4.1 Use of Color** (A): Status information conveyed by color must also be available through text or context
141+
- **4.1.3 Status Messages** (AA): Dynamic count updates must be programmatically announced without receiving focus
142+
- **1.1.1 Non-text Content** (A): Provide accessible name describing the badge's purpose and count context
143+
- **2.4.3 Focus Order** (A): Badge should not appear in keyboard focus sequence as non-interactive element
144+
145+
For complete reference: [Orange Accessibility Guidelines - Component Examples](https://a11y-guidelines.orange.com/en/web/components-examples/)
146+
147+
---
148+
149+
## Additional Resources
150+
151+
- [Orange Accessibility Guidelines - Colors and Contrasts](https://a11y-guidelines.orange.com/en/web/design/colors-and-contrasts/)
152+
- [WCAG 2.2 Understanding Status Messages (4.1.3)](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html)
153+
- [W3C ARIA Live Regions](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA19)
154+
- [Orange Design System - Accessibility & Sustainability](https://unified-design-system.orange.com/472794e18/p/88ebab-accessibility-and-sustainability)
155+
156+
---
157+
158+
# Changelog
159+
160+
| Date | Number | Notes | Designer |
161+
|------|--------|-------|----------|
162+
| 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. • The minimum required contrast ratio has been corrected from 3:1 to 4.5:1 between content (count) and background for Enable state. For the "Status neutral" variant: • The content token "color-content-on-status-neutral-emphasized" has been replaced by the token "color-content-inverse" • The surface token "color-surface-status-neutral-emphasized" has been replaced by the token "color-surface-inverse-high" | Anton Astafev |
163+
| Jun 16, 2025 | 1.1.0 | • "Accent" variant added | Maxime Tonnerre |
164+
| Mai 9, 2025 | 1.0.0 | • Component creation | Anton Astafev |

0 commit comments

Comments
 (0)