Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Forward supported ARIA attributes through component wrappers
When a wrapper accepts ARIA attributes, pass them to the actual interactive DOM element and assert the resulting attributes in a rendered test; accepting a JSX prop alone does not expose it to assistive technology.
Bad example
| 1 | import type { AriaAttributes, ReactNode } from 'react'; |
| 2 | type LinkProps = AriaAttributes & { href: string; children: ReactNode }; |
| 3 | export function NavLink({ href, children }: LinkProps) { |
| 4 | return <a href={href}>{children}</a>; |
| 5 | } |
Explanation (EN)
The public type accepts aria-current, but destructuring discards it before rendering the link.
Objašnjenje (HR)
Tip prihvaća aria-current, ali ga komponenta odbaci prije iscrtavanja poveznice.
Good example
| 1 | import type { AriaAttributes, ReactNode } from 'react'; |
| 2 | type LinkProps = AriaAttributes & { href: string; children: ReactNode }; |
| 3 | export function NavLink({ href, children, ...aria }: LinkProps) { |
| 4 | return <a href={href} {...aria}>{children}</a>; |
| 5 | } |
Explanation (EN)
The wrapper forwards the supported accessibility attributes to the link that users interact with.
Objašnjenje (HR)
Omotač prosljeđuje podržane atribute pristupačnosti stvarnoj poveznici.
Notes (EN)
Applies to links, buttons, menu triggers and similar wrappers. Verify aria-current or aria-expanded on the rendered control rather than inferring semantics from its color. Explicitly type the supported attributes and keep internal business props off DOM nodes.
Bilješke (HR)
Primjenjuje se na omotače poveznica, gumba i okidača izbornika. Provjeri aria-current ili aria-expanded na iscrtanoj kontroli, umjesto zaključivanja prema boji. Jasno tipiziraj podržane atribute i ne šalji interne poslovne propove na DOM.
Exceptions / Tradeoffs (EN)
A wrapper may intentionally own an ARIA state; in that case derive it internally and omit that attribute from caller-controlled props. Forwarding every arbitrary prop is not required.
Iznimke / Tradeoffi (HR)
Omotač može sam upravljati ARIA stanjem; tada ga izvodi interno i ne izlaže taj atribut pozivatelju. Nije potrebno prosljeđivati svaki proizvoljni prop.