@adobe/design-data-spec 0.11.0 → 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/avatar-group.json +1 -0
- package/components/button-group.json +1 -0
- package/components/in-field-progress-circle.json +14 -1
- package/components/meter.json +9 -1
- package/components/progress-bar.json +14 -1
- package/components/progress-circle.json +14 -1
- package/components/swatch-group.json +1 -0
- package/components/table.json +2 -1
- package/conformance/invalid/SPEC-034/dataset.json +14 -0
- package/conformance/invalid/SPEC-034/expected-errors.json +10 -0
- package/conformance/valid/SPEC-034/dataset.json +23 -0
- package/package.json +1 -1
- package/rules/rules.yaml +11 -0
- package/schemas/component.schema.json +2 -11
- package/spec/accessibility-adapters.md +51 -36
- package/spec/accessibility.md +23 -18
- package/spec/registry.md +1 -1
|
@@ -78,6 +78,19 @@
|
|
|
78
78
|
}
|
|
79
79
|
],
|
|
80
80
|
"accessibility": {
|
|
81
|
-
"
|
|
81
|
+
"role": "progressbar",
|
|
82
|
+
"focusable": false,
|
|
83
|
+
"wcag": [
|
|
84
|
+
{
|
|
85
|
+
"criterion": "4.1.2",
|
|
86
|
+
"level": "A",
|
|
87
|
+
"title": "Name, Role, Value"
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"criterion": "4.1.3",
|
|
91
|
+
"level": "AA",
|
|
92
|
+
"title": "Status Messages"
|
|
93
|
+
}
|
|
94
|
+
]
|
|
82
95
|
}
|
|
83
96
|
}
|
package/components/meter.json
CHANGED
|
@@ -180,6 +180,19 @@
|
|
|
180
180
|
}
|
|
181
181
|
],
|
|
182
182
|
"accessibility": {
|
|
183
|
-
"
|
|
183
|
+
"role": "progressbar",
|
|
184
|
+
"focusable": false,
|
|
185
|
+
"wcag": [
|
|
186
|
+
{
|
|
187
|
+
"criterion": "4.1.2",
|
|
188
|
+
"level": "A",
|
|
189
|
+
"title": "Name, Role, Value"
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
"criterion": "4.1.3",
|
|
193
|
+
"level": "AA",
|
|
194
|
+
"title": "Status Messages"
|
|
195
|
+
}
|
|
196
|
+
]
|
|
184
197
|
}
|
|
185
198
|
}
|
|
@@ -97,6 +97,19 @@
|
|
|
97
97
|
}
|
|
98
98
|
],
|
|
99
99
|
"accessibility": {
|
|
100
|
-
"
|
|
100
|
+
"role": "progressbar",
|
|
101
|
+
"focusable": false,
|
|
102
|
+
"wcag": [
|
|
103
|
+
{
|
|
104
|
+
"criterion": "4.1.2",
|
|
105
|
+
"level": "A",
|
|
106
|
+
"title": "Name, Role, Value"
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"criterion": "4.1.3",
|
|
110
|
+
"level": "AA",
|
|
111
|
+
"title": "Status Messages"
|
|
112
|
+
}
|
|
113
|
+
]
|
|
101
114
|
}
|
|
102
115
|
}
|
package/components/table.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"displayName": "Table",
|
|
7
7
|
"description": "Tables display information in rows and columns, allowing users to compare and scan structured data.",
|
|
8
8
|
"meta": {
|
|
9
|
-
"category": "data
|
|
9
|
+
"category": "data-visualization",
|
|
10
10
|
"documentationUrl": "https://spectrum.adobe.com/page/table/"
|
|
11
11
|
},
|
|
12
12
|
"options": {
|
|
@@ -390,6 +390,7 @@
|
|
|
390
390
|
}
|
|
391
391
|
],
|
|
392
392
|
"accessibility": {
|
|
393
|
+
"role": "grid",
|
|
393
394
|
"intents": ["select", "navigate"],
|
|
394
395
|
"focusable": true,
|
|
395
396
|
"keyboardIntents": ["navigate-items", "activate", "select-all"],
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"tokens": [],
|
|
3
|
+
"components": [
|
|
4
|
+
{
|
|
5
|
+
"$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/widget.json",
|
|
6
|
+
"name": "widget",
|
|
7
|
+
"displayName": "Widget",
|
|
8
|
+
"meta": {
|
|
9
|
+
"category": "not-a-real-category",
|
|
10
|
+
"documentationUrl": "https://spectrum.adobe.com/page/widget/"
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
]
|
|
14
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"tokens": [],
|
|
3
|
+
"components": [
|
|
4
|
+
{
|
|
5
|
+
"$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/button.json",
|
|
6
|
+
"name": "button",
|
|
7
|
+
"displayName": "Button",
|
|
8
|
+
"meta": {
|
|
9
|
+
"category": "actions",
|
|
10
|
+
"documentationUrl": "https://spectrum.adobe.com/page/button/"
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/table.json",
|
|
15
|
+
"name": "table",
|
|
16
|
+
"displayName": "Table",
|
|
17
|
+
"meta": {
|
|
18
|
+
"category": "data-visualization",
|
|
19
|
+
"documentationUrl": "https://spectrum.adobe.com/page/table/"
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
package/package.json
CHANGED
package/rules/rules.yaml
CHANGED
|
@@ -321,3 +321,14 @@ rules:
|
|
|
321
321
|
message: "Registry ID '{id}' appears in multiple registries — this is permitted; do not reject on cross-registry overlap alone"
|
|
322
322
|
spec_ref: spec/registry.md#id-scoping
|
|
323
323
|
introduced_in: "1.0.0-draft"
|
|
324
|
+
- id: SPEC-034
|
|
325
|
+
name: component-category-registry-sync
|
|
326
|
+
severity: warning
|
|
327
|
+
category: naming-consistency
|
|
328
|
+
assert: >
|
|
329
|
+
A component's meta.category SHOULD reference an id from the categories registry in
|
|
330
|
+
@adobe/design-system-registry (categories.json). Unknown values are reported as
|
|
331
|
+
warnings; the registry is the authoritative vocabulary.
|
|
332
|
+
message: "Component '{entity}' meta.category value '{value}' is not in the design-system-registry categories vocabulary"
|
|
333
|
+
spec_ref: spec/registry.md#categories
|
|
334
|
+
introduced_in: "1.0.0-draft"
|
|
@@ -88,17 +88,8 @@
|
|
|
88
88
|
"properties": {
|
|
89
89
|
"category": {
|
|
90
90
|
"type": "string",
|
|
91
|
-
"
|
|
92
|
-
|
|
93
|
-
"containers",
|
|
94
|
-
"data visualization",
|
|
95
|
-
"feedback",
|
|
96
|
-
"inputs",
|
|
97
|
-
"navigation",
|
|
98
|
-
"status",
|
|
99
|
-
"typography"
|
|
100
|
-
],
|
|
101
|
-
"description": "Design system category for this component."
|
|
91
|
+
"minLength": 1,
|
|
92
|
+
"description": "Category id from @adobe/design-system-registry categories.json. Advisory validation via SPEC-034."
|
|
102
93
|
},
|
|
103
94
|
"documentationUrl": {
|
|
104
95
|
"type": "string",
|
|
@@ -38,6 +38,11 @@ ARIA (Accessible Rich Internet Applications) is the primary web accessibility AP
|
|
|
38
38
|
| `textbox` | `<input type="text">` or `role="textbox"` |
|
|
39
39
|
| `tooltip` | `role="tooltip"` |
|
|
40
40
|
| `tree` | `role="tree"` |
|
|
41
|
+
| `progressbar` | `role="progressbar"` |
|
|
42
|
+
| `meter` | `role="meter"` |
|
|
43
|
+
| `grid` | `role="grid"` |
|
|
44
|
+
| `listitem` | `<li>` or `role="listitem"` |
|
|
45
|
+
| `group` | `role="group"` |
|
|
41
46
|
|
|
42
47
|
### `intents`
|
|
43
48
|
|
|
@@ -93,24 +98,29 @@ iOS exposes accessibility semantics through `UIAccessibility` protocol propertie
|
|
|
93
98
|
|
|
94
99
|
### `role`
|
|
95
100
|
|
|
96
|
-
| Foundation `role` | UIAccessibilityTraits / SwiftUI
|
|
97
|
-
| ----------------- |
|
|
98
|
-
| `button` | `.button`
|
|
99
|
-
| `checkbox` | `.button` with toggled state, or SwiftUI `Toggle`
|
|
100
|
-
| `combobox` | `.button` (picker-like behavior)
|
|
101
|
-
| `dialog` | Presented as modal sheet; VoiceOver reads the accessible label
|
|
102
|
-
| `link` | `.link`
|
|
103
|
-
| `listbox` | Container view; children use `.button` or `.selected`
|
|
104
|
-
| `menu` | `.button` on trigger; menu items as `.button`
|
|
105
|
-
| `menuitem` | `.button`
|
|
106
|
-
| `radio` | `.button` with `.selected` when active
|
|
107
|
-
| `slider` | `.adjustable`
|
|
108
|
-
| `spinbutton` | `.adjustable`
|
|
109
|
-
| `switch` | `.button` with `.selected` / SwiftUI `Toggle`
|
|
110
|
-
| `tab` | `.button` with `.selected`
|
|
111
|
-
| `textbox` | `.keyboard` traits; `UITextField` or `UITextView`
|
|
112
|
-
| `tooltip` | `.staticText` on an overlay element
|
|
113
|
-
| `tree` | Hierarchical cells with `accessibilityContainerType`
|
|
101
|
+
| Foundation `role` | UIAccessibilityTraits / SwiftUI |
|
|
102
|
+
| ----------------- | ------------------------------------------------------------------------------- |
|
|
103
|
+
| `button` | `.button` |
|
|
104
|
+
| `checkbox` | `.button` with toggled state, or SwiftUI `Toggle` |
|
|
105
|
+
| `combobox` | `.button` (picker-like behavior) |
|
|
106
|
+
| `dialog` | Presented as modal sheet; VoiceOver reads the accessible label |
|
|
107
|
+
| `link` | `.link` |
|
|
108
|
+
| `listbox` | Container view; children use `.button` or `.selected` |
|
|
109
|
+
| `menu` | `.button` on trigger; menu items as `.button` |
|
|
110
|
+
| `menuitem` | `.button` |
|
|
111
|
+
| `radio` | `.button` with `.selected` when active |
|
|
112
|
+
| `slider` | `.adjustable` |
|
|
113
|
+
| `spinbutton` | `.adjustable` |
|
|
114
|
+
| `switch` | `.button` with `.selected` / SwiftUI `Toggle` |
|
|
115
|
+
| `tab` | `.button` with `.selected` |
|
|
116
|
+
| `textbox` | `.keyboard` traits; `UITextField` or `UITextView` |
|
|
117
|
+
| `tooltip` | `.staticText` on an overlay element |
|
|
118
|
+
| `tree` | Hierarchical cells with `accessibilityContainerType` |
|
|
119
|
+
| `progressbar` | `.updatesFrequently` trait; `accessibilityValue` carries percent or description |
|
|
120
|
+
| `meter` | `.staticText` with `accessibilityValue` describing the current measurement |
|
|
121
|
+
| `grid` | `accessibilityContainerType = .dataTable` |
|
|
122
|
+
| `listitem` | Children of an accessibility container; `.staticText` trait on leaf items |
|
|
123
|
+
| `group` | `accessibilityContainerType = .semanticGroup` |
|
|
114
124
|
|
|
115
125
|
### `intents`
|
|
116
126
|
|
|
@@ -149,24 +159,29 @@ Android exposes accessibility semantics via `AccessibilityNodeInfo` populated th
|
|
|
149
159
|
|
|
150
160
|
### `role`
|
|
151
161
|
|
|
152
|
-
| Foundation `role` | Android mapping
|
|
153
|
-
| ----------------- |
|
|
154
|
-
| `button` | `Button` widget or `setRoleDescription("button")`
|
|
155
|
-
| `checkbox` | `CheckBox` widget or `setCheckable(true)`
|
|
156
|
-
| `combobox` | `Spinner` widget or `setRoleDescription("combobox")`
|
|
157
|
-
| `dialog` | Dialog window; `setDismissable(true)`
|
|
158
|
-
| `link` | `setRoleDescription("link")`; add `ACTION_CLICK`
|
|
159
|
-
| `listbox` | `RecyclerView` with `setCollectionInfo`
|
|
160
|
-
| `menu` | `setRoleDescription("menu")` on the container
|
|
161
|
-
| `menuitem` | `setRoleDescription("menu item")`
|
|
162
|
-
| `radio` | `RadioButton` widget or `setCheckable(true)` + `setChecked`
|
|
163
|
-
| `slider` | `SeekBar` widget or `RangeSemantics` in Compose
|
|
164
|
-
| `spinbutton` | `setRoleDescription("spin button")`
|
|
165
|
-
| `switch` | `Switch` widget or `setRoleDescription("switch")`
|
|
166
|
-
| `tab` | `TabLayout` tab item; `setSelected(true)` when active
|
|
167
|
-
| `textbox` | `EditText` widget or `TextField` in Compose
|
|
168
|
-
| `tooltip` | `setTooltipText(text)`
|
|
169
|
-
| `tree` | `setCollectionInfo` with hierarchical structure
|
|
162
|
+
| Foundation `role` | Android mapping |
|
|
163
|
+
| ----------------- | ------------------------------------------------------------------------ |
|
|
164
|
+
| `button` | `Button` widget or `setRoleDescription("button")` |
|
|
165
|
+
| `checkbox` | `CheckBox` widget or `setCheckable(true)` |
|
|
166
|
+
| `combobox` | `Spinner` widget or `setRoleDescription("combobox")` |
|
|
167
|
+
| `dialog` | Dialog window; `setDismissable(true)` |
|
|
168
|
+
| `link` | `setRoleDescription("link")`; add `ACTION_CLICK` |
|
|
169
|
+
| `listbox` | `RecyclerView` with `setCollectionInfo` |
|
|
170
|
+
| `menu` | `setRoleDescription("menu")` on the container |
|
|
171
|
+
| `menuitem` | `setRoleDescription("menu item")` |
|
|
172
|
+
| `radio` | `RadioButton` widget or `setCheckable(true)` + `setChecked` |
|
|
173
|
+
| `slider` | `SeekBar` widget or `RangeSemantics` in Compose |
|
|
174
|
+
| `spinbutton` | `setRoleDescription("spin button")` |
|
|
175
|
+
| `switch` | `Switch` widget or `setRoleDescription("switch")` |
|
|
176
|
+
| `tab` | `TabLayout` tab item; `setSelected(true)` when active |
|
|
177
|
+
| `textbox` | `EditText` widget or `TextField` in Compose |
|
|
178
|
+
| `tooltip` | `setTooltipText(text)` |
|
|
179
|
+
| `tree` | `setCollectionInfo` with hierarchical structure |
|
|
180
|
+
| `progressbar` | `ProgressBar` widget or `setRoleDescription("progress bar")` |
|
|
181
|
+
| `meter` | `setRoleDescription("meter")`; `setRangeInfo` on `AccessibilityNodeInfo` |
|
|
182
|
+
| `grid` | `setCollectionInfo` with row/column counts |
|
|
183
|
+
| `listitem` | Children within a `setCollectionInfo` container |
|
|
184
|
+
| `group` | `setRoleDescription("group")` or `CollectionInfo` without selection |
|
|
170
185
|
|
|
171
186
|
### `intents`
|
|
172
187
|
|
package/spec/accessibility.md
CHANGED
|
@@ -36,24 +36,29 @@ The `role` field names the semantic role of the component. It maps conceptually
|
|
|
36
36
|
|
|
37
37
|
**Canonical role vocabulary:**
|
|
38
38
|
|
|
39
|
-
| Value
|
|
40
|
-
|
|
|
41
|
-
| `button`
|
|
42
|
-
| `checkbox`
|
|
43
|
-
| `combobox`
|
|
44
|
-
| `dialog`
|
|
45
|
-
| `link`
|
|
46
|
-
| `listbox`
|
|
47
|
-
| `menu`
|
|
48
|
-
| `menuitem`
|
|
49
|
-
| `radio`
|
|
50
|
-
| `slider`
|
|
51
|
-
| `spinbutton`
|
|
52
|
-
| `switch`
|
|
53
|
-
| `tab`
|
|
54
|
-
| `textbox`
|
|
55
|
-
| `tooltip`
|
|
56
|
-
| `tree`
|
|
39
|
+
| Value | Semantic meaning |
|
|
40
|
+
| ------------- | ------------------------------------------------------------------------------------------------ |
|
|
41
|
+
| `button` | Triggers a discrete action |
|
|
42
|
+
| `checkbox` | Binary on/off selection |
|
|
43
|
+
| `combobox` | Combined text input with a selectable option list |
|
|
44
|
+
| `dialog` | Modal overlay requiring a user response |
|
|
45
|
+
| `link` | Navigates the user to another context |
|
|
46
|
+
| `listbox` | Selectable list of options |
|
|
47
|
+
| `menu` | List of commands or options |
|
|
48
|
+
| `menuitem` | Individual item within a menu |
|
|
49
|
+
| `radio` | Single-select option within a group |
|
|
50
|
+
| `slider` | Range input with a continuous value |
|
|
51
|
+
| `spinbutton` | Numeric input with increment and decrement controls |
|
|
52
|
+
| `switch` | Toggles between two states (on/off) |
|
|
53
|
+
| `tab` | Selects a panel within a tabbed interface |
|
|
54
|
+
| `textbox` | Accepts free-form text input |
|
|
55
|
+
| `tooltip` | Contextual information overlay; not interactive |
|
|
56
|
+
| `tree` | Hierarchical navigable list |
|
|
57
|
+
| `progressbar` | Visual indicator of task progress (determinate or indeterminate) |
|
|
58
|
+
| `meter` | Scalar measurement within a known range (gauge, not a progress indicator) |
|
|
59
|
+
| `grid` | Two-dimensional tabular data with keyboard navigation |
|
|
60
|
+
| `listitem` | Individual item within a list container (anatomy-part role; per-part accessibility is Phase 7.3) |
|
|
61
|
+
| `group` | Generic container that groups related elements without a more specific role |
|
|
57
62
|
|
|
58
63
|
### `intents`
|
|
59
64
|
|
package/spec/registry.md
CHANGED
|
@@ -61,7 +61,7 @@ Validates the `category` field on component declarations.
|
|
|
61
61
|
**What it contains:** Top-level categories for organizing components by purpose and interaction type. Used for documentation navigation and tooling filters.
|
|
62
62
|
|
|
63
63
|
**File:** `packages/design-system-registry/registry/categories.json`\
|
|
64
|
-
**Validated by:**
|
|
64
|
+
**Validated by:** SPEC-034 (advisory — `meta.category` field values SHOULD match the categories registry)\
|
|
65
65
|
**See also:** [Component format](component-format.md)
|
|
66
66
|
|
|
67
67
|
## ID scoping
|