The checklist every screen passes before it ships, the ARIA patterns we reuse, and how CargoHub writes: labels, errors, Pakistani numbers and dates.
Tick as you review a screen. Your ticks are saved with the demo.
Dashed box = the real hit area.
| Pattern | Markup |
|---|---|
| TreeSidebar groups, menu editor | nav › button[aria-expanded] + sub list; links carry aria-current="page"Enter / Space toggles a group; Tab moves |
| TabsRecord tabs, filter chips, sliding pill | role="tablist" › role="tab" + aria-selected← / → between tabs (planned), Enter activates |
| DialogconfirmBox, drawers, request access | role="dialog" aria-modal="true" aria-labelFocus trapped; Esc closes; focus returns |
| Alert / statusToasts, form errors, service banner | role="status" (polite) · role="alert" for failures · aria-liveNothing to press; announced once |
| CurrentSidebar, kit nav, steppers | aria-current="page" · aria-current="step"— |
| SortRegister headers | th[aria-sort="ascending|descending|none"] › buttonEnter sorts; press again to reverse |
| BusySkeletons, refresh | aria-busy="true" on the region + visually hidden “Loading”— |
| PressedPin, hide, density toggles | button[aria-pressed]Space / Enter toggles |
WCAG 2.2 ratio. AA needs 4.5:1 for text and 3:1 for large text and UI parts. Pairs below are read from the live tokens.
| Token pair | Use | Ratio | |
|---|---|---|---|
| --ink on --surface | Body text | 17.68 AAA | |
| --ink-2 on --surface | Secondary text | 10.12 AAA | |
| --muted on --surface | Hints, meta | 5.44 AA | |
| --muted on --ground | Meta on page ground | 5.06 AA | |
| --faint on --surface | Decoration only | 4.58 AA | |
| --b-700 on --surface | Links | 5.90 AA | |
| white on --b-600 | Primary button | 4.40 Large | |
| --b-800 on --b-50 | Doc chips | 7.16 AAA | |
| --ok on --ok-bg | OK pill | 5.12 AA | |
| --warn on --warn-bg | Warn pill | 5.42 AA | |
| --bad on --bad-bg | Bad pill | 5.07 AA | |
| --info on --info-bg | Info pill | 4.87 AA |
How CargoHub writes. Use this when naming buttons, writing errors and formatting data.
Plain, specific and calm. Write for a dispatcher on a busy shift: short sentences, the facts first, no exclamation marks.
A button names its result: “Post invoice to FBR”, “Assign LES-4821”, “Archive draft”. Never “Submit”, “OK” or “Proceed”.
Say what went wrong, where, and how to fix it. Keep what the user typed, and never blame them.
| Where | Format | Example |
|---|---|---|
| Tables, invoicesrs(n): lakh grouping | rs(n) | Rs 12,45,000 |
| KPIs, cardsrsc(n): L / Cr | rsc(n) | Rs 12.4 L |
| Spoken, chequeswords | words | 12 lakh 45 thousand |
| Exports (Excel)plain number | plain number | 1245000 |
| Kind | Do | Don’t |
|---|---|---|
| Date | 29 Sep 2026 | 9/29/26 |
| Short date | 29 Sep | 29-09 |
| Time | 10:42 (24 h) | 10:42:07 AM |
| Relative | 4 min ago · Yesterday | 0.07 hours ago |
| Range | 01–29 Sep 2026 | 1/9 - 29/9 |
| NTN | 4271938-6 | 4271938 6 |
| CNIC | 35202-1234567-1 | 3520212345671 |
| Mobile | +92 300 1234567 | 03001234567 |
| Documents | KHI/2026/01284 · INV-2026-00318 | #1284 |
In the ops portals, English stays the label and Urdu is an optional subtitle underneath (lang="ur" dir="rtl"). The driver app can switch fully to Urdu with right-to-left layout. Numbers, document numbers and plates stay in Latin digits.