Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Give click-activated elements cursor: pointer
Make controls visibly and semantically interactive; follow the cursor convention and prefer native buttons or links.
Bad example
| 1 | <div onClick={openModal}>Filter</div> |
| 2 | /* no cursor: pointer — doesn't look clickable */ |
Explanation (EN)
A custom click target can look like static content and lack the native control behavior.
Objašnjenje (HR)
Prilagođeni klikabilni element može izgledati kao statičan sadržaj i nemati ponašanje nativne kontrole.
Good example
| 1 | .filter__label { |
| 2 | cursor: pointer; /* signals it's clickable */ |
| 3 | } |
| 4 | /* better still: render it as a real <button> */ |
Explanation (EN)
Add cursor: pointer to the clickable element (and ideally use a real <button> for semantics/keyboard support).
Objašnjenje (HR)
Dodaj cursor: pointer na klikabilan element (a idealno ga renderiraj kao pravi <button> zbog semantike i tipkovnice).
Notes (EN)
Use semantic buttons/links and the project's cursor convention to make an interactive control discoverable across pointer and keyboard input.
Exceptions / Tradeoffs (EN)
A pointer cursor alone does not add keyboard access, role, focus behavior or an accessible name to a div. Native button cursors can follow the platform convention.