Rules Hub
Coding Rules Library
Avoid triggering side effects on focus events
Do not trigger significant UI changes like opening modals on focus events to preserve keyboard navigation.
Bad example
| 1 | const SearchTrigger = ({ onOpen }: { onOpen: () => void }) => { |
| 2 | // BAD: Tabbing to this element triggers the action immediately, |
| 3 | // interrupting navigation and confusing screen reader users. |
| 4 | const handleFocus = (e: React.FocusEvent) => { |
| 5 | e.target.blur(); |
| 6 | onOpen(); |
| 7 | }; |
| 8 |
|
| 9 | return ( |
| 10 | <input |
| 11 | type="text" |
| 12 | readOnly |
| 13 | placeholder="Search..." |
| 14 | onFocus={handleFocus} |
| 15 | /> |
| 16 | ); |
| 17 | }; |
Explanation (EN)
Attaching action logic to `onFocus` forces the action to trigger merely by navigating to the element (e.g., via Tab). Immediately calling `blur()` further degrades accessibility by removing the focus indicator and preventing screen readers from announcing the element.
Objašnjenje (HR)
Vezivanje logike akcije na `onFocus` prisiljava izvršavanje radnje samim navigiranjem na element (npr. tipkom Tab). Trenutno pozivanje `blur()` dodatno narušava pristupačnost uklanjanjem indikatora fokusa i sprječavanjem čitača ekrana da najave element.
Good example
| 1 | const SearchTrigger = ({ onOpen }: { onOpen: () => void }) => { |
| 2 | // GOOD: Use a button for interactions. It handles focus natively |
| 3 | // and only triggers the action on explicit activation (Click/Enter). |
| 4 | return ( |
| 5 | <button |
| 6 | type="button" |
| 7 | onClick={onOpen} |
| 8 | className="search-trigger-input-style" |
| 9 | > |
| 10 | Search... |
| 11 | </button> |
| 12 | ); |
| 13 | }; |
Explanation (EN)
By using a semantic `<button>`, the element receives focus normally (allowing the user to perceive it) and triggers the action only upon explicit user intent (click or keyboard activation). This respects the separation between navigation and activation.
Objašnjenje (HR)
Korištenjem semantičkog `<button>` elementa, fokus funkcionira normalno (omogućujući korisniku da uoči element), a radnja se pokreće samo na eksplicitnu namjeru korisnika (klik ili aktivacija tipkovnicom). Time se poštuje razdvajanje navigacije i aktivacije.