WCAG 2.1 AA behaviors are enabled automatically by DashboardLayout — no configuration needed.

What you get for free

• Skip links (2.4.1) — “Skip to main content” / “Skip to navigation”, revealed on focus.
• Live region (4.1.3) — an aria-live status node for announcements.
• Landmarks — main#main and labelled <nav> roles (lists are intentionally skipped to preserve list semantics).
• Focus management — focus moves into modals/dropdowns on open and returns on close; Esc closes open dropdowns.
• Reduced motion (2.3.3) — animations are neutralized when prefers-reduced-motion is set.
• Tables & forms — th[scope] is inferred; inputs without labels borrow their placeholder as aria-label; invalid fields are announced.

Announcing messages

The live region picks up dynamically inserted .alert-danger / .invalid-feedback / .alert-success nodes — render one to announce a status change to screen readers.

{saved && (
  <div className="alert alert-success" role="status">Settings saved.</div>
)}

Form validation

Add needs-validation (or needs-validation-tooltip) to a form. The layout intercepts submit, blocks invalid forms, and adds was-validated to surface Bootstrap’s feedback — the same behavior as the AdminLTE dist.

<form className="needs-validation" noValidate>
  <input className="form-control" required />
  <div className="invalid-feedback">This field is required.</div>
  <button className="btn btn-primary" type="submit">Submit</button>
</form>

These behaviors are implemented in React (ported from AdminLTE’s accessibility.ts) and cleaned up on unmount — no adminlte.js required.