Design Systems — 2026 Week 29

This Piccalilli deep-dive maps every collapsible widget pattern against the question of when aria-expanded is actually required — and when the web platform makes it unnecessary. The author divides patterns into collapsible sections (disclosure widget, accordion) and collapsible interactive elements (navigation, menu, tree view, combo box), each with distinct ARIA requirements: a fly-out navigation needs only aria-expanded, but a true menu button also requires aria-haspopup and aria-activedescendant. Native elements get their due: simple disclosure widgets should use <details>/<summary>, modals should use <dialog> with invoker commands, and tooltips can now be built with the Popover API (popover="auto") plus command="toggle-popover", delivering light-dismiss and ESC-to-close without JavaScript. The article warns that APG patterns are illustrations of ARIA usage, not production templates, and that all solutions — native or custom — must be tested with assistive technology.

Christine Vallaure introduces the design system contract model — a single JSON or YAML file per component that sits between Figma and code, neither of which is treated as the canonical source. Both the Figma library and the codebase are generated from that one file, and a checker verifies all three surfaces still agree. The model was popularised by Southleft (founded by TJ Petri, who recently joined Figma), whose open-source proof-of-concept has been validated against Shoelace, Mantine, Carbon, and Polaris. The urgency is practical: in Southleft’s A/B test an AI working without the contract scored 69 out of 100 — inventing options, hard-coding colours, and restyling components — while the same AI constrained by the contract scored 100 out of 100 and flagged genuine gaps instead of hallucinating. Vallaure is candid about scope: the contract fixes composition and token mapping but does not govern prose-level craft like drag, typeahead, or motion; ARIA semantics are included, which she calls a pleasant surprise. Critically, unlike Code Connect or UXPin Merge, the contract crowns neither Figma nor code — a distinction that preserves designers’ decision-making authority.

Jabo Landry walks through building accessible overlays with modern HTML primitives. Pop-ups use the popover and popovertarget attributes for built-in Escape-to-close and light-dismiss, while modals use the <dialog> element with command="show-modal" and command="close" on their trigger and close buttons — a declarative pattern that requires no JavaScript. When command/commandfor browser support is uncertain, the fallback is the showModal() method. The article highlights two practical gotchas: applying display: flex or grid directly on a popover or <dialog> overrides the default display: none and keeps the element always visible — use :popover-open or dialog[open] selectors instead; and background scrolling while a modal is open can be suppressed with html:has(dialog[open]) { overflow: hidden; }. CSS Anchor Positioning (position-anchor, anchor-name) enables tethering a pop-up to its trigger purely in CSS, though the article notes this feature needs a browser-support check before production use.

Vitaly Friedman surveys the gap between AI-feature ambition and real user appetite, citing IBM’s 2026 AI Adoption Gap study and Nielsen Norman Group research noting that AI chatbots actively discourage error-checking. His core claim: AI features are bolt-ons that pull people out of established workflows, and the cost of verifying AI output — skimming, spotting key points, checking rationale, articulating corrections, re-reviewing — often exceeds the time saved. Users don’t compare AI with human alternatives; they compare features with features, and any unreliable feature loses to a reliable one regardless of its technology. The practical prescription is AI-second design: ambient, calm, deeply integrated into existing mental models, automating genuinely tedious tasks rather than replacing creative or judgment-intensive work. Friedman quotes Bo Young Lee’s widely-shared formulation: people want AI to handle the physical and mental labour that taxes them so they can spend more time on work and relationships that are distinctly human.