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>

<div className="card" onClick={open}>

<div className="absolute inset-x-0 top-0" onClick={open}>

<div aria-hidden="false" onClick={open}>

Not flagged

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

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

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

<div className="fixed inset-0 bg-black/60" onClick={onCancel} />

<div onClick={close} aria-hidden="true" />

<div role="presentation" onClick={close}>

<div id="certDetailOverlay" class="hidden" onclick="closeCertDetail()"></div>

<div className="modal-backdrop" onClick={onClose} />

Pattern

<div(?![^>]{0,600}?(?:aria-hidden\s*=\s*["{]?\s*["']?true|role\s*=\s*["{]?\s*["']?(?:presentation|none)\b|(?<![\w-])(?:class|className|id)\s*=[^>]{0,400}?(?:[Bb]ackdrop|[Oo]verlay|[Ss]crim|inset-0)))[^>]{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*\})