Theme

WCKD UI test lab

Assign this template to a page to exercise core tokens, layout utilities, and interactive components from wckd-core.css, wckd-ui-components.css, and wckd-ui.js (including primary nav / hamburger behavior).

Accessibility contract (WCKD base)

This section documents what the parent theme guarantees for keyboard and assistive tech, and what still requires project-level QA (WCAG 2.2 AA / AODA readiness). It is not a certification.

Site chrome

Interactive components (keyboard & focus)

Buttons & links
Native <button> and <a>; visible :focus-visible styles come from wckd-core.css. Test every custom colour override in child themes for contrast.
Carousel (.wckd-carousel)
Horizontal scroll region; verify keyboard users can reach slide content and that optional nav controls are focusable. Prefer concise copy inside slides; do not rely on drag-only interaction.
Tabs (.wckd-tabs)
Tab buttons should move focus predictably; ensure only one panel is visible and aria-selected / relationship attributes match if you extend the script.
Accordion (.accordion-toggle)
Toggle panels with Enter/Space; expanded state uses .is-open — confirm focus is not trapped and order follows the DOM.
Overlay (.wckd-overlay)
Script supports close, backdrop click, Escape; focus should return to the trigger after close (verify when updating close-button markup).
Toggle (.wckd-toggle)
Content visibility is toggled via .open-toggle on the parent; keyboard users activate the same <button>.
Forms
Use real <label> for inputs; surface errors in text (not colour alone). Footer demo markup must be replaced with production-ready labels and messages.

Typography & tokens

Body text uses the theme font stack and --font-color.

Intro style uses secondary tone (--font-color-secondary).

Subheading

Link accent · Primary color utility

WCKD icon chevron (inline SVG)

Columns & grid

Layout uses .columns (CSS grid) with --count set by .count-1 … .count-6. Pair with .gap* / .gap-row-* / .gap-column-* for gutters, .span-* to merge cells, and .order-* or .desktop-order-* to reorder. The bundle also defines .count-N.locked — see wckd-core.css for how it interacts with responsive --count rules.

count-1 … count-6

Resize the window: default CSS steps wide grids down at 1024px, 768px, and 590px.

.columns.count-1.gap-xs
col a
col b
count-3
count-3
count-3
count-4 · 1
count-4 · 2
count-4 · 3
count-4 · 4
1
2
3
4
5
6

Gap utilities

Shorthand .gap, .gap-xs, .gap-xl, etc. set both row and column gap. Use .gap-row-* and .gap-column-* independently.

Tight

gap-xxs
gap-xxs
gap-xxs

Loose

gap-xl
gap-xl
gap-xl
gap-row-xl
gap-column-s
mixed

span-2 … span-6

.span-2
1
1

order-1 / order-2 & desktop-order

Markup order: B then A. Flexbox order puts A first.

order-2 (B)
order-1 (A)

From 900px up, .desktop-order-* swaps the two columns below.

desktop-order-2
desktop-order-1

fit-content & shadows

.columns.fit-content

narrow
narrow
narrow

.columns.shadows

shadow
shadow
shadow

padded* & rounded* (children)

These utilities target direct children: .padded-m.rounded applies padding and radius to each column.

child
child
child

ul.columns / ol.columns

Lists can be grids too; pair with .no-bullets to reset list spacing.

  • <li>
  • <li>
  • <li>

Column alignment

.align-middle on a cell centers it in the row track when siblings are taller.

tall
.align-middle
tall

Bare .grid

.grid is display:grid only — supply template columns (here via inline style for the demo).

2fr
1fr
1fr

count-* .locked

Add .locked next to .count-N (e.g. .columns.count-4.locked) when you need the paired rule from wckd-core.css; test at each breakpoint because responsive --count overrides use the same .count-N selector.

.count-4.locked · 1
.count-4.locked · 2
.count-4.locked · 3
.count-4.locked · 4

Buttons

Link as button

Form controls

Horizontal snap, dots, and optional nav. Scroll or use controls.

A11y note: treat as a scrollable region; test Tab order and add aria labeling if you ship a static promo carousel without visible controls.

Slide 1

First panel.

Slide 2

Second panel.

Slide 3

Third panel.

Carousel ticker

Ticker A
Ticker B

Tabs

A11y note: roving tabindex / aria-selected are not asserted by this demo — validate if tabs hold legal or primary navigation.

Content for the first tab.

Content for the second tab.

Accordion + toolbar

A11y note: panels are native buttons + display toggle; filter field should keep programmatic name and announce results.

First accordion body. Filter toolbar above searches panel text.

Second body with beta keyword for filter demo.

Showcase columns

Desktop: hover / click to expand. Narrow viewports stack.

One
Two
Three

Bento grid

Short tile

Taller tile with more copy so masonry placement is visible.

Second paragraph adds height.

Another column

Overlay

A11y note: Escape closes; moving focus to the dialog on open and back to the trigger on close should be verified whenever overlay markup changes.

Overlay body. Close via ×, backdrop click, or Escape (handled by script).

Second overlay in the same data-overlay-group for navigation test.

Toggle

A11y note: one button toggles adjacent content; if the revealed region is large, consider aria-expanded on the button.

Revealed content inside .wckd-toggle-content.

Lite YouTube

Click to load embed (ws-youtube custom element).

Sort / filter radios

Red item

Blue item

Both tags

Inline text filter

  • Apple
  • Banana
  • Cherry

Match height

Short

Taller column text so equal heights are obvious when script runs.

Extra line.

Steps

Draft Review Publish

In-view animation hook

Scroll until the box enters view — .animate gets .in-view from IntersectionObserver.

.animate target

Sticky slides stack

Scroll the page — .wckd-slides columns stack and scale (long page intentional).

Slide stack 1

Slide stack 2

Slide stack 3