Penguin UI reference
Penguin UI используется только как референс поведения (Alpine, a11y).
Разметка и токены — Blocks (turbo-*, skin-*).
Источник: penguinui-components · docs
| Наш компонент | Референс | Что берём |
|---|---|---|
| Accordion | accordion | single-open, collapse, aria-expanded, aria-controls |
| Details | accordion (single item) | Alpine toggle, aria-controls |
| Buttons | buttons | primary / outline / ghost / disabled |
| Modal | modal | focus trap, Esc, backdrop, return focus |
| Panel | sidebar | drawer open/close, trap |
| Popover | dropdowns | click-outside, Esc, aria-expanded |
| Tabs | tabs | roving tabindex, Arrow/Home/End |
| Tooltip | tooltip | hover/focus, aria-describedby |
| Switcher | toggle | role="switch", boolean state |
| Swiper | carousel | prev/next, aria-current, reduced-motion |
| Table | table | scroll wrapper |
| Form fields | text-input / select / checkbox | focus / error / hint states |
A11y matrix (Blocks)
Section titled “A11y matrix (Blocks)”| Компонент | Focus trap | Keyboard | ARIA |
|---|---|---|---|
| Modal | x-trap.noscroll |
Esc | dialog, aria-modal, aria-labelledby |
| Panel | x-trap.noscroll |
Esc | dialog, aria-modal, aria-label |
| Popover | x-trap |
Esc, return focus | dialog, aria-expanded / aria-controls на trigger |
| Tabs | — | Arrows, Home, End | tablist / tab / tabpanel, aria-controls ↔ panel id |
| Accordion | — | Enter/Space, Arrows | aria-expanded, aria-controls |
| Details | — | click | aria-expanded, aria-controls |
| Tooltip | — | focus | tooltip, aria-describedby |
| Swiper | — | buttons, ArrowLeft/Right | aria-current, RU aria-live |
| Lightbox | x-trap.noscroll |
Esc, return focus | dialog, единый accessible name |
| Switcher | — | Space/Enter | role="switch", aria-checked |
| Toc | — | links | aria-current="location" |
| Skip link | — | Tab → Enter | #wp2turbo-main-content |
Alpine modules
Section titled “Alpine modules”assets/src/frontend/ — accordion, details, toggle, tabs, tooltip, modal, panel, popover, carousel, plugins, overlays (store + triggers).
Безопасность
Section titled “Безопасность”См. SECURITY.md — trust boundary для |raw.