Skip to content

Commit ebf268b

Browse files
taohsutaohsu
committed
update/filter_chip_expand.md
1 parent 53d9e0f commit ebf268b

1 file changed

Lines changed: 240 additions & 0 deletions

File tree

‎components/control/chip/filter_chip_expand/filter_chip_expand.md‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
# Guideline
2+
3+
## Intro 👈🤖
4+
5+
An expand filter chip combines selection filtering with a dropdown menu to apply filters from predefined options.
6+
7+
---
8+
9+
## Definition
10+
11+
An Expand filter chip is a compact UI component that combines the functionality of a filter chip with a dropdown menu. It allows users to apply a filter from a predefined list of options without leaving the current context. When activated, it reveals a dropdown containing selectable values, and the chip updates to reflect the selected filter. This component is useful for filters with multiple or dynamic options, offering both clarity and space efficiency in the interface.
12+
13+
---
14+
15+
## Best for 👈🤔
16+
17+
✅ Grouping multiple filter options under a single category label
18+
19+
✅ Space-constrained interfaces where inline filter lists would be too wide
20+
21+
✅ Dynamic filter values that change based on data or context
22+
23+
✅ Multi-select filtering where users can choose several options within one category
24+
25+
✅ Filter experiences requiring a counter badge to show active selection count
26+
27+
✅ Mobile and responsive layouts where dropdown menus optimize touch targets
28+
29+
✅ Contextual filtering that needs to remain visible while options are reviewed
30+
31+
✅ Faceted search interfaces with hierarchical or grouped filter options
32+
33+
✅ Data tables or lists requiring quick, non-disruptive filter application
34+
35+
✅ Product catalogs with attribute-based filtering like size, color, or price range
36+
37+
---
38+
39+
## Anatomy 👈🤖
40+
41+
| # | Element | Purpose | Optional |
42+
|---|---------|---------|----------|
43+
| 1 | Container | Pill-shaped wrapper providing interactive area and visual boundary | N |
44+
| 2 | Label text | Displays the filter category name or selected value | N |
45+
| 3 | Tick icon | Indicates selected state when filter is active | Y |
46+
| 4 | Counter badge | Shows number of selected options within the filter category | Y |
47+
| 5 | Chevron icon | Indicates expandable dropdown; points up when expanded, down when collapsed | N |
48+
| 6 | Focus ring | Triple-border focus indicator for keyboard navigation accessibility | N |
49+
50+
---
51+
52+
## Selection Status
53+
54+
**`Selected`** Visually differentiated to show an active filter. The chip changes color and displays a tick and counter to indicate it has been selected.
55+
56+
**`Unselected`** Maintains a neutral appearance, indicating an available filter option.
57+
58+
---
59+
60+
## selection_status_do_&_dont 👈🤔
61+
62+
✅ **Do:** Use a prominent visual change like border color or weight to distinguish selected from unselected states
63+
❌ **Don't:** Rely solely on color to communicate selection status without additional indicators
64+
65+
✅ **Do:** Display a checkmark or tick icon alongside the label to reinforce the selected state
66+
❌ **Don't:** Use ambiguous icons that could be confused with other actions like delete or close
67+
68+
✅ **Do:** Include a counter badge when multiple options are selected within one filter category
69+
❌ **Don't:** Show counters for single-select filters where only one option can be active
70+
71+
✅ **Do:** Ensure selected chips are immediately distinguishable at a glance in filter groups
72+
❌ **Don't:** Make the visual difference so subtle that users miss which filters are currently applied
73+
74+
✅ **Do:** Allow users to quickly clear selections by interacting with the chip or a dedicated clear action
75+
❌ **Don't:** Force users to re-open the dropdown and manually deselect each option individually
76+
77+
---
78+
79+
## Expanded
80+
81+
The "Expanded" state allows the filter chip to be dynamically edited via a dropdown component.
82+
83+
**`True`** When a Filter chip is in the "Expanded" state, it:
84+
- Displays a contextual dropdown containing a menu or controls to modify the associated filter values.
85+
- Remains visually attached to the source chip (often below or overlapping).
86+
- Allows the user to select multiple options or apply a new value.
87+
The component can remain in the "Expanded" state until a user action (click or key press) closes it. Chevron icon points up.
88+
89+
**`False`** The "Collapsed" state is the default or "resting" state of the filter chip, in which it simply displays a filter value, without any visible complex interaction. Chevron icon points down.
90+
91+
---
92+
93+
## expanded_do_&_dont 👈🤔
94+
95+
✅ **Do:** Position the dropdown directly below or adjacent to the chip maintaining visual connection
96+
❌ **Don't:** Display the dropdown far from the chip causing users to lose context of which filter they're editing
97+
98+
✅ **Do:** Use the chevron icon direction to clearly indicate expanded (up) versus collapsed (down) state
99+
❌ **Don't:** Use the same chevron direction for both states or omit the directional indicator entirely
100+
101+
✅ **Do:** Keep the dropdown open while users make multiple selections in multiselect scenarios
102+
❌ **Don't:** Close the dropdown after each selection forcing users to repeatedly reopen it
103+
104+
✅ **Do:** Allow closing the dropdown via clicking outside, pressing Escape, or clicking the chip again
105+
❌ **Don't:** Require a specific close button as the only way to dismiss the dropdown
106+
107+
✅ **Do:** Maintain focus management so keyboard users can navigate between chip and dropdown seamlessly
108+
❌ **Don't:** Trap focus in the dropdown or lose focus position when the dropdown closes
109+
110+
---
111+
112+
# Specs
113+
114+
## States
115+
116+
**`Enabled`** The chip is active and available for interaction.
117+
It is displayed in its standard style without additional effects.
118+
119+
**`Hover`** The appearance of the chip changes when the cursor hovers over it.
120+
This includes a color change for the border and the chip's content.
121+
122+
**`Pressed`** The active state when the chip is being pressed.
123+
Accompanied by a color change in the content and border.
124+
125+
**`Disabled`** The chip is unavailable for interaction.
126+
It is visually represented with a muted color change in the content and border (reduced brightness and contrast).
127+
128+
**`Focus`** The state when the chip receives focus (e.g., during keyboard navigation).
129+
It features a triple contrasting border to indicate the active element.
130+
131+
**`Skeleton`** Displays a placeholder chip while the content is loading.
132+
It appears as a semi-transparent gray block without content.
133+
134+
---
135+
136+
## Layout and spacing
137+
138+
🚧 Content to be added
139+
140+
---
141+
142+
# Accessibility 👈🤖
143+
144+
## Accessibility intro
145+
146+
The Expand Filter Chip must meet WCAG 2.2 Level AA standards to ensure all users can effectively filter content regardless of ability. For comprehensive accessibility guidance, see the [Orange Unified Design System Accessibility Overview](https://unified-design-system.orange.com/472794e18/p/88ebab-accessibility-and-sustainability).
147+
148+
---
149+
150+
## Accessibility Challenges
151+
152+
The Expand Filter Chip presents unique accessibility challenges because it combines interactive button behavior with a dropdown popup. The component must communicate its dual nature (filter indicator and expandable control), announce state changes clearly, and maintain proper focus management when the dropdown opens and closes.
153+
154+
### Key Challenges
155+
156+
- Communicating the expandable nature and current selection status to screen readers
157+
- Managing focus between the chip and the dropdown popup without disorienting users
158+
- Ensuring the chevron icon direction change is perceivable by all users
159+
- Providing keyboard access to all dropdown options while maintaining logical tab order
160+
161+
### Critical Success Factors
162+
163+
1. Use `role="combobox"` with proper `aria-expanded` and `aria-haspopup="listbox"` attributes
164+
2. Announce selection count and expanded state changes via live regions or ARIA attributes
165+
3. Implement complete keyboard navigation following WAI-ARIA combobox pattern
166+
4. Maintain visible focus indicators with ≥3:1 contrast ratio throughout all interactions
167+
168+
---
169+
170+
## Design Requirements
171+
172+
### Structure & Labels
173+
174+
- [ ] **Accessible name**: Provide descriptive label via visible text or `aria-label` ([Orange label guidelines](https://a11y-guidelines.orange.com/en/web/develop/textual-content/))
175+
- [ ] **Role announcement**: Use `role="combobox"` with `aria-haspopup="listbox"` for proper semantics
176+
- [ ] **State communication**: Set `aria-expanded` to "true" or "false" reflecting dropdown visibility
177+
178+
### Visual Design
179+
180+
- [ ] **Focus indicator**: Triple-border focus ring with ≥3:1 contrast against background ([Focus guidelines](https://a11y-guidelines.orange.com/en/web/design/colors-and-contrasts/))
181+
- [ ] **State distinction**: Selected vs unselected states distinguishable without relying on color alone
182+
- [ ] **Touch target**: Minimum 48×48px interactive area for mobile accessibility
183+
184+
### Content
185+
186+
- [ ] **Label clarity**: ❌ "Filter 1" / ✅ "Size" or "Price range" ([Content guidelines](https://a11y-guidelines.orange.com/en/web/develop/textual-content/))
187+
- [ ] **Counter announcement**: Badge count included in accessible name (e.g., "Size, 3 selected")
188+
189+
---
190+
191+
## Testing Checklist
192+
193+
### Screen Reader Testing
194+
195+
- [ ] Test with NVDA (Windows), JAWS (Windows), VoiceOver (macOS/iOS), TalkBack (Android)
196+
- [ ] Verify role, expanded state, selection count, and dropdown options are announced correctly
197+
198+
### Keyboard Testing
199+
200+
- [ ] Tab to chip, Enter/Space opens dropdown, Arrow keys navigate options, Escape closes
201+
- [ ] Focus returns to chip after dropdown closes; focus ring visible throughout
202+
203+
### Interaction Testing
204+
205+
- [ ] Selection changes update chip label, counter badge, and are announced to assistive technology
206+
207+
Resources: [Orange Accessibility Testing Guide](https://a11y-guidelines.orange.com/en/web/test/)
208+
209+
---
210+
211+
## Key WCAG Criteria
212+
213+
- **1.4.11 Non-text Contrast** (AA): Focus indicators and state changes meet ≥3:1 contrast ratio
214+
- **2.1.1 Keyboard** (A): All chip and dropdown functionality operable via keyboard alone
215+
- **2.4.7 Focus Visible** (AA): Visible focus indicator displayed on chip and dropdown options
216+
- **4.1.2 Name, Role, Value** (A): Combobox role with proper ARIA attributes communicates state
217+
- **4.1.3 Status Messages** (AA): Selection changes announced without moving focus
218+
219+
For complete reference: [Orange Accessibility Guidelines - WCAG Criteria](https://a11y-guidelines.orange.com/en/web/wcag/)
220+
221+
---
222+
223+
## Additional Resources
224+
225+
- [Orange Accessibility Guidelines - Form Components](https://a11y-guidelines.orange.com/en/web/components-examples/)
226+
- [WAI-ARIA Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/)
227+
- [WCAG 2.2 Understanding Focus Visible](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html)
228+
- [Orange Design System - Accessibility & Sustainability](https://unified-design-system.orange.com/472794e18/p/88ebab-accessibility-and-sustainability)
229+
230+
---
231+
232+
# Changelog
233+
234+
| Date | Number | Notes | Designer |
235+
|------|--------|-------|----------|
236+
| Nov 12, 2025 | 1.4.0 | • Label text with bold replaced by medium. | Anton Astafev |
237+
| Jul 21, 2025 | 1.3.0 | • The name of the family to which this component belongs is changing: Input → Control. As a result, the token naming convention is being updated. • 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) | Maxime Tonnerre |
238+
| Jul 2, 2025 | 1.2.0 | • Modification of the typographic alignment "Label text", the alignment is now centered. | Maxime Tonnerre |
239+
| Jun 13, 2025 | 1.1.0 | • Modification of the minimum height of the frame containing the component to increase the interactive area (48px). Component token: $ouds-input-chip-size-min-height-interactive-area • Modification of the semantic token corresponding to the inline padding used when displaying an icon. Component token: $ouds-input-chip-space-padding-inline-icon Semantic token: $ouds-space-padding-inline-sm • Modification of the typographic alignment of the "Content" frame, the alignment is now centered. | Maxime Tonnerre |
240+
| Apr 9, 2025 | 1.0.0 | • Component creation | Anton Astafev |

0 commit comments

Comments
 (0)