VBC-010: div-onclick-non-semantic

error

Category: ux-dx
Analysis: Regex (line by line)
File types: .html, .js, .ts, .tsx, .jsx, .astro
Scope: source code only, ignoring anything inside strings and comments
Tags: accessibility html

What it reports

Clickable <div> with onclick handler at line {line}. Use <button> or <a> for interactive elements. Non-semantic clickable divs are invisible to keyboard navigation and screen readers, excluding users with disabilities.

Flagged

<div onClick={handleClick}>Save</div>

Not flagged

<button onClick={handleClick}>Save</button>

<div className="row" onClick={(e) => e.stopPropagation()}>

<div onClick={e => e.preventDefault()}>

Pattern

<div[^>]{0,2000}\s(onclick|onClick)=(?!\{?\s*\(?\s*(?:e|ev|evt|event|_e)\s*\)?\s*=>\s*\{?\s*(?:e|ev|evt|event|_e)\.(?:stopPropagation|preventDefault)\(\)\s*\}?\s*\})