Skip to main content
WireKit

WireKit v2.21.1

Patch release

Patch release — accessibility fixes, most of them repairs to things 2.21.0 and 2.20.0 introduced. No new props, no new configuration. One change renames a DOM id; it is called out below.

Fixed

  • A floating action button with words in it had no accessible name at all. The wrapper around its content was hidden from assistive technology unconditionally, so a button reading Send feedback was announced as nothing and could not be reached by voice control. The wrapper is now hidden only when there is nothing in it to read. An icon-only button is unaffected.
  • prefers-reduced-motion no longer reaches past WireKit's own markup. The rule matched any element whose class attribute merely contained the characters wk-, which every design-token utility does — bg-[var(--color-wk-bg)] on a <body>, the documented way to tint a page, put the entire document in scope and clamped the application's own animations. It now matches a class token, so a developer's animations are their own again. Components animated through Alpine's shorthand transitions keep their coverage.
  • The modal and drawer close buttons reach the 44×44 target. They rendered 32×32 with nothing widening them. A transparent centered expander supplies the hit area; the visible button is unchanged.
  • The touch-target floor applies to both axes on text fields. It set a minimum height only, so the one-time-code digit boxes grew to 44px tall and stayed 40px wide — every box in the library's densest row of targets was still under the minimum. Buttons keep the height floor alone: widening them would grow a row of small icon buttons past its container, and giving those a real touch target needs its own treatment.
  • The active sidebar item renders its emphasized foreground. The resting muted color and the active color are utilities of equal specificity, so which one wins is decided by the order Tailwind emits them — and the muted one came last. An application retinting the active state lost the same way, leaving !important as the only way out.
  • Radio ids are page-unique like every other name-derived control. Two identical radio sets on one page — a filter bar and the same filter in a dialog — emitted the same ids, and because the hint and error ids derive from them, the second set's description pointed at the first set's help text.
  • The one-time-code digit boxes no longer collide with a same-named control. id="code-2" meant both digit 2 of the first control and the second control called code, so one of these beside any same-named field emitted a duplicate id at the default length. The digit ids change shape: code-0 becomes code-digit-0. They are not documented and nothing inside WireKit addresses them, but code reaching for them by id needs the new spelling.
  • The one-time-code row wraps instead of overflowing. Each box has a fixed width and cannot shrink, so an eight-digit code needed more room than a sign-in card offers and ran past its edge.
  • Eleven accessible names now go through the translator. The one-time-code group and its per-digit labels, plus names in color picker, date picker, carousel, stage card, notification center, tour and map, were English text with a value interpolated into it — translatable in appearance, fixed in practice. They use placeholders, so a language that orders the words differently is served correctly.
  • The component sandbox no longer offers two variants that alert and callout refuse. Its schema advertised secondary and accent, which are not in either component's vocabulary, so picking one in the prop editor threw instead of rendering. Both components take the six canonical intents and the schema now says so.
  • An inline event handler is no longer reported as an unknown prop. Writing <x-wirekit::button onclick="history.back()"> — ordinary HTML — produced a development-time warning saying the prop does not exist. Every on* handler was affected.
  • The component sandbox shows a bound attribute for a numeric prop. Its Show Code panel offered level="4" where the schema declares an integer; both render the same today, but the snippet is what a developer copies, and it should teach the shape that stays correct once anything compares the value strictly.
  • The published package manifest no longer carries a development-only Composer scripts block. It referenced a directory the distributed package does not contain. Composer never ran it for an installed dependency, so no existing installation is affected.

Documentation

  • The 2.21.0 entry now names the 16px floor on text fields that shipped with the touch-target change. Both live in the same coarse-pointer rule, and the 16px half is the one that stops iOS Safari from zooming the page in when a field takes focus — and not zooming back out. The behavior has been there since 2.21.0; only its description was missing.