Rules Hub
Coding Rules Library
Prefer headless UI libraries for complex interactive components
Use battle-tested headless libraries (like Radix UI or Headless UI) for complex interactive patterns to ensure robust accessibility and focus management.
Bad example
| 1 | // Bad: Manually hacking interaction and focus logic |
| 2 | // This creates A11y issues (nested interactive controls) and requires manual keyboard handling. |
| 3 | const SearchTrigger = ({ onClick }) => ( |
| 4 | <div |
| 5 | role="button" |
| 6 | tabIndex={0} |
| 7 | onClick={onClick} |
| 8 | onKeyDown={(e) => e.key === 'Enter' && onClick()} |
| 9 | > |
| 10 | {/* Input inside a button role confuses screen readers */} |
| 11 | <input type="text" placeholder="Click to search..." /> |
| 12 | </div> |
| 13 | ); |
Explanation (EN)
Manually implementing interactive patterns (like a button wrapping an input) often leads to invalid HTML semantics, broken keyboard navigation, and confused screen readers. It forces you to reinvent focus management and ARIA support from scratch.
Objašnjenje (HR)
Ručna implementacija interaktivnih uzoraka (poput gumba koji sadrži input) često dovodi do neispravne HTML semantike, slomljene navigacije tipkovnicom i zbunjivanja čitača zaslona. To vas prisiljava da iznova izmišljate upravljanje fokusom i ARIA podršku.
Good example
| 1 | // Good: Offload complexity to a library like Radix UI |
| 2 | import * as Dialog from '@radix-ui/react-dialog'; |
| 3 |
|
| 4 | const SearchTrigger = () => ( |
| 5 | <Dialog.Root> |
| 6 | <Dialog.Trigger asChild> |
| 7 | <button type="button" className="search-placeholder"> |
| 8 | Click to search... |
| 9 | </button> |
| 10 | </Dialog.Trigger> |
| 11 | <Dialog.Portal> |
| 12 | <Dialog.Overlay /> |
| 13 | <Dialog.Content> |
| 14 | <input type="text" autoFocus placeholder="Search..." /> |
| 15 | <Dialog.Close>Close</Dialog.Close> |
| 16 | </Dialog.Content> |
| 17 | </Dialog.Portal> |
| 18 | </Dialog.Root> |
| 19 | ); |
Explanation (EN)
Using a headless library like Radix UI ensures that focus trapping, keyboard shortcuts (ESC to close), and ARIA attributes are handled correctly out of the box without changing your visual design.
Objašnjenje (HR)
Korištenje 'headless' biblioteke poput Radix UI osigurava da su hvatanje fokusa, prečaci na tipkovnici (ESC za zatvaranje) i ARIA atributi ispravno obrađeni bez utjecaja na vaš vizualni dizajn.
Notes (EN)
Common libraries include Radix UI, Headless UI, and React Aria. Use them for Modals, Popovers, Dropdowns, and Tabs.
Bilješke (HR)
Uobičajene biblioteke uključuju Radix UI, Headless UI i React Aria. Koristite ih za Modale, Popovere, Dropdown izbornike i Tabove.