Tier B
RN-universal Alert pilot
ScaffoldedInline status message with a title and optional description. Pure View + Text; compound components share a variant via context. accessibilityRole='alert' announces the content to assistive tech on mount.
Side-by-side: default
shadcn
Enrolment updated
42 new students have been added to the Term 2 roster.
RN
Enrolment updated
42 new students have been added to the Term 2 roster.
Side-by-side: destructive
shadcn
Upload failed
The attendance report could not be saved. Try again or contact support.
RN
Upload failed
The attendance report could not be saved. Try again or contact support.
Title-only / without description
Report exported.
Semantics
| Aspect | shadcn | RN | Notes |
|---|---|---|---|
| Container role | role="alert" | accessibilityRole="alert" | Announces on mount |
| Title role | plain <div> | accessibilityRole="header" | RN announces as a heading |
| Variant propagation | CSS descendant selectors | React context | Native has no CSS cascade |
| Icon slot | CSS grid detecting >svg child | explicit icon prop | Explicit is clearer on RN; no SVG cascade |