@brokui/brok-design-language 0.1.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/LICENSE +21 -0
- package/README.md +24 -0
- package/dist/index.d.ts +1192 -0
- package/dist/index.js +1839 -0
- package/dist/index.js.map +1 -0
- package/dist/tokens.d.ts +2457 -0
- package/dist/tokens.js +1845 -0
- package/dist/tokens.js.map +1 -0
- package/package.json +47 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,1839 @@
|
|
|
1
|
+
// Generated by scripts/design-contracts.mjs. Do not edit.
|
|
2
|
+
export { themeMetadata, themePresets, } from "./tokens.js";
|
|
3
|
+
export const interactionContracts = {
|
|
4
|
+
"IC-001": {
|
|
5
|
+
"version": 2,
|
|
6
|
+
"id": "IC-001",
|
|
7
|
+
"slug": "destructive-confirmation",
|
|
8
|
+
"title": "Confirm destructive actions",
|
|
9
|
+
"requirement": "Every destructive or hard-to-reverse action requires an explicit confirmation surface before the write starts.",
|
|
10
|
+
"appliesTo": [
|
|
11
|
+
"delete",
|
|
12
|
+
"destroy",
|
|
13
|
+
"remove",
|
|
14
|
+
"revoke",
|
|
15
|
+
"bulk destructive action"
|
|
16
|
+
],
|
|
17
|
+
"helpers": [
|
|
18
|
+
"alert-dialog",
|
|
19
|
+
"livewire-confirm"
|
|
20
|
+
],
|
|
21
|
+
"evidence": [
|
|
22
|
+
"lint",
|
|
23
|
+
"feature-test",
|
|
24
|
+
"browser-test",
|
|
25
|
+
"review-check"
|
|
26
|
+
]
|
|
27
|
+
},
|
|
28
|
+
"IC-002": {
|
|
29
|
+
"version": 2,
|
|
30
|
+
"id": "IC-002",
|
|
31
|
+
"slug": "async-feedback",
|
|
32
|
+
"title": "Expose async progress",
|
|
33
|
+
"requirement": "Every asynchronous action exposes a named loading state, blocks repeat activation, and leaves unrelated controls enabled.",
|
|
34
|
+
"appliesTo": [
|
|
35
|
+
"Livewire action",
|
|
36
|
+
"form submit",
|
|
37
|
+
"upload",
|
|
38
|
+
"client request"
|
|
39
|
+
],
|
|
40
|
+
"helpers": [
|
|
41
|
+
"button",
|
|
42
|
+
"spinner"
|
|
43
|
+
],
|
|
44
|
+
"evidence": [
|
|
45
|
+
"lint",
|
|
46
|
+
"feature-test",
|
|
47
|
+
"browser-test",
|
|
48
|
+
"review-check"
|
|
49
|
+
]
|
|
50
|
+
},
|
|
51
|
+
"IC-003": {
|
|
52
|
+
"version": 2,
|
|
53
|
+
"id": "IC-003",
|
|
54
|
+
"slug": "overlay-focus-return",
|
|
55
|
+
"title": "Restore overlay focus",
|
|
56
|
+
"requirement": "An overlay that moves focus returns focus to its invoking control after every close path.",
|
|
57
|
+
"appliesTo": [
|
|
58
|
+
"modal",
|
|
59
|
+
"alert dialog",
|
|
60
|
+
"sheet",
|
|
61
|
+
"drawer",
|
|
62
|
+
"menu",
|
|
63
|
+
"focus-moving popover"
|
|
64
|
+
],
|
|
65
|
+
"helpers": [
|
|
66
|
+
"dialog",
|
|
67
|
+
"alert-dialog",
|
|
68
|
+
"sheet",
|
|
69
|
+
"drawer",
|
|
70
|
+
"popover",
|
|
71
|
+
"dropdown"
|
|
72
|
+
],
|
|
73
|
+
"evidence": [
|
|
74
|
+
"contract-test",
|
|
75
|
+
"browser-test",
|
|
76
|
+
"review-check"
|
|
77
|
+
]
|
|
78
|
+
},
|
|
79
|
+
"IC-004": {
|
|
80
|
+
"version": 2,
|
|
81
|
+
"id": "IC-004",
|
|
82
|
+
"slug": "server-validation",
|
|
83
|
+
"title": "Render server validation consistently",
|
|
84
|
+
"requirement": "A persisted form renders the server error summary, keeps submitted values, and associates each field error with its control.",
|
|
85
|
+
"appliesTo": [
|
|
86
|
+
"POST form",
|
|
87
|
+
"PUT form",
|
|
88
|
+
"PATCH form",
|
|
89
|
+
"Livewire persisted form"
|
|
90
|
+
],
|
|
91
|
+
"helpers": [
|
|
92
|
+
"form",
|
|
93
|
+
"field",
|
|
94
|
+
"input",
|
|
95
|
+
"textarea",
|
|
96
|
+
"select"
|
|
97
|
+
],
|
|
98
|
+
"evidence": [
|
|
99
|
+
"lint",
|
|
100
|
+
"feature-test",
|
|
101
|
+
"browser-test",
|
|
102
|
+
"review-check"
|
|
103
|
+
]
|
|
104
|
+
},
|
|
105
|
+
"IC-005": {
|
|
106
|
+
"version": 2,
|
|
107
|
+
"id": "IC-005",
|
|
108
|
+
"slug": "notification-lifecycle",
|
|
109
|
+
"title": "Use one notification lifecycle",
|
|
110
|
+
"requirement": "Notifications use the shared queue, urgency vocabulary, announcement behavior, timeout policy, manual dismissal, and timer cleanup.",
|
|
111
|
+
"appliesTo": [
|
|
112
|
+
"toast",
|
|
113
|
+
"Livewire toast",
|
|
114
|
+
"flash-to-toast bridge"
|
|
115
|
+
],
|
|
116
|
+
"helpers": [
|
|
117
|
+
"toast",
|
|
118
|
+
"livewire-toast"
|
|
119
|
+
],
|
|
120
|
+
"evidence": [
|
|
121
|
+
"feature-test",
|
|
122
|
+
"browser-test",
|
|
123
|
+
"review-check"
|
|
124
|
+
]
|
|
125
|
+
},
|
|
126
|
+
"IC-006": {
|
|
127
|
+
"version": 2,
|
|
128
|
+
"id": "IC-006",
|
|
129
|
+
"slug": "table-states",
|
|
130
|
+
"title": "Use common table states",
|
|
131
|
+
"requirement": "Data tables use the shared announced loading row and actionable empty row while they keep the table shape stable.",
|
|
132
|
+
"appliesTo": [
|
|
133
|
+
"client data table",
|
|
134
|
+
"server data table",
|
|
135
|
+
"Livewire data table"
|
|
136
|
+
],
|
|
137
|
+
"helpers": [
|
|
138
|
+
"table.state",
|
|
139
|
+
"data-table",
|
|
140
|
+
"livewire-data-table"
|
|
141
|
+
],
|
|
142
|
+
"evidence": [
|
|
143
|
+
"contract-test",
|
|
144
|
+
"browser-test",
|
|
145
|
+
"review-check"
|
|
146
|
+
]
|
|
147
|
+
},
|
|
148
|
+
"IC-007": {
|
|
149
|
+
"version": 2,
|
|
150
|
+
"id": "IC-007",
|
|
151
|
+
"slug": "keyboard-navigation",
|
|
152
|
+
"title": "Support keyboard navigation",
|
|
153
|
+
"requirement": "Navigation uses native links and buttons or implements the complete keyboard model for its ARIA pattern.",
|
|
154
|
+
"appliesTo": [
|
|
155
|
+
"navigation",
|
|
156
|
+
"menu",
|
|
157
|
+
"tabs",
|
|
158
|
+
"listbox",
|
|
159
|
+
"command palette"
|
|
160
|
+
],
|
|
161
|
+
"helpers": [
|
|
162
|
+
"navigation-menu",
|
|
163
|
+
"menubar",
|
|
164
|
+
"dropdown",
|
|
165
|
+
"tabs",
|
|
166
|
+
"command"
|
|
167
|
+
],
|
|
168
|
+
"evidence": [
|
|
169
|
+
"lint",
|
|
170
|
+
"contract-test",
|
|
171
|
+
"browser-test",
|
|
172
|
+
"review-check"
|
|
173
|
+
]
|
|
174
|
+
},
|
|
175
|
+
"IC-008": {
|
|
176
|
+
"version": 2,
|
|
177
|
+
"id": "IC-008",
|
|
178
|
+
"slug": "unsaved-changes",
|
|
179
|
+
"title": "Warn about unsaved changes",
|
|
180
|
+
"requirement": "A persisted form uses the shared dirty guard for document navigation and cancelable client-router navigation, then clears it only for a valid submit or explicit reset.",
|
|
181
|
+
"appliesTo": [
|
|
182
|
+
"create form",
|
|
183
|
+
"edit form",
|
|
184
|
+
"wizard",
|
|
185
|
+
"settings form",
|
|
186
|
+
"file selection"
|
|
187
|
+
],
|
|
188
|
+
"helpers": [
|
|
189
|
+
"form.guard"
|
|
190
|
+
],
|
|
191
|
+
"evidence": [
|
|
192
|
+
"lint",
|
|
193
|
+
"feature-test",
|
|
194
|
+
"browser-test",
|
|
195
|
+
"review-check"
|
|
196
|
+
]
|
|
197
|
+
},
|
|
198
|
+
"IC-009": {
|
|
199
|
+
"version": 2,
|
|
200
|
+
"id": "IC-009",
|
|
201
|
+
"slug": "failed-request-recovery",
|
|
202
|
+
"title": "Recover from failed requests",
|
|
203
|
+
"requirement": "A failed, interrupted, timed-out, offline, or session-expired request preserves safe user input, removes the busy state, announces the failure, and offers a retry path.",
|
|
204
|
+
"appliesTo": [
|
|
205
|
+
"form submit",
|
|
206
|
+
"Livewire action",
|
|
207
|
+
"upload",
|
|
208
|
+
"client request"
|
|
209
|
+
],
|
|
210
|
+
"helpers": [
|
|
211
|
+
"form.guard",
|
|
212
|
+
"button"
|
|
213
|
+
],
|
|
214
|
+
"evidence": [
|
|
215
|
+
"feature-test",
|
|
216
|
+
"browser-test",
|
|
217
|
+
"review-check"
|
|
218
|
+
]
|
|
219
|
+
},
|
|
220
|
+
"IC-010": {
|
|
221
|
+
"version": 2,
|
|
222
|
+
"id": "IC-010",
|
|
223
|
+
"slug": "idempotent-writes",
|
|
224
|
+
"title": "Make repeat writes idempotent",
|
|
225
|
+
"requirement": "A retried create or side-effecting request uses a stable operation key or an equivalent database invariant so one user intent produces one durable effect.",
|
|
226
|
+
"appliesTo": [
|
|
227
|
+
"create request",
|
|
228
|
+
"payment",
|
|
229
|
+
"notification-producing action",
|
|
230
|
+
"webhook"
|
|
231
|
+
],
|
|
232
|
+
"helpers": [
|
|
233
|
+
"form",
|
|
234
|
+
"server idempotency store"
|
|
235
|
+
],
|
|
236
|
+
"evidence": [
|
|
237
|
+
"feature-test",
|
|
238
|
+
"database-test",
|
|
239
|
+
"review-check"
|
|
240
|
+
]
|
|
241
|
+
},
|
|
242
|
+
"IC-011": {
|
|
243
|
+
"version": 2,
|
|
244
|
+
"id": "IC-011",
|
|
245
|
+
"slug": "history-restoration",
|
|
246
|
+
"title": "Restore history navigation state",
|
|
247
|
+
"requirement": "Back, forward, and back-forward-cache restoration remove stale busy states and restore safe draft values without repeating a write.",
|
|
248
|
+
"appliesTo": [
|
|
249
|
+
"persisted form",
|
|
250
|
+
"client router",
|
|
251
|
+
"paginated view",
|
|
252
|
+
"filter state"
|
|
253
|
+
],
|
|
254
|
+
"helpers": [
|
|
255
|
+
"form.guard",
|
|
256
|
+
"URL-backed state"
|
|
257
|
+
],
|
|
258
|
+
"evidence": [
|
|
259
|
+
"browser-test",
|
|
260
|
+
"review-check"
|
|
261
|
+
]
|
|
262
|
+
},
|
|
263
|
+
"IC-012": {
|
|
264
|
+
"version": 2,
|
|
265
|
+
"id": "IC-012",
|
|
266
|
+
"slug": "concurrent-edit-conflicts",
|
|
267
|
+
"title": "Detect concurrent edit conflicts",
|
|
268
|
+
"requirement": "An update sends the version that the user edited and the server rejects a stale version without overwriting the newer record.",
|
|
269
|
+
"appliesTo": [
|
|
270
|
+
"edit form",
|
|
271
|
+
"settings update",
|
|
272
|
+
"bulk edit",
|
|
273
|
+
"stale browser tab"
|
|
274
|
+
],
|
|
275
|
+
"helpers": [
|
|
276
|
+
"form",
|
|
277
|
+
"server version check"
|
|
278
|
+
],
|
|
279
|
+
"evidence": [
|
|
280
|
+
"feature-test",
|
|
281
|
+
"database-test",
|
|
282
|
+
"browser-test",
|
|
283
|
+
"review-check"
|
|
284
|
+
]
|
|
285
|
+
},
|
|
286
|
+
"IC-013": {
|
|
287
|
+
"version": 2,
|
|
288
|
+
"id": "IC-013",
|
|
289
|
+
"slug": "javascript-fallback",
|
|
290
|
+
"title": "Honor the JavaScript fallback contract",
|
|
291
|
+
"requirement": "Each component has an explicit no-JavaScript classification, keeps meaningful server-rendered content, and supplies a native path or a clear unavailable-interaction message.",
|
|
292
|
+
"appliesTo": [
|
|
293
|
+
"Alpine component",
|
|
294
|
+
"Livewire component",
|
|
295
|
+
"client-rendered control"
|
|
296
|
+
],
|
|
297
|
+
"helpers": [
|
|
298
|
+
"component API contract",
|
|
299
|
+
"noscript fallback"
|
|
300
|
+
],
|
|
301
|
+
"evidence": [
|
|
302
|
+
"contract-test",
|
|
303
|
+
"browser-test",
|
|
304
|
+
"review-check"
|
|
305
|
+
]
|
|
306
|
+
},
|
|
307
|
+
"IC-014": {
|
|
308
|
+
"version": 2,
|
|
309
|
+
"id": "IC-014",
|
|
310
|
+
"slug": "assistive-preferences",
|
|
311
|
+
"title": "Honor assistive technology preferences",
|
|
312
|
+
"requirement": "Interactive behavior keeps a screen-reader navigation path and honors reduced-motion preferences without removing status or focus feedback.",
|
|
313
|
+
"appliesTo": [
|
|
314
|
+
"interactive component",
|
|
315
|
+
"animated component",
|
|
316
|
+
"navigation",
|
|
317
|
+
"form"
|
|
318
|
+
],
|
|
319
|
+
"helpers": [
|
|
320
|
+
"semantic HTML",
|
|
321
|
+
"motion tokens",
|
|
322
|
+
"live region"
|
|
323
|
+
],
|
|
324
|
+
"evidence": [
|
|
325
|
+
"accessibility-test",
|
|
326
|
+
"browser-test",
|
|
327
|
+
"manual-screen-reader-test",
|
|
328
|
+
"review-check"
|
|
329
|
+
]
|
|
330
|
+
},
|
|
331
|
+
"IC-015": {
|
|
332
|
+
"version": 2,
|
|
333
|
+
"id": "IC-015",
|
|
334
|
+
"slug": "content-and-direction",
|
|
335
|
+
"title": "Support content expansion and direction",
|
|
336
|
+
"requirement": "Components keep actions and content usable with long translated text, unbroken values, narrow widths, and right-to-left document direction.",
|
|
337
|
+
"appliesTo": [
|
|
338
|
+
"text content",
|
|
339
|
+
"localized label",
|
|
340
|
+
"URL",
|
|
341
|
+
"right-to-left locale"
|
|
342
|
+
],
|
|
343
|
+
"helpers": [
|
|
344
|
+
"logical layout utilities",
|
|
345
|
+
"showcase state matrix"
|
|
346
|
+
],
|
|
347
|
+
"evidence": [
|
|
348
|
+
"contract-test",
|
|
349
|
+
"browser-test",
|
|
350
|
+
"visual-test",
|
|
351
|
+
"review-check"
|
|
352
|
+
]
|
|
353
|
+
},
|
|
354
|
+
"IC-016": {
|
|
355
|
+
"version": 2,
|
|
356
|
+
"id": "IC-016",
|
|
357
|
+
"slug": "dataset-boundaries",
|
|
358
|
+
"title": "Define dataset boundaries",
|
|
359
|
+
"requirement": "A data component states its client-side row limit and uses server pagination beyond that limit while keeping query, memory, and pagination behavior bounded.",
|
|
360
|
+
"appliesTo": [
|
|
361
|
+
"table",
|
|
362
|
+
"list",
|
|
363
|
+
"search",
|
|
364
|
+
"select",
|
|
365
|
+
"activity feed"
|
|
366
|
+
],
|
|
367
|
+
"helpers": [
|
|
368
|
+
"data-table",
|
|
369
|
+
"livewire-data-table"
|
|
370
|
+
],
|
|
371
|
+
"evidence": [
|
|
372
|
+
"feature-test",
|
|
373
|
+
"performance-test",
|
|
374
|
+
"browser-test",
|
|
375
|
+
"review-check"
|
|
376
|
+
]
|
|
377
|
+
}
|
|
378
|
+
};
|
|
379
|
+
export const visualPatternContracts = {
|
|
380
|
+
"VC-001": {
|
|
381
|
+
"version": 1,
|
|
382
|
+
"id": "VC-001",
|
|
383
|
+
"pattern": "application-shell",
|
|
384
|
+
"title": "Application shell",
|
|
385
|
+
"required": [
|
|
386
|
+
"desktop sidebar",
|
|
387
|
+
"top bar",
|
|
388
|
+
"content outlet"
|
|
389
|
+
],
|
|
390
|
+
"states": [
|
|
391
|
+
"sidebar collapsed",
|
|
392
|
+
"mobile navigation open"
|
|
393
|
+
],
|
|
394
|
+
"responsive": {
|
|
395
|
+
"mobile": "Use a disclosed navigation surface and one scrollable content column.",
|
|
396
|
+
"desktop": "Keep persistent navigation, global actions, and the content outlet in a stable frame."
|
|
397
|
+
},
|
|
398
|
+
"interactionContractIds": [
|
|
399
|
+
"IC-003",
|
|
400
|
+
"IC-007"
|
|
401
|
+
],
|
|
402
|
+
"accessibility": {
|
|
403
|
+
"wcagTarget": "WCAG 2.2 AA",
|
|
404
|
+
"keyboardFlow": [
|
|
405
|
+
"Reach the skip link first.",
|
|
406
|
+
"Move through global navigation before page actions.",
|
|
407
|
+
"Return focus to the navigation trigger after the mobile surface closes."
|
|
408
|
+
],
|
|
409
|
+
"checks": [
|
|
410
|
+
{
|
|
411
|
+
"criterion": "2.4.7",
|
|
412
|
+
"level": "AA",
|
|
413
|
+
"name": "Focus Visible",
|
|
414
|
+
"applicability": "required",
|
|
415
|
+
"requirement": "Every keyboard focus indicator is visible."
|
|
416
|
+
},
|
|
417
|
+
{
|
|
418
|
+
"criterion": "2.4.11",
|
|
419
|
+
"level": "AA",
|
|
420
|
+
"name": "Focus Not Obscured (Minimum)",
|
|
421
|
+
"applicability": "required",
|
|
422
|
+
"requirement": "Sticky and overlay content does not fully hide the focused control."
|
|
423
|
+
},
|
|
424
|
+
{
|
|
425
|
+
"criterion": "2.4.13",
|
|
426
|
+
"level": "AAA",
|
|
427
|
+
"name": "Focus Appearance",
|
|
428
|
+
"applicability": "advisory",
|
|
429
|
+
"requirement": "Prefer a focus indicator that also meets the WCAG 2.2 AAA area and contrast measure."
|
|
430
|
+
},
|
|
431
|
+
{
|
|
432
|
+
"criterion": "2.5.7",
|
|
433
|
+
"level": "AA",
|
|
434
|
+
"name": "Dragging Movements",
|
|
435
|
+
"applicability": "when-present",
|
|
436
|
+
"requirement": "Every drag interaction has a non-dragging pointer and keyboard alternative."
|
|
437
|
+
},
|
|
438
|
+
{
|
|
439
|
+
"criterion": "2.5.8",
|
|
440
|
+
"level": "AA",
|
|
441
|
+
"name": "Target Size (Minimum)",
|
|
442
|
+
"applicability": "required",
|
|
443
|
+
"requirement": "Targets meet the 24 by 24 CSS pixel minimum or the spacing exception."
|
|
444
|
+
},
|
|
445
|
+
{
|
|
446
|
+
"criterion": "3.2.6",
|
|
447
|
+
"level": "A",
|
|
448
|
+
"name": "Consistent Help",
|
|
449
|
+
"applicability": "when-present",
|
|
450
|
+
"requirement": "Repeated help controls stay in the same relative order."
|
|
451
|
+
},
|
|
452
|
+
{
|
|
453
|
+
"criterion": "3.3.8",
|
|
454
|
+
"level": "AA",
|
|
455
|
+
"name": "Accessible Authentication (Minimum)",
|
|
456
|
+
"applicability": "when-authentication-present",
|
|
457
|
+
"requirement": "Authentication does not require a cognitive function test unless an accessible alternative or support mechanism is available."
|
|
458
|
+
}
|
|
459
|
+
]
|
|
460
|
+
}
|
|
461
|
+
},
|
|
462
|
+
"VC-002": {
|
|
463
|
+
"version": 1,
|
|
464
|
+
"id": "VC-002",
|
|
465
|
+
"pattern": "navigation",
|
|
466
|
+
"title": "Navigation",
|
|
467
|
+
"required": [
|
|
468
|
+
"desktop sidebar",
|
|
469
|
+
"mobile navigation sheet",
|
|
470
|
+
"breadcrumb"
|
|
471
|
+
],
|
|
472
|
+
"states": [
|
|
473
|
+
"mobile navigation open"
|
|
474
|
+
],
|
|
475
|
+
"responsive": {
|
|
476
|
+
"mobile": "Replace persistent navigation with a labelled disclosure or sheet.",
|
|
477
|
+
"desktop": "Expose the current location in persistent navigation."
|
|
478
|
+
},
|
|
479
|
+
"interactionContractIds": [
|
|
480
|
+
"IC-003",
|
|
481
|
+
"IC-007"
|
|
482
|
+
],
|
|
483
|
+
"accessibility": {
|
|
484
|
+
"wcagTarget": "WCAG 2.2 AA",
|
|
485
|
+
"keyboardFlow": [
|
|
486
|
+
"Use native links for destinations.",
|
|
487
|
+
"Expose the current destination without relying on color.",
|
|
488
|
+
"Restore focus after a disclosed navigation surface closes."
|
|
489
|
+
],
|
|
490
|
+
"checks": [
|
|
491
|
+
{
|
|
492
|
+
"criterion": "2.4.7",
|
|
493
|
+
"level": "AA",
|
|
494
|
+
"name": "Focus Visible",
|
|
495
|
+
"applicability": "required",
|
|
496
|
+
"requirement": "Every keyboard focus indicator is visible."
|
|
497
|
+
},
|
|
498
|
+
{
|
|
499
|
+
"criterion": "2.4.11",
|
|
500
|
+
"level": "AA",
|
|
501
|
+
"name": "Focus Not Obscured (Minimum)",
|
|
502
|
+
"applicability": "required",
|
|
503
|
+
"requirement": "Sticky and overlay content does not fully hide the focused control."
|
|
504
|
+
},
|
|
505
|
+
{
|
|
506
|
+
"criterion": "2.4.13",
|
|
507
|
+
"level": "AAA",
|
|
508
|
+
"name": "Focus Appearance",
|
|
509
|
+
"applicability": "advisory",
|
|
510
|
+
"requirement": "Prefer a focus indicator that also meets the WCAG 2.2 AAA area and contrast measure."
|
|
511
|
+
},
|
|
512
|
+
{
|
|
513
|
+
"criterion": "2.5.7",
|
|
514
|
+
"level": "AA",
|
|
515
|
+
"name": "Dragging Movements",
|
|
516
|
+
"applicability": "when-present",
|
|
517
|
+
"requirement": "Every drag interaction has a non-dragging pointer and keyboard alternative."
|
|
518
|
+
},
|
|
519
|
+
{
|
|
520
|
+
"criterion": "2.5.8",
|
|
521
|
+
"level": "AA",
|
|
522
|
+
"name": "Target Size (Minimum)",
|
|
523
|
+
"applicability": "required",
|
|
524
|
+
"requirement": "Targets meet the 24 by 24 CSS pixel minimum or the spacing exception."
|
|
525
|
+
},
|
|
526
|
+
{
|
|
527
|
+
"criterion": "3.2.6",
|
|
528
|
+
"level": "A",
|
|
529
|
+
"name": "Consistent Help",
|
|
530
|
+
"applicability": "when-present",
|
|
531
|
+
"requirement": "Repeated help controls stay in the same relative order."
|
|
532
|
+
},
|
|
533
|
+
{
|
|
534
|
+
"criterion": "3.3.8",
|
|
535
|
+
"level": "AA",
|
|
536
|
+
"name": "Accessible Authentication (Minimum)",
|
|
537
|
+
"applicability": "when-authentication-present",
|
|
538
|
+
"requirement": "Authentication does not require a cognitive function test unless an accessible alternative or support mechanism is available."
|
|
539
|
+
}
|
|
540
|
+
]
|
|
541
|
+
}
|
|
542
|
+
},
|
|
543
|
+
"VC-003": {
|
|
544
|
+
"version": 1,
|
|
545
|
+
"id": "VC-003",
|
|
546
|
+
"pattern": "page-header",
|
|
547
|
+
"title": "Page header",
|
|
548
|
+
"required": [
|
|
549
|
+
"heading",
|
|
550
|
+
"query-controls",
|
|
551
|
+
"primary-action"
|
|
552
|
+
],
|
|
553
|
+
"states": [
|
|
554
|
+
"unfiltered",
|
|
555
|
+
"filtered"
|
|
556
|
+
],
|
|
557
|
+
"responsive": {
|
|
558
|
+
"mobile": "Stack context, controls, and the primary action in reading order.",
|
|
559
|
+
"desktop": "Keep context and the primary action visually distinct in one header region."
|
|
560
|
+
},
|
|
561
|
+
"interactionContractIds": [
|
|
562
|
+
"IC-002",
|
|
563
|
+
"IC-007"
|
|
564
|
+
],
|
|
565
|
+
"accessibility": {
|
|
566
|
+
"wcagTarget": "WCAG 2.2 AA",
|
|
567
|
+
"keyboardFlow": [
|
|
568
|
+
"Reach the page heading before page controls.",
|
|
569
|
+
"Keep the primary action after its explanatory context."
|
|
570
|
+
],
|
|
571
|
+
"checks": [
|
|
572
|
+
{
|
|
573
|
+
"criterion": "2.4.7",
|
|
574
|
+
"level": "AA",
|
|
575
|
+
"name": "Focus Visible",
|
|
576
|
+
"applicability": "required",
|
|
577
|
+
"requirement": "Every keyboard focus indicator is visible."
|
|
578
|
+
},
|
|
579
|
+
{
|
|
580
|
+
"criterion": "2.4.11",
|
|
581
|
+
"level": "AA",
|
|
582
|
+
"name": "Focus Not Obscured (Minimum)",
|
|
583
|
+
"applicability": "required",
|
|
584
|
+
"requirement": "Sticky and overlay content does not fully hide the focused control."
|
|
585
|
+
},
|
|
586
|
+
{
|
|
587
|
+
"criterion": "2.4.13",
|
|
588
|
+
"level": "AAA",
|
|
589
|
+
"name": "Focus Appearance",
|
|
590
|
+
"applicability": "advisory",
|
|
591
|
+
"requirement": "Prefer a focus indicator that also meets the WCAG 2.2 AAA area and contrast measure."
|
|
592
|
+
},
|
|
593
|
+
{
|
|
594
|
+
"criterion": "2.5.7",
|
|
595
|
+
"level": "AA",
|
|
596
|
+
"name": "Dragging Movements",
|
|
597
|
+
"applicability": "when-present",
|
|
598
|
+
"requirement": "Every drag interaction has a non-dragging pointer and keyboard alternative."
|
|
599
|
+
},
|
|
600
|
+
{
|
|
601
|
+
"criterion": "2.5.8",
|
|
602
|
+
"level": "AA",
|
|
603
|
+
"name": "Target Size (Minimum)",
|
|
604
|
+
"applicability": "required",
|
|
605
|
+
"requirement": "Targets meet the 24 by 24 CSS pixel minimum or the spacing exception."
|
|
606
|
+
},
|
|
607
|
+
{
|
|
608
|
+
"criterion": "3.2.6",
|
|
609
|
+
"level": "A",
|
|
610
|
+
"name": "Consistent Help",
|
|
611
|
+
"applicability": "when-present",
|
|
612
|
+
"requirement": "Repeated help controls stay in the same relative order."
|
|
613
|
+
},
|
|
614
|
+
{
|
|
615
|
+
"criterion": "3.3.8",
|
|
616
|
+
"level": "AA",
|
|
617
|
+
"name": "Accessible Authentication (Minimum)",
|
|
618
|
+
"applicability": "when-authentication-present",
|
|
619
|
+
"requirement": "Authentication does not require a cognitive function test unless an accessible alternative or support mechanism is available."
|
|
620
|
+
}
|
|
621
|
+
]
|
|
622
|
+
}
|
|
623
|
+
},
|
|
624
|
+
"VC-004": {
|
|
625
|
+
"version": 1,
|
|
626
|
+
"id": "VC-004",
|
|
627
|
+
"pattern": "form",
|
|
628
|
+
"title": "Form",
|
|
629
|
+
"required": [
|
|
630
|
+
"heading",
|
|
631
|
+
"fields",
|
|
632
|
+
"form-actions"
|
|
633
|
+
],
|
|
634
|
+
"states": [
|
|
635
|
+
"submitting",
|
|
636
|
+
"validation-error",
|
|
637
|
+
"success"
|
|
638
|
+
],
|
|
639
|
+
"responsive": {
|
|
640
|
+
"mobile": "Use one field column and keep actions in source order.",
|
|
641
|
+
"desktop": "Use multiple columns only when field relationships stay clear."
|
|
642
|
+
},
|
|
643
|
+
"interactionContractIds": [
|
|
644
|
+
"IC-002",
|
|
645
|
+
"IC-004",
|
|
646
|
+
"IC-008"
|
|
647
|
+
],
|
|
648
|
+
"accessibility": {
|
|
649
|
+
"wcagTarget": "WCAG 2.2 AA",
|
|
650
|
+
"keyboardFlow": [
|
|
651
|
+
"Move from the form heading to the error summary and then to fields.",
|
|
652
|
+
"Associate every error with its control.",
|
|
653
|
+
"Keep submit feedback announced and focusable."
|
|
654
|
+
],
|
|
655
|
+
"checks": [
|
|
656
|
+
{
|
|
657
|
+
"criterion": "2.4.7",
|
|
658
|
+
"level": "AA",
|
|
659
|
+
"name": "Focus Visible",
|
|
660
|
+
"applicability": "required",
|
|
661
|
+
"requirement": "Every keyboard focus indicator is visible."
|
|
662
|
+
},
|
|
663
|
+
{
|
|
664
|
+
"criterion": "2.4.11",
|
|
665
|
+
"level": "AA",
|
|
666
|
+
"name": "Focus Not Obscured (Minimum)",
|
|
667
|
+
"applicability": "required",
|
|
668
|
+
"requirement": "Sticky and overlay content does not fully hide the focused control."
|
|
669
|
+
},
|
|
670
|
+
{
|
|
671
|
+
"criterion": "2.4.13",
|
|
672
|
+
"level": "AAA",
|
|
673
|
+
"name": "Focus Appearance",
|
|
674
|
+
"applicability": "advisory",
|
|
675
|
+
"requirement": "Prefer a focus indicator that also meets the WCAG 2.2 AAA area and contrast measure."
|
|
676
|
+
},
|
|
677
|
+
{
|
|
678
|
+
"criterion": "2.5.7",
|
|
679
|
+
"level": "AA",
|
|
680
|
+
"name": "Dragging Movements",
|
|
681
|
+
"applicability": "when-present",
|
|
682
|
+
"requirement": "Every drag interaction has a non-dragging pointer and keyboard alternative."
|
|
683
|
+
},
|
|
684
|
+
{
|
|
685
|
+
"criterion": "2.5.8",
|
|
686
|
+
"level": "AA",
|
|
687
|
+
"name": "Target Size (Minimum)",
|
|
688
|
+
"applicability": "required",
|
|
689
|
+
"requirement": "Targets meet the 24 by 24 CSS pixel minimum or the spacing exception."
|
|
690
|
+
},
|
|
691
|
+
{
|
|
692
|
+
"criterion": "3.2.6",
|
|
693
|
+
"level": "A",
|
|
694
|
+
"name": "Consistent Help",
|
|
695
|
+
"applicability": "when-present",
|
|
696
|
+
"requirement": "Repeated help controls stay in the same relative order."
|
|
697
|
+
},
|
|
698
|
+
{
|
|
699
|
+
"criterion": "3.3.8",
|
|
700
|
+
"level": "AA",
|
|
701
|
+
"name": "Accessible Authentication (Minimum)",
|
|
702
|
+
"applicability": "when-authentication-present",
|
|
703
|
+
"requirement": "Authentication does not require a cognitive function test unless an accessible alternative or support mechanism is available."
|
|
704
|
+
}
|
|
705
|
+
]
|
|
706
|
+
}
|
|
707
|
+
},
|
|
708
|
+
"VC-005": {
|
|
709
|
+
"version": 1,
|
|
710
|
+
"id": "VC-005",
|
|
711
|
+
"pattern": "table",
|
|
712
|
+
"title": "Table",
|
|
713
|
+
"required": [
|
|
714
|
+
"query-toolbar",
|
|
715
|
+
"data-table",
|
|
716
|
+
"pagination"
|
|
717
|
+
],
|
|
718
|
+
"states": [
|
|
719
|
+
"populated",
|
|
720
|
+
"empty",
|
|
721
|
+
"selected"
|
|
722
|
+
],
|
|
723
|
+
"responsive": {
|
|
724
|
+
"mobile": "Keep header and cell relationships intact in a labelled scroll region.",
|
|
725
|
+
"desktop": "Keep query, selection, table, and pagination controls in a predictable order."
|
|
726
|
+
},
|
|
727
|
+
"interactionContractIds": [
|
|
728
|
+
"IC-001",
|
|
729
|
+
"IC-002",
|
|
730
|
+
"IC-006",
|
|
731
|
+
"IC-007"
|
|
732
|
+
],
|
|
733
|
+
"accessibility": {
|
|
734
|
+
"wcagTarget": "WCAG 2.2 AA",
|
|
735
|
+
"keyboardFlow": [
|
|
736
|
+
"Reach query controls before table content.",
|
|
737
|
+
"Keep row actions keyboard operable.",
|
|
738
|
+
"Announce loading, empty, and selection changes."
|
|
739
|
+
],
|
|
740
|
+
"checks": [
|
|
741
|
+
{
|
|
742
|
+
"criterion": "2.4.7",
|
|
743
|
+
"level": "AA",
|
|
744
|
+
"name": "Focus Visible",
|
|
745
|
+
"applicability": "required",
|
|
746
|
+
"requirement": "Every keyboard focus indicator is visible."
|
|
747
|
+
},
|
|
748
|
+
{
|
|
749
|
+
"criterion": "2.4.11",
|
|
750
|
+
"level": "AA",
|
|
751
|
+
"name": "Focus Not Obscured (Minimum)",
|
|
752
|
+
"applicability": "required",
|
|
753
|
+
"requirement": "Sticky and overlay content does not fully hide the focused control."
|
|
754
|
+
},
|
|
755
|
+
{
|
|
756
|
+
"criterion": "2.4.13",
|
|
757
|
+
"level": "AAA",
|
|
758
|
+
"name": "Focus Appearance",
|
|
759
|
+
"applicability": "advisory",
|
|
760
|
+
"requirement": "Prefer a focus indicator that also meets the WCAG 2.2 AAA area and contrast measure."
|
|
761
|
+
},
|
|
762
|
+
{
|
|
763
|
+
"criterion": "2.5.7",
|
|
764
|
+
"level": "AA",
|
|
765
|
+
"name": "Dragging Movements",
|
|
766
|
+
"applicability": "when-present",
|
|
767
|
+
"requirement": "Every drag interaction has a non-dragging pointer and keyboard alternative."
|
|
768
|
+
},
|
|
769
|
+
{
|
|
770
|
+
"criterion": "2.5.8",
|
|
771
|
+
"level": "AA",
|
|
772
|
+
"name": "Target Size (Minimum)",
|
|
773
|
+
"applicability": "required",
|
|
774
|
+
"requirement": "Targets meet the 24 by 24 CSS pixel minimum or the spacing exception."
|
|
775
|
+
},
|
|
776
|
+
{
|
|
777
|
+
"criterion": "3.2.6",
|
|
778
|
+
"level": "A",
|
|
779
|
+
"name": "Consistent Help",
|
|
780
|
+
"applicability": "when-present",
|
|
781
|
+
"requirement": "Repeated help controls stay in the same relative order."
|
|
782
|
+
},
|
|
783
|
+
{
|
|
784
|
+
"criterion": "3.3.8",
|
|
785
|
+
"level": "AA",
|
|
786
|
+
"name": "Accessible Authentication (Minimum)",
|
|
787
|
+
"applicability": "when-authentication-present",
|
|
788
|
+
"requirement": "Authentication does not require a cognitive function test unless an accessible alternative or support mechanism is available."
|
|
789
|
+
}
|
|
790
|
+
]
|
|
791
|
+
}
|
|
792
|
+
},
|
|
793
|
+
"VC-006": {
|
|
794
|
+
"version": 1,
|
|
795
|
+
"id": "VC-006",
|
|
796
|
+
"pattern": "detail-page",
|
|
797
|
+
"title": "Detail page",
|
|
798
|
+
"required": [
|
|
799
|
+
"breadcrumb",
|
|
800
|
+
"page-header",
|
|
801
|
+
"overview",
|
|
802
|
+
"related-content"
|
|
803
|
+
],
|
|
804
|
+
"states": [
|
|
805
|
+
"populated",
|
|
806
|
+
"empty-activity"
|
|
807
|
+
],
|
|
808
|
+
"responsive": {
|
|
809
|
+
"mobile": "Use one reading column and keep key actions near the heading.",
|
|
810
|
+
"desktop": "Separate primary details from related and historical content."
|
|
811
|
+
},
|
|
812
|
+
"interactionContractIds": [
|
|
813
|
+
"IC-001",
|
|
814
|
+
"IC-002",
|
|
815
|
+
"IC-007"
|
|
816
|
+
],
|
|
817
|
+
"accessibility": {
|
|
818
|
+
"wcagTarget": "WCAG 2.2 AA",
|
|
819
|
+
"keyboardFlow": [
|
|
820
|
+
"Reach the breadcrumb and page heading before record actions.",
|
|
821
|
+
"Keep related content after the primary record details."
|
|
822
|
+
],
|
|
823
|
+
"checks": [
|
|
824
|
+
{
|
|
825
|
+
"criterion": "2.4.7",
|
|
826
|
+
"level": "AA",
|
|
827
|
+
"name": "Focus Visible",
|
|
828
|
+
"applicability": "required",
|
|
829
|
+
"requirement": "Every keyboard focus indicator is visible."
|
|
830
|
+
},
|
|
831
|
+
{
|
|
832
|
+
"criterion": "2.4.11",
|
|
833
|
+
"level": "AA",
|
|
834
|
+
"name": "Focus Not Obscured (Minimum)",
|
|
835
|
+
"applicability": "required",
|
|
836
|
+
"requirement": "Sticky and overlay content does not fully hide the focused control."
|
|
837
|
+
},
|
|
838
|
+
{
|
|
839
|
+
"criterion": "2.4.13",
|
|
840
|
+
"level": "AAA",
|
|
841
|
+
"name": "Focus Appearance",
|
|
842
|
+
"applicability": "advisory",
|
|
843
|
+
"requirement": "Prefer a focus indicator that also meets the WCAG 2.2 AAA area and contrast measure."
|
|
844
|
+
},
|
|
845
|
+
{
|
|
846
|
+
"criterion": "2.5.7",
|
|
847
|
+
"level": "AA",
|
|
848
|
+
"name": "Dragging Movements",
|
|
849
|
+
"applicability": "when-present",
|
|
850
|
+
"requirement": "Every drag interaction has a non-dragging pointer and keyboard alternative."
|
|
851
|
+
},
|
|
852
|
+
{
|
|
853
|
+
"criterion": "2.5.8",
|
|
854
|
+
"level": "AA",
|
|
855
|
+
"name": "Target Size (Minimum)",
|
|
856
|
+
"applicability": "required",
|
|
857
|
+
"requirement": "Targets meet the 24 by 24 CSS pixel minimum or the spacing exception."
|
|
858
|
+
},
|
|
859
|
+
{
|
|
860
|
+
"criterion": "3.2.6",
|
|
861
|
+
"level": "A",
|
|
862
|
+
"name": "Consistent Help",
|
|
863
|
+
"applicability": "when-present",
|
|
864
|
+
"requirement": "Repeated help controls stay in the same relative order."
|
|
865
|
+
},
|
|
866
|
+
{
|
|
867
|
+
"criterion": "3.3.8",
|
|
868
|
+
"level": "AA",
|
|
869
|
+
"name": "Accessible Authentication (Minimum)",
|
|
870
|
+
"applicability": "when-authentication-present",
|
|
871
|
+
"requirement": "Authentication does not require a cognitive function test unless an accessible alternative or support mechanism is available."
|
|
872
|
+
}
|
|
873
|
+
]
|
|
874
|
+
}
|
|
875
|
+
},
|
|
876
|
+
"VC-007": {
|
|
877
|
+
"version": 1,
|
|
878
|
+
"id": "VC-007",
|
|
879
|
+
"pattern": "dashboard",
|
|
880
|
+
"title": "Dashboard",
|
|
881
|
+
"required": [
|
|
882
|
+
"welcome header",
|
|
883
|
+
"quick actions",
|
|
884
|
+
"KPI grid",
|
|
885
|
+
"sales chart",
|
|
886
|
+
"recent invoices table"
|
|
887
|
+
],
|
|
888
|
+
"states": [
|
|
889
|
+
"default",
|
|
890
|
+
"empty metrics",
|
|
891
|
+
"loading chart",
|
|
892
|
+
"empty invoices"
|
|
893
|
+
],
|
|
894
|
+
"responsive": {
|
|
895
|
+
"mobile": "Stack summary, actions, charts, and tables in task order.",
|
|
896
|
+
"desktop": "Use a stable grid without changing the semantic reading order."
|
|
897
|
+
},
|
|
898
|
+
"interactionContractIds": [
|
|
899
|
+
"IC-002",
|
|
900
|
+
"IC-006",
|
|
901
|
+
"IC-007"
|
|
902
|
+
],
|
|
903
|
+
"accessibility": {
|
|
904
|
+
"wcagTarget": "WCAG 2.2 AA",
|
|
905
|
+
"keyboardFlow": [
|
|
906
|
+
"Reach the page summary before quick actions.",
|
|
907
|
+
"Provide a text equivalent for every chart.",
|
|
908
|
+
"Keep table controls next to their table."
|
|
909
|
+
],
|
|
910
|
+
"checks": [
|
|
911
|
+
{
|
|
912
|
+
"criterion": "2.4.7",
|
|
913
|
+
"level": "AA",
|
|
914
|
+
"name": "Focus Visible",
|
|
915
|
+
"applicability": "required",
|
|
916
|
+
"requirement": "Every keyboard focus indicator is visible."
|
|
917
|
+
},
|
|
918
|
+
{
|
|
919
|
+
"criterion": "2.4.11",
|
|
920
|
+
"level": "AA",
|
|
921
|
+
"name": "Focus Not Obscured (Minimum)",
|
|
922
|
+
"applicability": "required",
|
|
923
|
+
"requirement": "Sticky and overlay content does not fully hide the focused control."
|
|
924
|
+
},
|
|
925
|
+
{
|
|
926
|
+
"criterion": "2.4.13",
|
|
927
|
+
"level": "AAA",
|
|
928
|
+
"name": "Focus Appearance",
|
|
929
|
+
"applicability": "advisory",
|
|
930
|
+
"requirement": "Prefer a focus indicator that also meets the WCAG 2.2 AAA area and contrast measure."
|
|
931
|
+
},
|
|
932
|
+
{
|
|
933
|
+
"criterion": "2.5.7",
|
|
934
|
+
"level": "AA",
|
|
935
|
+
"name": "Dragging Movements",
|
|
936
|
+
"applicability": "when-present",
|
|
937
|
+
"requirement": "Every drag interaction has a non-dragging pointer and keyboard alternative."
|
|
938
|
+
},
|
|
939
|
+
{
|
|
940
|
+
"criterion": "2.5.8",
|
|
941
|
+
"level": "AA",
|
|
942
|
+
"name": "Target Size (Minimum)",
|
|
943
|
+
"applicability": "required",
|
|
944
|
+
"requirement": "Targets meet the 24 by 24 CSS pixel minimum or the spacing exception."
|
|
945
|
+
},
|
|
946
|
+
{
|
|
947
|
+
"criterion": "3.2.6",
|
|
948
|
+
"level": "A",
|
|
949
|
+
"name": "Consistent Help",
|
|
950
|
+
"applicability": "when-present",
|
|
951
|
+
"requirement": "Repeated help controls stay in the same relative order."
|
|
952
|
+
},
|
|
953
|
+
{
|
|
954
|
+
"criterion": "3.3.8",
|
|
955
|
+
"level": "AA",
|
|
956
|
+
"name": "Accessible Authentication (Minimum)",
|
|
957
|
+
"applicability": "when-authentication-present",
|
|
958
|
+
"requirement": "Authentication does not require a cognitive function test unless an accessible alternative or support mechanism is available."
|
|
959
|
+
}
|
|
960
|
+
]
|
|
961
|
+
}
|
|
962
|
+
},
|
|
963
|
+
"VC-008": {
|
|
964
|
+
"version": 1,
|
|
965
|
+
"id": "VC-008",
|
|
966
|
+
"pattern": "notifications",
|
|
967
|
+
"title": "Notifications",
|
|
968
|
+
"required": [
|
|
969
|
+
"filters",
|
|
970
|
+
"notification-list",
|
|
971
|
+
"pagination"
|
|
972
|
+
],
|
|
973
|
+
"states": [
|
|
974
|
+
"populated",
|
|
975
|
+
"empty",
|
|
976
|
+
"unread-filter"
|
|
977
|
+
],
|
|
978
|
+
"responsive": {
|
|
979
|
+
"mobile": "Stack filters and keep each notification action next to its message.",
|
|
980
|
+
"desktop": "Keep filters, status, messages, and actions in a stable reading order."
|
|
981
|
+
},
|
|
982
|
+
"interactionContractIds": [
|
|
983
|
+
"IC-002",
|
|
984
|
+
"IC-005",
|
|
985
|
+
"IC-007"
|
|
986
|
+
],
|
|
987
|
+
"accessibility": {
|
|
988
|
+
"wcagTarget": "WCAG 2.2 AA",
|
|
989
|
+
"keyboardFlow": [
|
|
990
|
+
"Reach filters before messages.",
|
|
991
|
+
"Announce unread and read-state changes.",
|
|
992
|
+
"Keep dismissal and destination actions independently named."
|
|
993
|
+
],
|
|
994
|
+
"checks": [
|
|
995
|
+
{
|
|
996
|
+
"criterion": "2.4.7",
|
|
997
|
+
"level": "AA",
|
|
998
|
+
"name": "Focus Visible",
|
|
999
|
+
"applicability": "required",
|
|
1000
|
+
"requirement": "Every keyboard focus indicator is visible."
|
|
1001
|
+
},
|
|
1002
|
+
{
|
|
1003
|
+
"criterion": "2.4.11",
|
|
1004
|
+
"level": "AA",
|
|
1005
|
+
"name": "Focus Not Obscured (Minimum)",
|
|
1006
|
+
"applicability": "required",
|
|
1007
|
+
"requirement": "Sticky and overlay content does not fully hide the focused control."
|
|
1008
|
+
},
|
|
1009
|
+
{
|
|
1010
|
+
"criterion": "2.4.13",
|
|
1011
|
+
"level": "AAA",
|
|
1012
|
+
"name": "Focus Appearance",
|
|
1013
|
+
"applicability": "advisory",
|
|
1014
|
+
"requirement": "Prefer a focus indicator that also meets the WCAG 2.2 AAA area and contrast measure."
|
|
1015
|
+
},
|
|
1016
|
+
{
|
|
1017
|
+
"criterion": "2.5.7",
|
|
1018
|
+
"level": "AA",
|
|
1019
|
+
"name": "Dragging Movements",
|
|
1020
|
+
"applicability": "when-present",
|
|
1021
|
+
"requirement": "Every drag interaction has a non-dragging pointer and keyboard alternative."
|
|
1022
|
+
},
|
|
1023
|
+
{
|
|
1024
|
+
"criterion": "2.5.8",
|
|
1025
|
+
"level": "AA",
|
|
1026
|
+
"name": "Target Size (Minimum)",
|
|
1027
|
+
"applicability": "required",
|
|
1028
|
+
"requirement": "Targets meet the 24 by 24 CSS pixel minimum or the spacing exception."
|
|
1029
|
+
},
|
|
1030
|
+
{
|
|
1031
|
+
"criterion": "3.2.6",
|
|
1032
|
+
"level": "A",
|
|
1033
|
+
"name": "Consistent Help",
|
|
1034
|
+
"applicability": "when-present",
|
|
1035
|
+
"requirement": "Repeated help controls stay in the same relative order."
|
|
1036
|
+
},
|
|
1037
|
+
{
|
|
1038
|
+
"criterion": "3.3.8",
|
|
1039
|
+
"level": "AA",
|
|
1040
|
+
"name": "Accessible Authentication (Minimum)",
|
|
1041
|
+
"applicability": "when-authentication-present",
|
|
1042
|
+
"requirement": "Authentication does not require a cognitive function test unless an accessible alternative or support mechanism is available."
|
|
1043
|
+
}
|
|
1044
|
+
]
|
|
1045
|
+
}
|
|
1046
|
+
},
|
|
1047
|
+
"VC-009": {
|
|
1048
|
+
"version": 1,
|
|
1049
|
+
"id": "VC-009",
|
|
1050
|
+
"pattern": "empty-error-states",
|
|
1051
|
+
"title": "Empty and error states",
|
|
1052
|
+
"required": [
|
|
1053
|
+
"state-heading",
|
|
1054
|
+
"state-body",
|
|
1055
|
+
"recovery-action",
|
|
1056
|
+
"ready-content"
|
|
1057
|
+
],
|
|
1058
|
+
"states": [
|
|
1059
|
+
"loading",
|
|
1060
|
+
"empty",
|
|
1061
|
+
"error",
|
|
1062
|
+
"ready"
|
|
1063
|
+
],
|
|
1064
|
+
"responsive": {
|
|
1065
|
+
"mobile": "Keep the state message and recovery action in one narrow column.",
|
|
1066
|
+
"desktop": "Keep state feedback close to the content region that it replaces."
|
|
1067
|
+
},
|
|
1068
|
+
"interactionContractIds": [
|
|
1069
|
+
"IC-002",
|
|
1070
|
+
"IC-007"
|
|
1071
|
+
],
|
|
1072
|
+
"accessibility": {
|
|
1073
|
+
"wcagTarget": "WCAG 2.2 AA",
|
|
1074
|
+
"keyboardFlow": [
|
|
1075
|
+
"Announce state changes without an unexpected focus move.",
|
|
1076
|
+
"Place the recovery action after the error explanation."
|
|
1077
|
+
],
|
|
1078
|
+
"checks": [
|
|
1079
|
+
{
|
|
1080
|
+
"criterion": "2.4.7",
|
|
1081
|
+
"level": "AA",
|
|
1082
|
+
"name": "Focus Visible",
|
|
1083
|
+
"applicability": "required",
|
|
1084
|
+
"requirement": "Every keyboard focus indicator is visible."
|
|
1085
|
+
},
|
|
1086
|
+
{
|
|
1087
|
+
"criterion": "2.4.11",
|
|
1088
|
+
"level": "AA",
|
|
1089
|
+
"name": "Focus Not Obscured (Minimum)",
|
|
1090
|
+
"applicability": "required",
|
|
1091
|
+
"requirement": "Sticky and overlay content does not fully hide the focused control."
|
|
1092
|
+
},
|
|
1093
|
+
{
|
|
1094
|
+
"criterion": "2.4.13",
|
|
1095
|
+
"level": "AAA",
|
|
1096
|
+
"name": "Focus Appearance",
|
|
1097
|
+
"applicability": "advisory",
|
|
1098
|
+
"requirement": "Prefer a focus indicator that also meets the WCAG 2.2 AAA area and contrast measure."
|
|
1099
|
+
},
|
|
1100
|
+
{
|
|
1101
|
+
"criterion": "2.5.7",
|
|
1102
|
+
"level": "AA",
|
|
1103
|
+
"name": "Dragging Movements",
|
|
1104
|
+
"applicability": "when-present",
|
|
1105
|
+
"requirement": "Every drag interaction has a non-dragging pointer and keyboard alternative."
|
|
1106
|
+
},
|
|
1107
|
+
{
|
|
1108
|
+
"criterion": "2.5.8",
|
|
1109
|
+
"level": "AA",
|
|
1110
|
+
"name": "Target Size (Minimum)",
|
|
1111
|
+
"applicability": "required",
|
|
1112
|
+
"requirement": "Targets meet the 24 by 24 CSS pixel minimum or the spacing exception."
|
|
1113
|
+
},
|
|
1114
|
+
{
|
|
1115
|
+
"criterion": "3.2.6",
|
|
1116
|
+
"level": "A",
|
|
1117
|
+
"name": "Consistent Help",
|
|
1118
|
+
"applicability": "when-present",
|
|
1119
|
+
"requirement": "Repeated help controls stay in the same relative order."
|
|
1120
|
+
},
|
|
1121
|
+
{
|
|
1122
|
+
"criterion": "3.3.8",
|
|
1123
|
+
"level": "AA",
|
|
1124
|
+
"name": "Accessible Authentication (Minimum)",
|
|
1125
|
+
"applicability": "when-authentication-present",
|
|
1126
|
+
"requirement": "Authentication does not require a cognitive function test unless an accessible alternative or support mechanism is available."
|
|
1127
|
+
}
|
|
1128
|
+
]
|
|
1129
|
+
}
|
|
1130
|
+
},
|
|
1131
|
+
"VC-010": {
|
|
1132
|
+
"version": 1,
|
|
1133
|
+
"id": "VC-010",
|
|
1134
|
+
"pattern": "settings-page",
|
|
1135
|
+
"title": "Settings page",
|
|
1136
|
+
"required": [
|
|
1137
|
+
"heading",
|
|
1138
|
+
"section-navigation",
|
|
1139
|
+
"feedback",
|
|
1140
|
+
"settings-sections"
|
|
1141
|
+
],
|
|
1142
|
+
"states": [
|
|
1143
|
+
"dirty",
|
|
1144
|
+
"submitting",
|
|
1145
|
+
"validation-error",
|
|
1146
|
+
"success"
|
|
1147
|
+
],
|
|
1148
|
+
"responsive": {
|
|
1149
|
+
"mobile": "Stack section navigation, feedback, and form sections.",
|
|
1150
|
+
"desktop": "Use section navigation beside one readable form column."
|
|
1151
|
+
},
|
|
1152
|
+
"interactionContractIds": [
|
|
1153
|
+
"IC-002",
|
|
1154
|
+
"IC-004",
|
|
1155
|
+
"IC-007",
|
|
1156
|
+
"IC-008"
|
|
1157
|
+
],
|
|
1158
|
+
"accessibility": {
|
|
1159
|
+
"wcagTarget": "WCAG 2.2 AA",
|
|
1160
|
+
"keyboardFlow": [
|
|
1161
|
+
"Reach the page title and section navigation before settings fields.",
|
|
1162
|
+
"Move validation focus to the error summary or first invalid field.",
|
|
1163
|
+
"Announce saved feedback without removing focus."
|
|
1164
|
+
],
|
|
1165
|
+
"checks": [
|
|
1166
|
+
{
|
|
1167
|
+
"criterion": "2.4.7",
|
|
1168
|
+
"level": "AA",
|
|
1169
|
+
"name": "Focus Visible",
|
|
1170
|
+
"applicability": "required",
|
|
1171
|
+
"requirement": "Every keyboard focus indicator is visible."
|
|
1172
|
+
},
|
|
1173
|
+
{
|
|
1174
|
+
"criterion": "2.4.11",
|
|
1175
|
+
"level": "AA",
|
|
1176
|
+
"name": "Focus Not Obscured (Minimum)",
|
|
1177
|
+
"applicability": "required",
|
|
1178
|
+
"requirement": "Sticky and overlay content does not fully hide the focused control."
|
|
1179
|
+
},
|
|
1180
|
+
{
|
|
1181
|
+
"criterion": "2.4.13",
|
|
1182
|
+
"level": "AAA",
|
|
1183
|
+
"name": "Focus Appearance",
|
|
1184
|
+
"applicability": "advisory",
|
|
1185
|
+
"requirement": "Prefer a focus indicator that also meets the WCAG 2.2 AAA area and contrast measure."
|
|
1186
|
+
},
|
|
1187
|
+
{
|
|
1188
|
+
"criterion": "2.5.7",
|
|
1189
|
+
"level": "AA",
|
|
1190
|
+
"name": "Dragging Movements",
|
|
1191
|
+
"applicability": "when-present",
|
|
1192
|
+
"requirement": "Every drag interaction has a non-dragging pointer and keyboard alternative."
|
|
1193
|
+
},
|
|
1194
|
+
{
|
|
1195
|
+
"criterion": "2.5.8",
|
|
1196
|
+
"level": "AA",
|
|
1197
|
+
"name": "Target Size (Minimum)",
|
|
1198
|
+
"applicability": "required",
|
|
1199
|
+
"requirement": "Targets meet the 24 by 24 CSS pixel minimum or the spacing exception."
|
|
1200
|
+
},
|
|
1201
|
+
{
|
|
1202
|
+
"criterion": "3.2.6",
|
|
1203
|
+
"level": "A",
|
|
1204
|
+
"name": "Consistent Help",
|
|
1205
|
+
"applicability": "when-present",
|
|
1206
|
+
"requirement": "Repeated help controls stay in the same relative order."
|
|
1207
|
+
},
|
|
1208
|
+
{
|
|
1209
|
+
"criterion": "3.3.8",
|
|
1210
|
+
"level": "AA",
|
|
1211
|
+
"name": "Accessible Authentication (Minimum)",
|
|
1212
|
+
"applicability": "when-authentication-present",
|
|
1213
|
+
"requirement": "Authentication does not require a cognitive function test unless an accessible alternative or support mechanism is available."
|
|
1214
|
+
}
|
|
1215
|
+
]
|
|
1216
|
+
}
|
|
1217
|
+
}
|
|
1218
|
+
};
|
|
1219
|
+
export const componentSemantics = {
|
|
1220
|
+
"button": {
|
|
1221
|
+
"version": 2,
|
|
1222
|
+
"id": "CS-001",
|
|
1223
|
+
"name": "button",
|
|
1224
|
+
"semanticRole": "action",
|
|
1225
|
+
"purpose": "Start an immediate action or follow a destination with explicit button or link semantics.",
|
|
1226
|
+
"states": [
|
|
1227
|
+
"enabled",
|
|
1228
|
+
"disabled",
|
|
1229
|
+
"loading"
|
|
1230
|
+
],
|
|
1231
|
+
"actions": [
|
|
1232
|
+
"activate"
|
|
1233
|
+
],
|
|
1234
|
+
"interactionContractIds": [
|
|
1235
|
+
"IC-002",
|
|
1236
|
+
"IC-007"
|
|
1237
|
+
],
|
|
1238
|
+
"accessibilityRequirements": [
|
|
1239
|
+
"Expose an accessible name.",
|
|
1240
|
+
"Preserve native activation semantics.",
|
|
1241
|
+
"Expose disabled and busy state without color alone."
|
|
1242
|
+
],
|
|
1243
|
+
"lifecycle": {
|
|
1244
|
+
"status": "stable",
|
|
1245
|
+
"owner": "platform-ui",
|
|
1246
|
+
"introducedIn": "1.0.0",
|
|
1247
|
+
"deprecatedIn": null,
|
|
1248
|
+
"replacementId": null
|
|
1249
|
+
}
|
|
1250
|
+
},
|
|
1251
|
+
"text-input": {
|
|
1252
|
+
"version": 2,
|
|
1253
|
+
"id": "CS-002",
|
|
1254
|
+
"name": "text-input",
|
|
1255
|
+
"semanticRole": "text-entry",
|
|
1256
|
+
"purpose": "Collect one bounded text value with a persistent label and validation relationship.",
|
|
1257
|
+
"states": [
|
|
1258
|
+
"empty",
|
|
1259
|
+
"filled",
|
|
1260
|
+
"disabled",
|
|
1261
|
+
"read-only",
|
|
1262
|
+
"invalid"
|
|
1263
|
+
],
|
|
1264
|
+
"actions": [
|
|
1265
|
+
"focus",
|
|
1266
|
+
"edit",
|
|
1267
|
+
"clear"
|
|
1268
|
+
],
|
|
1269
|
+
"interactionContractIds": [
|
|
1270
|
+
"IC-004",
|
|
1271
|
+
"IC-007"
|
|
1272
|
+
],
|
|
1273
|
+
"accessibilityRequirements": [
|
|
1274
|
+
"Expose a persistent accessible label.",
|
|
1275
|
+
"Associate help and error text with the field.",
|
|
1276
|
+
"Expose invalid, required, disabled, and read-only state programmatically."
|
|
1277
|
+
],
|
|
1278
|
+
"lifecycle": {
|
|
1279
|
+
"status": "stable",
|
|
1280
|
+
"owner": "platform-ui",
|
|
1281
|
+
"introducedIn": "1.0.0",
|
|
1282
|
+
"deprecatedIn": null,
|
|
1283
|
+
"replacementId": null
|
|
1284
|
+
}
|
|
1285
|
+
},
|
|
1286
|
+
"checkbox": {
|
|
1287
|
+
"version": 2,
|
|
1288
|
+
"id": "CS-003",
|
|
1289
|
+
"name": "checkbox",
|
|
1290
|
+
"semanticRole": "independent-selection",
|
|
1291
|
+
"purpose": "Select zero or more independent options or acknowledge one boolean value.",
|
|
1292
|
+
"states": [
|
|
1293
|
+
"unchecked",
|
|
1294
|
+
"checked",
|
|
1295
|
+
"mixed",
|
|
1296
|
+
"disabled",
|
|
1297
|
+
"invalid"
|
|
1298
|
+
],
|
|
1299
|
+
"actions": [
|
|
1300
|
+
"toggle"
|
|
1301
|
+
],
|
|
1302
|
+
"interactionContractIds": [
|
|
1303
|
+
"IC-004",
|
|
1304
|
+
"IC-007"
|
|
1305
|
+
],
|
|
1306
|
+
"accessibilityRequirements": [
|
|
1307
|
+
"Expose checked or mixed state programmatically.",
|
|
1308
|
+
"Keep the label inside the activation target when possible."
|
|
1309
|
+
],
|
|
1310
|
+
"lifecycle": {
|
|
1311
|
+
"status": "stable",
|
|
1312
|
+
"owner": "platform-ui",
|
|
1313
|
+
"introducedIn": "1.0.0",
|
|
1314
|
+
"deprecatedIn": null,
|
|
1315
|
+
"replacementId": null
|
|
1316
|
+
}
|
|
1317
|
+
},
|
|
1318
|
+
"radio-group": {
|
|
1319
|
+
"version": 2,
|
|
1320
|
+
"id": "CS-004",
|
|
1321
|
+
"name": "radio-group",
|
|
1322
|
+
"semanticRole": "exclusive-selection",
|
|
1323
|
+
"purpose": "Choose exactly one value from a small visible set.",
|
|
1324
|
+
"states": [
|
|
1325
|
+
"unselected",
|
|
1326
|
+
"selected",
|
|
1327
|
+
"disabled",
|
|
1328
|
+
"invalid"
|
|
1329
|
+
],
|
|
1330
|
+
"actions": [
|
|
1331
|
+
"select",
|
|
1332
|
+
"move-next",
|
|
1333
|
+
"move-previous"
|
|
1334
|
+
],
|
|
1335
|
+
"interactionContractIds": [
|
|
1336
|
+
"IC-004",
|
|
1337
|
+
"IC-007"
|
|
1338
|
+
],
|
|
1339
|
+
"accessibilityRequirements": [
|
|
1340
|
+
"Expose one group label.",
|
|
1341
|
+
"Expose each option label and selected state.",
|
|
1342
|
+
"Support the platform radio-group keyboard model."
|
|
1343
|
+
],
|
|
1344
|
+
"lifecycle": {
|
|
1345
|
+
"status": "stable",
|
|
1346
|
+
"owner": "platform-ui",
|
|
1347
|
+
"introducedIn": "1.0.0",
|
|
1348
|
+
"deprecatedIn": null,
|
|
1349
|
+
"replacementId": null
|
|
1350
|
+
}
|
|
1351
|
+
},
|
|
1352
|
+
"switch": {
|
|
1353
|
+
"version": 2,
|
|
1354
|
+
"id": "CS-005",
|
|
1355
|
+
"name": "switch",
|
|
1356
|
+
"semanticRole": "immediate-setting",
|
|
1357
|
+
"purpose": "Change one setting that takes effect immediately.",
|
|
1358
|
+
"states": [
|
|
1359
|
+
"off",
|
|
1360
|
+
"on",
|
|
1361
|
+
"disabled",
|
|
1362
|
+
"loading"
|
|
1363
|
+
],
|
|
1364
|
+
"actions": [
|
|
1365
|
+
"toggle"
|
|
1366
|
+
],
|
|
1367
|
+
"interactionContractIds": [
|
|
1368
|
+
"IC-002",
|
|
1369
|
+
"IC-007"
|
|
1370
|
+
],
|
|
1371
|
+
"accessibilityRequirements": [
|
|
1372
|
+
"Expose the current on or off state.",
|
|
1373
|
+
"Use a stable label that does not change with state."
|
|
1374
|
+
],
|
|
1375
|
+
"lifecycle": {
|
|
1376
|
+
"status": "stable",
|
|
1377
|
+
"owner": "platform-ui",
|
|
1378
|
+
"introducedIn": "1.0.0",
|
|
1379
|
+
"deprecatedIn": null,
|
|
1380
|
+
"replacementId": null
|
|
1381
|
+
}
|
|
1382
|
+
},
|
|
1383
|
+
"select": {
|
|
1384
|
+
"version": 2,
|
|
1385
|
+
"id": "CS-006",
|
|
1386
|
+
"name": "select",
|
|
1387
|
+
"semanticRole": "constrained-selection",
|
|
1388
|
+
"purpose": "Choose one value from a bounded option set when showing every option at once is not suitable.",
|
|
1389
|
+
"states": [
|
|
1390
|
+
"closed",
|
|
1391
|
+
"open",
|
|
1392
|
+
"selected",
|
|
1393
|
+
"disabled",
|
|
1394
|
+
"invalid",
|
|
1395
|
+
"empty"
|
|
1396
|
+
],
|
|
1397
|
+
"actions": [
|
|
1398
|
+
"open",
|
|
1399
|
+
"close",
|
|
1400
|
+
"select",
|
|
1401
|
+
"move-next",
|
|
1402
|
+
"move-previous"
|
|
1403
|
+
],
|
|
1404
|
+
"interactionContractIds": [
|
|
1405
|
+
"IC-003",
|
|
1406
|
+
"IC-004",
|
|
1407
|
+
"IC-007"
|
|
1408
|
+
],
|
|
1409
|
+
"accessibilityRequirements": [
|
|
1410
|
+
"Expose a label, selected value, and expanded state.",
|
|
1411
|
+
"Keep the complete option keyboard model.",
|
|
1412
|
+
"Restore focus after the option surface closes."
|
|
1413
|
+
],
|
|
1414
|
+
"lifecycle": {
|
|
1415
|
+
"status": "stable",
|
|
1416
|
+
"owner": "platform-ui",
|
|
1417
|
+
"introducedIn": "1.0.0",
|
|
1418
|
+
"deprecatedIn": null,
|
|
1419
|
+
"replacementId": null
|
|
1420
|
+
}
|
|
1421
|
+
},
|
|
1422
|
+
"dialog": {
|
|
1423
|
+
"version": 2,
|
|
1424
|
+
"id": "CS-007",
|
|
1425
|
+
"name": "dialog",
|
|
1426
|
+
"semanticRole": "modal-task",
|
|
1427
|
+
"purpose": "Temporarily contain one focused task that requires context from the current surface.",
|
|
1428
|
+
"states": [
|
|
1429
|
+
"closed",
|
|
1430
|
+
"opening",
|
|
1431
|
+
"open",
|
|
1432
|
+
"closing"
|
|
1433
|
+
],
|
|
1434
|
+
"actions": [
|
|
1435
|
+
"open",
|
|
1436
|
+
"close",
|
|
1437
|
+
"confirm",
|
|
1438
|
+
"cancel"
|
|
1439
|
+
],
|
|
1440
|
+
"interactionContractIds": [
|
|
1441
|
+
"IC-003",
|
|
1442
|
+
"IC-007"
|
|
1443
|
+
],
|
|
1444
|
+
"accessibilityRequirements": [
|
|
1445
|
+
"Expose a dialog name.",
|
|
1446
|
+
"Trap focus while modal.",
|
|
1447
|
+
"Close with Escape when dismissal is allowed.",
|
|
1448
|
+
"Restore focus to the invoking control."
|
|
1449
|
+
],
|
|
1450
|
+
"lifecycle": {
|
|
1451
|
+
"status": "stable",
|
|
1452
|
+
"owner": "platform-ui",
|
|
1453
|
+
"introducedIn": "1.0.0",
|
|
1454
|
+
"deprecatedIn": null,
|
|
1455
|
+
"replacementId": null
|
|
1456
|
+
}
|
|
1457
|
+
},
|
|
1458
|
+
"alert-dialog": {
|
|
1459
|
+
"version": 2,
|
|
1460
|
+
"id": "CS-008",
|
|
1461
|
+
"name": "alert-dialog",
|
|
1462
|
+
"semanticRole": "critical-confirmation",
|
|
1463
|
+
"purpose": "Require an explicit decision before a destructive or hard-to-reverse action.",
|
|
1464
|
+
"states": [
|
|
1465
|
+
"closed",
|
|
1466
|
+
"open",
|
|
1467
|
+
"submitting",
|
|
1468
|
+
"failed"
|
|
1469
|
+
],
|
|
1470
|
+
"actions": [
|
|
1471
|
+
"open",
|
|
1472
|
+
"confirm",
|
|
1473
|
+
"cancel"
|
|
1474
|
+
],
|
|
1475
|
+
"interactionContractIds": [
|
|
1476
|
+
"IC-001",
|
|
1477
|
+
"IC-002",
|
|
1478
|
+
"IC-003",
|
|
1479
|
+
"IC-007"
|
|
1480
|
+
],
|
|
1481
|
+
"accessibilityRequirements": [
|
|
1482
|
+
"Expose a clear consequence in the name or description.",
|
|
1483
|
+
"Place initial focus on the safest suitable action.",
|
|
1484
|
+
"Restore focus after cancellation or completion."
|
|
1485
|
+
],
|
|
1486
|
+
"lifecycle": {
|
|
1487
|
+
"status": "stable",
|
|
1488
|
+
"owner": "platform-ui",
|
|
1489
|
+
"introducedIn": "1.0.0",
|
|
1490
|
+
"deprecatedIn": null,
|
|
1491
|
+
"replacementId": null
|
|
1492
|
+
}
|
|
1493
|
+
},
|
|
1494
|
+
"tabs": {
|
|
1495
|
+
"version": 2,
|
|
1496
|
+
"id": "CS-009",
|
|
1497
|
+
"name": "tabs",
|
|
1498
|
+
"semanticRole": "view-selection",
|
|
1499
|
+
"purpose": "Switch between peer content views without changing the page context.",
|
|
1500
|
+
"states": [
|
|
1501
|
+
"selected",
|
|
1502
|
+
"unselected",
|
|
1503
|
+
"disabled"
|
|
1504
|
+
],
|
|
1505
|
+
"actions": [
|
|
1506
|
+
"select",
|
|
1507
|
+
"move-next",
|
|
1508
|
+
"move-previous",
|
|
1509
|
+
"move-first",
|
|
1510
|
+
"move-last"
|
|
1511
|
+
],
|
|
1512
|
+
"interactionContractIds": [
|
|
1513
|
+
"IC-007"
|
|
1514
|
+
],
|
|
1515
|
+
"accessibilityRequirements": [
|
|
1516
|
+
"Associate each tab with one panel.",
|
|
1517
|
+
"Expose selected state.",
|
|
1518
|
+
"Support the platform tab keyboard model."
|
|
1519
|
+
],
|
|
1520
|
+
"lifecycle": {
|
|
1521
|
+
"status": "stable",
|
|
1522
|
+
"owner": "platform-ui",
|
|
1523
|
+
"introducedIn": "1.0.0",
|
|
1524
|
+
"deprecatedIn": null,
|
|
1525
|
+
"replacementId": null
|
|
1526
|
+
}
|
|
1527
|
+
},
|
|
1528
|
+
"form": {
|
|
1529
|
+
"version": 2,
|
|
1530
|
+
"id": "CS-010",
|
|
1531
|
+
"name": "form",
|
|
1532
|
+
"semanticRole": "data-submission",
|
|
1533
|
+
"purpose": "Collect, validate, and submit a related set of values to a server-owned boundary.",
|
|
1534
|
+
"states": [
|
|
1535
|
+
"pristine",
|
|
1536
|
+
"dirty",
|
|
1537
|
+
"submitting",
|
|
1538
|
+
"invalid",
|
|
1539
|
+
"succeeded",
|
|
1540
|
+
"failed"
|
|
1541
|
+
],
|
|
1542
|
+
"actions": [
|
|
1543
|
+
"edit",
|
|
1544
|
+
"submit",
|
|
1545
|
+
"reset",
|
|
1546
|
+
"leave"
|
|
1547
|
+
],
|
|
1548
|
+
"interactionContractIds": [
|
|
1549
|
+
"IC-002",
|
|
1550
|
+
"IC-004",
|
|
1551
|
+
"IC-008"
|
|
1552
|
+
],
|
|
1553
|
+
"accessibilityRequirements": [
|
|
1554
|
+
"Use persistent labels and associated errors.",
|
|
1555
|
+
"Expose a server error summary.",
|
|
1556
|
+
"Announce submission progress and result.",
|
|
1557
|
+
"Warn before losing dirty values."
|
|
1558
|
+
],
|
|
1559
|
+
"lifecycle": {
|
|
1560
|
+
"status": "stable",
|
|
1561
|
+
"owner": "platform-ui",
|
|
1562
|
+
"introducedIn": "1.0.0",
|
|
1563
|
+
"deprecatedIn": null,
|
|
1564
|
+
"replacementId": null
|
|
1565
|
+
}
|
|
1566
|
+
},
|
|
1567
|
+
"data-table": {
|
|
1568
|
+
"version": 2,
|
|
1569
|
+
"id": "CS-011",
|
|
1570
|
+
"name": "data-table",
|
|
1571
|
+
"semanticRole": "tabular-data-exploration",
|
|
1572
|
+
"purpose": "Inspect and act on structured records while preserving row and column relationships.",
|
|
1573
|
+
"states": [
|
|
1574
|
+
"loading",
|
|
1575
|
+
"populated",
|
|
1576
|
+
"empty",
|
|
1577
|
+
"filtered-empty",
|
|
1578
|
+
"selected",
|
|
1579
|
+
"failed"
|
|
1580
|
+
],
|
|
1581
|
+
"actions": [
|
|
1582
|
+
"sort",
|
|
1583
|
+
"filter",
|
|
1584
|
+
"select",
|
|
1585
|
+
"paginate",
|
|
1586
|
+
"activate-row-action"
|
|
1587
|
+
],
|
|
1588
|
+
"interactionContractIds": [
|
|
1589
|
+
"IC-002",
|
|
1590
|
+
"IC-006",
|
|
1591
|
+
"IC-007"
|
|
1592
|
+
],
|
|
1593
|
+
"accessibilityRequirements": [
|
|
1594
|
+
"Preserve row and column relationships.",
|
|
1595
|
+
"Name sorting, filtering, selection, and row actions.",
|
|
1596
|
+
"Announce loading and empty states.",
|
|
1597
|
+
"Keep a non-dragging alternative for reordering."
|
|
1598
|
+
],
|
|
1599
|
+
"lifecycle": {
|
|
1600
|
+
"status": "stable",
|
|
1601
|
+
"owner": "platform-ui",
|
|
1602
|
+
"introducedIn": "1.0.0",
|
|
1603
|
+
"deprecatedIn": null,
|
|
1604
|
+
"replacementId": null
|
|
1605
|
+
}
|
|
1606
|
+
}
|
|
1607
|
+
};
|
|
1608
|
+
export const telemetryContract = {
|
|
1609
|
+
"version": 1,
|
|
1610
|
+
"runtimeSchemaVersion": 2,
|
|
1611
|
+
"events": [
|
|
1612
|
+
"accessibility.journey",
|
|
1613
|
+
"client.exception",
|
|
1614
|
+
"component.bundle",
|
|
1615
|
+
"component.exposure",
|
|
1616
|
+
"component.state",
|
|
1617
|
+
"form.abandonment",
|
|
1618
|
+
"form.attempt",
|
|
1619
|
+
"form.submit",
|
|
1620
|
+
"form.validation",
|
|
1621
|
+
"interaction",
|
|
1622
|
+
"livewire.dom-update",
|
|
1623
|
+
"livewire.request",
|
|
1624
|
+
"network.summary",
|
|
1625
|
+
"runtime.init",
|
|
1626
|
+
"server.request",
|
|
1627
|
+
"web-vital"
|
|
1628
|
+
],
|
|
1629
|
+
"componentIdentity": {
|
|
1630
|
+
"required": [
|
|
1631
|
+
"implementationName",
|
|
1632
|
+
"adapter",
|
|
1633
|
+
"designLanguageRelease"
|
|
1634
|
+
],
|
|
1635
|
+
"optional": [
|
|
1636
|
+
"semanticComponentId"
|
|
1637
|
+
]
|
|
1638
|
+
},
|
|
1639
|
+
"outcomes": [
|
|
1640
|
+
"success",
|
|
1641
|
+
"failure",
|
|
1642
|
+
"abandoned",
|
|
1643
|
+
"observed"
|
|
1644
|
+
],
|
|
1645
|
+
"ratings": [
|
|
1646
|
+
"good",
|
|
1647
|
+
"needs-improvement",
|
|
1648
|
+
"poor"
|
|
1649
|
+
],
|
|
1650
|
+
"privacy": {
|
|
1651
|
+
"prohibited": [
|
|
1652
|
+
"field values",
|
|
1653
|
+
"user identifiers",
|
|
1654
|
+
"email addresses",
|
|
1655
|
+
"full URLs",
|
|
1656
|
+
"stack traces"
|
|
1657
|
+
]
|
|
1658
|
+
}
|
|
1659
|
+
};
|
|
1660
|
+
export const laravelPlatformAdapter = {
|
|
1661
|
+
"version": 1,
|
|
1662
|
+
"adapterVersion": "0.1.0",
|
|
1663
|
+
"mappings": [
|
|
1664
|
+
{
|
|
1665
|
+
"semanticContractId": "CS-001",
|
|
1666
|
+
"implementations": [
|
|
1667
|
+
{
|
|
1668
|
+
"name": "button",
|
|
1669
|
+
"runtime": "blade",
|
|
1670
|
+
"primary": true
|
|
1671
|
+
}
|
|
1672
|
+
]
|
|
1673
|
+
},
|
|
1674
|
+
{
|
|
1675
|
+
"semanticContractId": "CS-002",
|
|
1676
|
+
"implementations": [
|
|
1677
|
+
{
|
|
1678
|
+
"name": "input",
|
|
1679
|
+
"runtime": "blade",
|
|
1680
|
+
"primary": true
|
|
1681
|
+
}
|
|
1682
|
+
]
|
|
1683
|
+
},
|
|
1684
|
+
{
|
|
1685
|
+
"semanticContractId": "CS-003",
|
|
1686
|
+
"implementations": [
|
|
1687
|
+
{
|
|
1688
|
+
"name": "checkbox",
|
|
1689
|
+
"runtime": "blade",
|
|
1690
|
+
"primary": true
|
|
1691
|
+
}
|
|
1692
|
+
]
|
|
1693
|
+
},
|
|
1694
|
+
{
|
|
1695
|
+
"semanticContractId": "CS-004",
|
|
1696
|
+
"implementations": [
|
|
1697
|
+
{
|
|
1698
|
+
"name": "radio",
|
|
1699
|
+
"runtime": "blade",
|
|
1700
|
+
"primary": true
|
|
1701
|
+
}
|
|
1702
|
+
]
|
|
1703
|
+
},
|
|
1704
|
+
{
|
|
1705
|
+
"semanticContractId": "CS-005",
|
|
1706
|
+
"implementations": [
|
|
1707
|
+
{
|
|
1708
|
+
"name": "switch",
|
|
1709
|
+
"runtime": "blade",
|
|
1710
|
+
"primary": true
|
|
1711
|
+
}
|
|
1712
|
+
]
|
|
1713
|
+
},
|
|
1714
|
+
{
|
|
1715
|
+
"semanticContractId": "CS-006",
|
|
1716
|
+
"implementations": [
|
|
1717
|
+
{
|
|
1718
|
+
"name": "select",
|
|
1719
|
+
"runtime": "blade",
|
|
1720
|
+
"primary": true
|
|
1721
|
+
}
|
|
1722
|
+
]
|
|
1723
|
+
},
|
|
1724
|
+
{
|
|
1725
|
+
"semanticContractId": "CS-007",
|
|
1726
|
+
"implementations": [
|
|
1727
|
+
{
|
|
1728
|
+
"name": "dialog",
|
|
1729
|
+
"runtime": "blade",
|
|
1730
|
+
"primary": true
|
|
1731
|
+
},
|
|
1732
|
+
{
|
|
1733
|
+
"name": "livewire-modal",
|
|
1734
|
+
"runtime": "livewire",
|
|
1735
|
+
"primary": false
|
|
1736
|
+
}
|
|
1737
|
+
]
|
|
1738
|
+
},
|
|
1739
|
+
{
|
|
1740
|
+
"semanticContractId": "CS-008",
|
|
1741
|
+
"implementations": [
|
|
1742
|
+
{
|
|
1743
|
+
"name": "alert-dialog",
|
|
1744
|
+
"runtime": "blade",
|
|
1745
|
+
"primary": true
|
|
1746
|
+
},
|
|
1747
|
+
{
|
|
1748
|
+
"name": "livewire-confirm",
|
|
1749
|
+
"runtime": "livewire",
|
|
1750
|
+
"primary": false
|
|
1751
|
+
}
|
|
1752
|
+
]
|
|
1753
|
+
},
|
|
1754
|
+
{
|
|
1755
|
+
"semanticContractId": "CS-009",
|
|
1756
|
+
"implementations": [
|
|
1757
|
+
{
|
|
1758
|
+
"name": "tabs",
|
|
1759
|
+
"runtime": "blade",
|
|
1760
|
+
"primary": true
|
|
1761
|
+
},
|
|
1762
|
+
{
|
|
1763
|
+
"name": "livewire-tabs",
|
|
1764
|
+
"runtime": "livewire",
|
|
1765
|
+
"primary": false
|
|
1766
|
+
}
|
|
1767
|
+
]
|
|
1768
|
+
},
|
|
1769
|
+
{
|
|
1770
|
+
"semanticContractId": "CS-010",
|
|
1771
|
+
"implementations": [
|
|
1772
|
+
{
|
|
1773
|
+
"name": "form",
|
|
1774
|
+
"runtime": "blade",
|
|
1775
|
+
"primary": true
|
|
1776
|
+
}
|
|
1777
|
+
]
|
|
1778
|
+
},
|
|
1779
|
+
{
|
|
1780
|
+
"semanticContractId": "CS-011",
|
|
1781
|
+
"implementations": [
|
|
1782
|
+
{
|
|
1783
|
+
"name": "data-table",
|
|
1784
|
+
"runtime": "blade",
|
|
1785
|
+
"primary": true
|
|
1786
|
+
},
|
|
1787
|
+
{
|
|
1788
|
+
"name": "livewire-data-table",
|
|
1789
|
+
"runtime": "livewire",
|
|
1790
|
+
"primary": false
|
|
1791
|
+
}
|
|
1792
|
+
]
|
|
1793
|
+
}
|
|
1794
|
+
]
|
|
1795
|
+
};
|
|
1796
|
+
export const designLanguageRelease = {
|
|
1797
|
+
"schemaVersion": 1,
|
|
1798
|
+
"releaseVersion": "1.3.0",
|
|
1799
|
+
"foundationVersion": "2.0.0",
|
|
1800
|
+
"contracts": {
|
|
1801
|
+
"interaction": 2,
|
|
1802
|
+
"visualPattern": 1,
|
|
1803
|
+
"componentSemantic": 2,
|
|
1804
|
+
"componentApi": 2,
|
|
1805
|
+
"platformAdapter": 1,
|
|
1806
|
+
"telemetry": 1
|
|
1807
|
+
},
|
|
1808
|
+
"adapters": {
|
|
1809
|
+
"laravel": "0.1.0",
|
|
1810
|
+
"typescript": "0.1.0",
|
|
1811
|
+
"mcp": "0.1.0"
|
|
1812
|
+
},
|
|
1813
|
+
"generatorVersion": 2,
|
|
1814
|
+
"sources": {
|
|
1815
|
+
"tokens": {
|
|
1816
|
+
"sha256": "sha256:05ade47e548b432e15dd2901575447376580c795beeef9d04189436dbb60a541",
|
|
1817
|
+
"files": 26
|
|
1818
|
+
},
|
|
1819
|
+
"interactions": "sha256:bab774f918c06dfc6c01a59d1e3b8d4e0ff4f51a3282710039974e696381bc70",
|
|
1820
|
+
"visualPatterns": "sha256:ca7d0e659c68748f4cf71f78cd07d8e71c757757ac477e7d89768036d0b6b1d8",
|
|
1821
|
+
"componentSemantics": "sha256:bd93376709eceeb32bf5c26c542856162f5e56e2b5a5beb1e6f4698a925981b0",
|
|
1822
|
+
"telemetry": "sha256:86b2605c00bf3c6236c96dbaf3008757b6cdf085c9f29661310dfde7f38e8221",
|
|
1823
|
+
"laravelAdapter": "sha256:3238c6e8793013afc57490b083beae25e124c0c4ae7d6db24577df4a3dc7efa4"
|
|
1824
|
+
},
|
|
1825
|
+
"catalogSha256": "0b7c8a06106aa60b2dae1f2905cc993b686d7e44503d3761cf8ea420ad637b35"
|
|
1826
|
+
};
|
|
1827
|
+
export function getInteractionContract(id) {
|
|
1828
|
+
return interactionContracts[id];
|
|
1829
|
+
}
|
|
1830
|
+
export function getVisualPatternContract(id) {
|
|
1831
|
+
return visualPatternContracts[id];
|
|
1832
|
+
}
|
|
1833
|
+
export function getComponentSemanticContract(name) {
|
|
1834
|
+
return componentSemantics[name];
|
|
1835
|
+
}
|
|
1836
|
+
export function getLaravelSemanticMapping(implementationName) {
|
|
1837
|
+
return laravelPlatformAdapter.mappings.find((mapping) => mapping.implementations.some((implementation) => implementation.name === implementationName));
|
|
1838
|
+
}
|
|
1839
|
+
//# sourceMappingURL=index.js.map
|