DeepSource
Dashboard Resources Pricing Discover Directory Log in

Run your first analysis.

Find thousands of code security and quality issues in your codebase, before they end up in production.

Start now

Spelunking-Studios / The-Caverns-Website

Prefer to accompany onClick with some elements JS-0746
Anti-pattern
Minor
20 days ago — 20 days old
Visible, non-interactive elements with click handlers must have at least one keyboard listener
pages/sign-in.js
43                                <div className="relative border-b-2 mx-2 my-6">
44                                    <span className="absolute -top-2.5 text-center w-full "><a className="dark:bg-zinc-700 px-2 py-1 rounded-lg">OR</a></span>
45                                </div>
46                                <div className="transition ease-in-out dark:bg-zinc-100 dark:hover:bg-zinc-400 mx-2 text-black py-1.5 rounded-lg text-xl flex grid-cols-2 gap-4 my-4 justify-center cursor-pointer" onClick={ ()=>setGoogleSignin(!googleSignin)}>47                                    <img src="/images/GoogleLogo.webp" className="w-7"/>
48                                    <p>Sign in with Google</p>
49                                </div>
Visible, non-interactive elements with click handlers must have at least one keyboard listener
pages/feedback.js
72                                <p className="text-lg transition ease-in-out duration-100 p-1 leading-loose hover:cursor-pointer select-none rounded-none" onClick={dropdownClick}>{category}</p>
73                                <ul className="grid grid-col-1 py-1 text-sm bg-zinc-300 dark:bg-zinc-600 rounded-b-lg pr-5 pl-3 dark:text-gray-200 dark:text-neutral-300 text-neutral-700 w-full max-h-32 overflow-y-auto mx-auto" aria-labelledby="dropdownMenu">
74                                    <p className="text-lg transition ease-in-out duration-100 p-1 hover:text-sky-500 dark:hover:text-sky-400 leading-loose hover:cursor-pointer" onClick={dropdownClickBug}>Bug</p>
75                                    <p className="text-lg transition ease-in-out duration-100 p-1 hover:text-sky-500 dark:hover:text-sky-400 leading-loose hover:cursor-pointer" onClick={dropdownClickSuggestion}>Suggestion</p>76                                </ul>
77                            </div>
78                        </fieldset>
Visible, non-interactive elements with click handlers must have at least one keyboard listener
pages/feedback.js
71                            <div id="dropdown" class={`relative ${dropdownStyles.dropdown} bg-zinc-300 dark:bg-zinc-600 rounded-lg px-3 dark:text-gray-200 dark:text-zinc-300 text-neutral-700 col-span-2 lg:col-span-3 p-0`} active={"" + dropdownActive}>
72                                <p className="text-lg transition ease-in-out duration-100 p-1 leading-loose hover:cursor-pointer select-none rounded-none" onClick={dropdownClick}>{category}</p>
73                                <ul className="grid grid-col-1 py-1 text-sm bg-zinc-300 dark:bg-zinc-600 rounded-b-lg pr-5 pl-3 dark:text-gray-200 dark:text-neutral-300 text-neutral-700 w-full max-h-32 overflow-y-auto mx-auto" aria-labelledby="dropdownMenu">
74                                    <p className="text-lg transition ease-in-out duration-100 p-1 hover:text-sky-500 dark:hover:text-sky-400 leading-loose hover:cursor-pointer" onClick={dropdownClickBug}>Bug</p>75                                    <p className="text-lg transition ease-in-out duration-100 p-1 hover:text-sky-500 dark:hover:text-sky-400 leading-loose hover:cursor-pointer" onClick={dropdownClickSuggestion}>Suggestion</p>
76                                </ul>
77                            </div>
Visible, non-interactive elements with click handlers must have at least one keyboard listener
pages/feedback.js
69                        <fieldset className="grid grid-cols-3 lg:grid-cols-4 p-2 mx-auto">
70                            <label className="text-xl lg:text-2xl my-auto p-1">Category</label>
71                            <div id="dropdown" class={`relative ${dropdownStyles.dropdown} bg-zinc-300 dark:bg-zinc-600 rounded-lg px-3 dark:text-gray-200 dark:text-zinc-300 text-neutral-700 col-span-2 lg:col-span-3 p-0`} active={"" + dropdownActive}>
72                                <p className="text-lg transition ease-in-out duration-100 p-1 leading-loose hover:cursor-pointer select-none rounded-none" onClick={dropdownClick}>{category}</p>73                                <ul className="grid grid-col-1 py-1 text-sm bg-zinc-300 dark:bg-zinc-600 rounded-b-lg pr-5 pl-3 dark:text-gray-200 dark:text-neutral-300 text-neutral-700 w-full max-h-32 overflow-y-auto mx-auto" aria-labelledby="dropdownMenu">
74                                    <p className="text-lg transition ease-in-out duration-100 p-1 hover:text-sky-500 dark:hover:text-sky-400 leading-loose hover:cursor-pointer" onClick={dropdownClickBug}>Bug</p>
75                                    <p className="text-lg transition ease-in-out duration-100 p-1 hover:text-sky-500 dark:hover:text-sky-400 leading-loose hover:cursor-pointer" onClick={dropdownClickSuggestion}>Suggestion</p>