Målet: full dekning av APG
WAI-ARIA Authoring Practices Guide beskriver ca. 30 etablerte interaksjonsmønstre for komplekse UI-widgets. Denne siden viser hvert eneste mønster og nøyaktig hvordan det er dekket i designsystemet - enten av en egen komponent, av et native HTML-element (som allerede implementerer mønsteret helt uten JS/ARIA), eller som en bevisst, begrunnet utsettelse.
19 mønstre er dekket av en egen komponent, 11 av native HTML alene, og 2 er bevisst utsatt med dokumentert begrunnelse - 30 mønstre totalt, 28 reelt dekket i dag.
Alle mønstre
| APG-mønster | Dekning i designsystemet |
|---|---|
| Accordion | Native-first: <details name="...">/<summary> gir gruppert utvid/kollaps helt uten JS eller ARIA - se Regler. |
| Alert | <lm-toast> og <lm-inline-message>. |
| Alert Dialog | <lm-confirm-dialog>. |
| Breadcrumb | <lm-breadcrumb>. |
| Button | Native-first: <button> alene dekker mønsteret fullt ut - ingen wrapper-komponent trengs. |
| Carousel | <lm-carousel>. |
| Checkbox | Native-first: <input type="checkbox"> (evt. indeterminate satt via JS) dekker mønsteret fullt ut. |
| Combobox | Native-first: et <input list="..."> koblet til en <datalist> (se kobleDatalistSok() for asynkrone/hentede lister) dekker repoets faktiske søk-med-forslag-behov - ingen egen ARIA-combobox-widget bygges. |
| Dialog (Modal) | <lm-dialog> (generisk), samt <lm-confirm-dialog> og forhåndsvisnings-dialogene for spesialiserte varianter. |
| Disclosure | Native-first: <details>/<summary> alene dekker mønsteret fullt ut. |
| Feed | <lm-feed>. |
| Grid | Bevisst utsatt: <lm-data-table> følger Table, ikke Grid - se komponentens detaljer for full begrunnelse. Bygges som egen <lm-data-grid> hvis et reelt behov for celle-for-celle-navigasjon oppstår. |
| Landmarks | Native-first: <header>/<nav>/<main>/<footer> brukes direkte i alle sidemaler - se Regler. |
| Link | <lm-link-button> (for lenker som skal se ut som knapper - en ekte <a href> brukes ellers direkte, uten wrapper). |
| Listbox | <lm-listbox>. |
| Menu og Menubar | Menu-delen dekkes av <lm-menu-button> sin utfellbare meny. Full frittstående Menubar (flere sideordnede menyer i en topplinje) er ikke bygget - ingen tjeneste i repoet trenger en applikasjonsmenylinje per nå. |
| Menu Button | <lm-menu-button>. |
| Meter | Native-first: <meter> alene dekker mønsteret fullt ut. |
| Radio Group | Native-first for vanlige valg: <input type="radio"> i en <fieldset>. For en segmentert bryter (knapper i stedet for prikker): <lm-button-group type="enkeltvalg">. |
| Slider | Native-first: <input type="range"> dekker ett-håndtak-mønsteret fullt ut. |
| Slider (Multi-Thumb) | <lm-range-slider> - ingen native ekvivalent finnes for to håndtak i ett element. |
| Spinbutton | Native-first: <input type="number"> alene dekker mønsteret fullt ut. |
| Switch | Native-first: <input type="checkbox" switch> gir en ekte switch-rolle og -oppførsel uten JS eller ARIA. |
| Table | <lm-data-table>. |
| Tabs | <lm-tabs> (ekte tablist/tabpanel-mønster for innholds-visning i én side). <lm-nav-tabs> er en bevisst annerledes, ren side-til-side-navigasjonskomponent - se dens seOgsa. |
| Toolbar | <lm-button-group type="verktoylinje">. |
| Tooltip | <lm-tooltip> - bruker native interestfor når nettleseren støtter det. |
| Tree View | <lm-tree-view>. |
| Treegrid | Bevisst utsatt: kombinasjonen av Tree View og Grid (celleredigering per rad) er betydelig mer komplisert enn noen nåværende tjeneste trenger. Bygges som en variant av <lm-tree-view> hvis et reelt behov oppstår. |
| Window Splitter | <lm-splitter>. |