\n> ```\n>\n> notice we use `htmlfor` instead of `for`. when managing focus or dynamic content in react, use refs (`useref`) and effect hooks to set focus or update attributes programmatically. also consider libraries like react aria (adobe’s spectrum toolkit) which provide accessible ui components out-of-the-box.\n\n## ensure keyboard navigation and focus\n\nall form controls must be reachable and operable via keyboard alone (tab, shift+tab, enter, space). users should be able to move focus through fields in a logical order that matches the visual layout. and i don\'t know if it needs to be said but - never trap focus in a field. basically avoid preventing tab from leaving a text field. also provide visible focus indicators (the outline or border around a focused element) so users know where they are.\n\n> [!tip] wcag 2.2’s ***focus not obscured*** criterion requires that this focus indicator remain at least partially visible (not hidden behind sticky headers or out of view).\n\nin css, avoid removing the focus outline without replacing it; if you do customize it, make sure it meets contrast requirements.\n\nyou can test this with a keyboard: ensure pressing enter or space activates buttons, links, or checkboxes. don’t manually reorder the tab sequence with `tabindex` (this often confuses users) – instead, structure your html in the same order you want users to navigate.\n\nfor complex components (e.g. custom dropdowns, dialogs), you can manage focus with scripts (e.g. move focus into a modal when it opens, and return focus to a logical place when it closes).\n\n> [!bonus] providing “skip to content” links or using landmark roles (like ``, `