{"record":{"id":"e8b2fac2d3cc817a","repo":"oxc-project/oxc","slug":"use-of-incorrect-href-for-the-a-element","errorCode":null,"errorMessage":"Use of incorrect `href` for the 'a' element.","messagePattern":"Use of incorrect `href` for the 'a' element\\.","errorType":"validation","errorClass":null,"httpStatus":null,"severity":"error","filePath":"crates/oxc_linter/src/rules/jsx_a11y/anchor_is_valid.rs","lineNumber":36,"sourceCode":"    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>);\n\n#[derive(Debug, Default, Clone, JsonSchema, Deserialize)]\n#[serde(rename_all = \"camelCase\", default, deny_unknown_fields)]\npub struct AnchorIsValidConfig {\n    /// Custom components to treat as anchor elements.\n    components: Vec<CompactStr>,","sourceCodeStart":18,"sourceCodeEnd":54,"githubUrl":"https://github.com/oxc-project/oxc/blob/1f902a69625cd14e6d8dc58feca94da099d2d251/crates/oxc_linter/src/rules/jsx_a11y/anchor_is_valid.rs#L18-L54","documentation":"This is the oxlint `jsx-a11y/anchor-is-valid` diagnostic for anchors whose `href` is present but worthless as a navigation target. Values like `href=\"#\"`, `href=\"javascript:void(0)\"`, `href=\"javascript:;\"`, or nullish expressions (`href={null}`, `href={undefined}`) make the link a fake: it looks focusable and is announced as a link, but keyboard middle-click, crawlers, and no-JS users get nothing. The rule classifies these as `Invalid` hrefs and suggests a correct `href` (or a `button` when the anchor only runs logic).","triggerScenarios":"A JSX element resolves to `a` with an `href` attribute whose value is a `javascript:` URL, a bare `#`, or an expression evaluating to nullish — the rule's own documented invalid examples include `<a href={null}>`, `<a href>`, and `<a href=\"javascript:void(0)\">`.","commonSituations":"Legacy click-handler patterns from pre-hook React tutorials; SPA code suppressing default navigation with `href=\"#\"`; conditionally computed hrefs that fall back to `undefined`.","solutions":["If the element performs an action, replace it with `<button onClick={handler}>`.","If it navigates, supply a genuine URL: `<a href=\"/items/42\">View item</a>`.","Fix conditional hrefs to always render a valid target: `href={item ? `/items/${item.id}` : \"/items\"}`.","Never use `javascript:` URLs; they break CSP, screen readers, and open-in-new-tab."],"exampleFix":"// before\n<a href=\"#\" onClick={save}>Save</a>\n<a href=\"javascript:void(0)\" onClick={save}>Save</a>\n\n// after\n<button onClick={save}>Save</button>\n// or when it is genuinely a link:\n<a href=\"/drafts\" onClick={save}>Save</a>","handlingStrategy":"validation","validationCode":"// Never render a fake href: branch on target availability\ntype MaybeLinkProps = { href?: string; onClick: () => void; children: React.ReactNode };\nexport function MaybeLink({ href, onClick, children }: MaybeLinkProps) {\n  return href ? <a href={href} onClick={onClick}>{children}</a> : <button onClick={onClick}>{children}</button>;\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Ban `javascript:` and bare `#` hrefs in review; they also break CSP and middle-click.","Fix conditional hrefs to always fall back to a real route rather than undefined.","Prefer buttons for pure handlers so the semantic element matches the behavior.","Run anchor-is-valid in CI to catch regressions during refactors."],"tags":["jsx-a11y","accessibility","anchor","href","react","lint","oxlint"],"backgroundTag":"jsx-a11y-anchor-is-valid","analyzedSha":"1f902a69625cd14e6d8dc58feca94da099d2d251","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}