Inert, not aria-hidden + pointer-events-none, for gated sections

Fixkamo-internal
Shipped
August 28, 2026 at 4:37 AM UTC
Author
Kamo
Commit
6310685

CreateOrgForm's section() helper hid the four sections gated on "no branch type chosen yet" with aria-hidden plus a pointer-events-none className. aria-hidden on a container whose descendants are still focusable is the WCAG 4.1.2 anti-pattern, and pointer-events-none only stops the mouse — a keyboard user tabbing from the top of a brand-new page could still reach and operate fields the page visually presents as inert, since initialCreateOrgFields() starts with no branch type selected. inert (React 19's first-class boolean prop, confirmed to type-check cleanly through motion.section here) replaces both: it pulls the subtree out of the accessibility tree, the tab order and pointer interaction in one primitive. opacity-40 stays as the visual cue. Audited the rest of the file and the other components this task touched for the same **************** shape; found none — the field components' own disabled-state wrappers use aria-disabled (a different, non-conflicting pattern), and every other aria-hidden in files this task touched is on a genuinely decorative, non-interactive glyph (AppSwitches' AppGlyph icon, FirstOrgCta's decorative Box glows).

All changes

Like what you see shipping?

Every one of these updates lands in your workspace automatically. Start free and watch it grow week after week.

Start Free ForeverView Pricing