HighFile-scopeJavaScript / TypeScript Plug & play

Avoid using anchor tags as buttons

Detect cases where <a> elements are used as buttons. Anchor tags should be used for navigation, while actions should be assigned to <button> elements to maintain accessibility and expected behavior.

Add to Mesrai Open workspace

Why this matters

Anchor tags (<a>) are intended for navigation, not actions. Using them as buttons can cause accessibility issues and unexpected behavior. Use <button> for actions to ensure proper functionality and accessibility.

Bad vs. good

Side-by-side examples engineers can pattern-match during review.

Avoid

const MyComponent = () => {
    return <>
        <a href="javascript:void(0)" onClick={foo}>Perform action</a>
        <a href="#" onClick={foo}>Perform action</a>
        <a onClick={foo}>Perform action</a>
    </>;
};

Prefer

const MyComponent = () => {
    return <>
      <button onClick={foo}>Perform action</button>
      <a href="#section" onClick={foo}>Perform action</a>
    </>;
};

More snippets

Bad

const MyComponent = () => {
    return <>
        <a href="javascript:void(0)" onClick={foo}>Perform action</a>
        <a href="#" onClick={foo}>Perform action</a>
        <a onClick={foo}>Perform action</a>
    </>;
};

Good

const MyComponent = () => {
    return <>
      <button onClick={foo}>Perform action</button>
      <a href="#section" onClick={foo}>Perform action</a>
    </>;
};

Related rules

From the same buckets as this rule.

High
Ensure heading elements have meaningful content
Verify that heading elements contain meaningful content. Headings are used for structure and navigation, so empty or generic headings negatively impact accessibility and usability.
accessibility-a11y
High
Interactive DOM elements should not have non-interactive ARIA roles
Ensure that interactive DOM elements have appropriate ARIA roles. Incorrect roles can mislead assistive technologies, affecting accessibility.
accessibility-a11y
High
Use appropriate tabIndex values
Ensure tabIndex values are either 0 or -1. Positive tabIndex values disrupt the natural tab order and can create accessibility issues.
accessibility-a11y

Bad vs. good

Side-by-side examples engineers can pattern-match during review.

Avoid

const MyComponent = () => {
    return <>
        <a href="javascript:void(0)" onClick={foo}>Perform action</a>
        <a href="#" onClick={foo}>Perform action</a>
        <a onClick={foo}>Perform action</a>
    </>;
};

Prefer

const MyComponent = () => {
    return <>
      <button onClick={foo}>Perform action</button>
      <a href="#section" onClick={foo}>Perform action</a>
    </>;
};

More snippets

Bad

const MyComponent = () => {
    return <>
        <a href="javascript:void(0)" onClick={foo}>Perform action</a>
        <a href="#" onClick={foo}>Perform action</a>
        <a onClick={foo}>Perform action</a>
    </>;
};

Good

const MyComponent = () => {
    return <>
      <button onClick={foo}>Perform action</button>
      <a href="#section" onClick={foo}>Perform action</a>
    </>;
};

Related rules

From the same buckets as this rule.

High

Ensure heading elements have meaningful content

Verify that heading elements contain meaningful content. Headings are used for structure and navigation, so empty or generic headings negatively impact accessibility and usability.

accessibility-a11y

High

Interactive DOM elements should not have non-interactive ARIA roles

Ensure that interactive DOM elements have appropriate ARIA roles. Incorrect roles can mislead assistive technologies, affecting accessibility.

accessibility-a11y

High

Use appropriate tabIndex values

Ensure tabIndex values are either 0 or -1. Positive tabIndex values disrupt the natural tab order and can create accessibility issues.

accessibility-a11y