JS-0739 @ 19c1dd6 • Counselllor / Counsellor-Web

Run summary

11 days ago

9288cae..19c1dd6

15 s

Use valid anchors JS-0739

Anti-pattern

Minor

6 occurrences in this check

Anchor used as a button. Anchors are primarily expected to navigate. Use the button element instead. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md

src/components/Navbar/Navbar.jsx

111                <a href="#"/>
112              </li>
113              <li>
114                <a href="#" onClick={handleSignOut}>115                  Log Out
116                </a>
117              </li>

The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid 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

src/components/Navbar/Navbar.jsx

108                <a href="#">Career Support</a>
109              </li>
110              <li className="dot">
111                <a href="#"/>112              </li>
113              <li>
114                <a href="#" onClick={handleSignOut}>

src/components/Navbar/Navbar.jsx

105                <a href="#">Courses</a>
106              </li>
107              <li>
108                <a href="#">Career Support</a>109              </li>
110              <li className="dot">
111                <a href="#"/>

src/components/Navbar/Navbar.jsx

102                <a href="#">Jobs</a>
103              </li>
104              <li>
105                <a href="#">Courses</a>106              </li>
107              <li>
108                <a href="#">Career Support</a>

src/components/Navbar/Navbar.jsx

 99                <a href="#">Top Universities</a>
100              </li>
101              <li>
102                <a href="#">Jobs</a>103              </li>
104              <li>
105                <a href="#">Courses</a>

src/components/Navbar/Navbar.jsx

 96          <div className={`menu ${menuOpen ? "show" : ""}`}>
 97            <ul>
 98              <li>
 99                <a href="#">Top Universities</a>100              </li>
101              <li>
102                <a href="#">Jobs</a>

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)`} />

<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} />

Counselllor / Counsellor-Web

Bad Practice

Recommended