Will It Vibe?@click on a non-interactive element without a role
Part of Documentation, UX & Accessibility, which counts for 15% of the overall score. When this check fires it deducts 8 points from that category, once per scan, no matter how many places it turns up.
What it detects
Putting @click or v-on:click on a div, span, or similar element with no role and no keyboard handler creates a control that keyboard and screen-reader users cannot reach or activate. Use a real <button>, or add role plus tabindex and a @keydown handler. The Vue rule pack has no accessibility checks of its own; this fills that specific gap for Vue templates the same way REACT-020 and SVELTE-012 already do for React and Svelte.
Why it matters
The Vue rule pack in this scanner has no accessibility checks of its own today, so a div or span wired up with @click and nothing else slips through entirely for Vue projects, even though the equivalent pattern is already caught for React and Svelte. A clickable element with no role and no keyboard handler is invisible to keyboard-only and screen-reader users: there is nothing to tab to and nothing for a screen reader to announce as interactive.
How to fix it
Replace the div/span with a real <button> wherever the design allows it; buttons are focusable and keyboard-operable for free. If it must stay a div for layout reasons, add role="button", tabindex="0", and a @keydown handler that activates on Enter and Space in addition to the existing @click.
The paid report includes a ready-to-paste prompt for your AI coding agent for every check it finds, pointed at the exact findings from your scan. See pricing
Does your repo trip this check?
Paste a GitHub URL or drop a project folder. Scans run in your browser and take seconds.
Scan your repo