Use valid anchors JS-0739
Anti-pattern
Minor
20 days ago
—
a year old
The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md
41 </div>
42 <input class="rounded-lg bg-neutral-300 dark:bg-neutral-500 px-2 py-1.5 transition ease-in-out mx-2 my-3 enabled:dark:hover:bg-neutral-400 enabled:dark:focus:bg-neutral-400 block text-xl outline-none cursor-pointer" type="submit" value="Sign In" />
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"/>The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md
20 <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-10 w-2/3 lg:w-1/3 mx-auto pt-10 pb-10">
21 <Link href="/game-info/enemy-stats">
22 <div className="transition ease-in-out rounded-lg rounded-lg border-4 border-zinc-600 bg-zinc-300 dark:border-zinc-500 dark:bg-zinc-800 dark:hover:bg-zinc-700 hover:scale-105 hover:bg-zinc-400 p-4 col-span-3 cursor-pointer">
23 <a className="text-2xl">Enemy Stats</a>24 <p className="text-lg">Learn about different enemies, and the best ways to defeat them.</p>
25 </div>
26 </Link>The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md
60 l.push((
61 <Link href={`/game-info/enemy-stats/${jdata.enemies[i].toLowerCase()}`} className="">
62 <div className="transition ease-in-out rounded-lg border-4 border-zinc-600 bg-zinc-300 dark:border-zinc-500 dark:bg-zinc-800 dark:hover:bg-zinc-700 hover:scale-105 hover:bg-zinc-400 p-2 grid grid-cols-3 gap-5 cursor-pointer">
63 <a className="text-4xl col-span-2 my-auto ml-6">{capitalizeFirstLetter(jdata.enemies[i])}</a>64 <img src={`/api/game-info/images/enemies/${jdata.enemies[i].toLowerCase()}`} className="" />
65 </div>
66 </Link>The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md
45 <div className="grid grid-rows-3 rounded-lg w-9/12 lg:w-1/3 border-4 border-zinc-400 mx-auto text-xl p-4 mb-24">
46 <a className="text-2xl p-1">Name: { jdata.name }</a>
47 <a className="text-2xl p-1">Health: { jdata.a.health } ({ (jdata.a.health / 100) * 100 }% of player's health)</a>
48 <a className="text-2xl p-1">Damage: { jdata.a.damage }</a>49 </div>
50 </main>
51 <Footer/>The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md
44 <main className="flex-grow w-full mx-auto min-h-full">
45 <div className="grid grid-rows-3 rounded-lg w-9/12 lg:w-1/3 border-4 border-zinc-400 mx-auto text-xl p-4 mb-24">
46 <a className="text-2xl p-1">Name: { jdata.name }</a>
47 <a className="text-2xl p-1">Health: { jdata.a.health } ({ (jdata.a.health / 100) * 100 }% of player's health)</a>48 <a className="text-2xl p-1">Damage: { jdata.a.damage }</a>
49 </div>
50 </main>
Description
JavaScript frameworks and libraries like React have made it very easy to add or remove functionality from standard HTML elements. This has led to anchors often being used in applications based on their appearance and function instead of what they represent. While it is possible, for example, to turn the <a> element into a fully functional <button> element with ARIA, the native user agent implementations of HTML elements are to be preferred over custom ARIA solutions.
It is recommended to use a valid anchor to avoid confusion while reading a code.
Here are a few scenarios where this issue will be raised:
You need a clickable element
In this scenario, use the onClick property. onClick is the standard handler used to detect whether an element has been pressed.
<a onClick={onClickHandler} />
<a href="#" onClick={onClickHandler} />
<button onClick={onClickHandler}>Authenticate</button>
You need to navigate to a different page via a hyperlink
If you need to visit a different page, use the a tag's href attribute to control the URL you will navigate to.
<a href="/dashboard">Dashboard</a>
<a href="/jobs">Career</a>
A UI interaction such as a button press must take place
Buttons are usually represented by the dedicated <button> tag, but can also make use of the <a> tag, without the href attribute. Removing this attribute will ensure that the page does not navigate elsewhere when the anchor element is clicked on. It is generally recommended to prefer using <button> and not <a> when defining buttons.
<a onMouseEnter={expand}>Table of Content</a>
<button onClick={playHandler}>Play</button>
Bad Practice
// Anchors should be a button
<a onClick={foo} />
<a href="#" onClick={foo} />
<a href={"#"} onClick={foo} />
<a href={`#`} onClick={foo} />
<a href="javascript:void(0)" onClick={foo} />
<a href={"javascript:void(0)"} onClick={foo} />
<a href={`javascript:void(0)`} onClick={foo} />
// Missing href attribute
<a />
<a href={undefined} />
<a href={null} />
// Invalid href attribute
<a href="#" />
<a href={"#"} />
<a href={`#`} />
<a href="javascript:void(0)" />
<a href={"javascript:void(0)"} />
<a href={`javascript:void(0)`} />
Recommended
<a href="https://github.com" />
<a href="#section" />
<a href="foo" />
<a href="/foo/bar" />
<a href={someValidPath} />
<a href="https://github.com" onClick={foo} />
<a href="#section" onClick={foo} />
<a href="foo" onClick={foo} />
<a href="/foo/bar" onClick={foo} />
<a href={someValidPath} onClick={foo} />