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

Fixkamo-internal
Ya
28 Agosti 2026, 04:37 UTC
Mwandishi
Kamo
Ahadi ya
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).

Mabadiliko yote

Je, unaona nini kuhusu usafiri?

Kila moja ya hizi updates ardhi katika nafasi yako ya kazi moja kwa moja. Kuanza bure na kuangalia kukua wiki baada ya wiki.

Kuwa Huru MileleMtazamo wa bei