{"record":{"id":"ade2d30cda441264","repo":"oxc-project/oxc","slug":"missing-href-attribute-for-the-a-element","errorCode":null,"errorMessage":"Missing `href` attribute for the `a` element.","messagePattern":"Missing `href` attribute for the `a` element\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"error","filePath":"crates/oxc_linter/src/rules/jsx_a11y/anchor_is_valid.rs","lineNumber":30,"sourceCode":"use oxc_macros::declare_oxc_lint;\nuse oxc_span::{GetSpan, Span};\nuse oxc_str::CompactStr;\n\nuse crate::{\n    AstNode,\n    context::LintContext,\n    rule::{DefaultRuleConfig, Rule},\n    utils::{get_element_type, has_jsx_prop_ignore_case},\n};\n\nfn missing_href_attribute<S: AsRef<str>>(span: Span, valid_attrs: &[S]) -> OxcDiagnostic {\n    let help = if valid_attrs.len() == 1 {\n        format!(\"Provide the `{}` attribute for the `a` element.\", valid_attrs[0].as_ref())\n    } else {\n        let list = valid_attrs.iter().map(|a| format!(\"`{}`\", a.as_ref())).join(\", \");\n        format!(\"Provide one of these attributes for the `a` element: {list}\")\n    };\n    OxcDiagnostic::warn(\"Missing `href` attribute for the `a` element.\")\n        .with_help(help)\n        .with_label(span)\n}\n\nfn incorrect_href(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"Use of incorrect `href` for the 'a' element.\")\n        .with_help(\"Provide a correct `href` for the `a` element.\")\n        .with_label(span)\n}\n\nfn cant_be_anchor(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"The `a` element has `href` and `onClick`.\")\n        .with_help(\"Use a `button` element instead of an `a` element.\")\n        .with_label(span)\n}\n\n#[derive(Debug, Default, Clone, Deserialize)]\npub struct AnchorIsValid(Box<AnchorIsValidConfig>);","sourceCodeStart":12,"sourceCodeEnd":48,"githubUrl":"https://github.com/oxc-project/oxc/blob/1f902a69625cd14e6d8dc58feca94da099d2d251/crates/oxc_linter/src/rules/jsx_a11y/anchor_is_valid.rs#L12-L48","documentation":"This is the oxlint `jsx-a11y/anchor-is-valid` diagnostic for anchors with no navigable `href`. Per HTML semantics an `<a>` is a hyperlink between documents/locations; without `href` (or one of the configured valid attributes) it is not focusable or announced as a link, and crawlers cannot follow it. The help text lists the accepted attribute names, which default to `href` and can be widened via the rule's `specialLink`-style config for router `Link` components.","triggerScenarios":"A JSX element resolves to `a` (or a configured component) with no attribute in the valid set — typically `<a onClick={foo}>` with no `href`. Elements whose props come from a spread are not reported (the attribute cannot be proven absent). Aspects are configurable (`noHref`, `invalidHref`, `preferButton`).","commonSituations":"Using `<a>` as a click target instead of `<button>`; router links where the attribute is `to` instead of `href` and the component isn't configured; drag-handle or tab UIs built on anchors.","solutions":["If it navigates, add the real target: `<a href=\"/pricing\">Pricing</a>`.","If it only runs a handler, use a button: `<button onClick={foo}>Perform action</button>`.","For custom link components with a different attribute name, list it in the rule config so `<Link to=\"...\">` is accepted.","Give the anchor a real `href` even when intercepting clicks client-side."],"exampleFix":"// before\n<a onClick={openMenu}>Open menu</a>\n\n// after\n<button onClick={openMenu}>Open menu</button>\n// or, when it really navigates:\n<a href=\"/menu\" onClick={handleMenuClick}>Open menu</a>","handlingStrategy":"validation","validationCode":"// Guard at authoring time: only render <a> when a target exists\nconst Anchor = ({ href, children }: { href?: string; children: React.ReactNode }) =>\n  href ? <a href={href}>{children}</a> : <button>{children}</button>;","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Use `<button>` for actions and `<a href>` for navigation — the rule's core heuristic.","If you intercept navigation in JS, still render a real, crawlable href.","Configure the rule for router components so `Link to=\"...\"` is recognized as valid.","Note that spread-props anchors are skipped by the rule — keep href explicit anyway."],"tags":["jsx-a11y","accessibility","anchor","href","react","lint","oxlint"],"backgroundTag":"jsx-a11y-anchor-is-valid","analyzedSha":"1f902a69625cd14e6d8dc58feca94da099d2d251","analyzedAt":"2026-09-14T03:22:01.990Z","contentChangedAt":"2026-09-14T03:22:01.990Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}