oxc-project/oxc · warning

'{prop_name}' is not a valid ARIA attribute.

Error message

'{prop_name}' is not a valid ARIA attribute.

What it means

Diagnostic from oxlint's jsx-a11y aria-props rule. Any JSX attribute whose name starts with `aria-` must be one of the WAI-ARIA 1.1 states/properties; otherwise this diagnostic fires with the offending prop name. ARIA attributes are mostly typos (aria-labeledby for aria-labelledby, aria-activedescendant misspellings), and browsers plus assistive tech silently ignore invalid ones, so the accessible behavior you think you added does not exist. When a close match exists the help text suggests it, otherwise it links the W3C list.

Source

Thrown at crates/oxc_linter/src/rules/jsx_a11y/aria_props.rs:16

use cow_utils::CowUtils;
use oxc_ast::AstKind;
use oxc_diagnostics::OxcDiagnostic;
use oxc_macros::declare_oxc_lint;
use oxc_span::{GetSpan, Span};

use crate::{
    AstNode,
    context::LintContext,
    globals::is_valid_aria_property,
    rule::Rule,
    utils::{get_jsx_attribute_name, starts_with_ignore_case},
};

fn aria_props_diagnostic(span: Span, prop_name: &str, suggestion: Option<&str>) -> OxcDiagnostic {
    let mut err = OxcDiagnostic::warn(format!("'{prop_name}' is not a valid ARIA attribute."));

    if let Some(suggestion) = suggestion {
        err = err.with_help(format!("Did you mean '{suggestion}'?"));
    } else {
        err = err.with_help("You can find a list of valid ARIA attributes at https://www.w3.org/TR/wai-aria-1.1/#state_prop_def");
    }

    err.with_label(span)
}

#[derive(Debug, Default, Clone)]
pub struct AriaProps;

declare_oxc_lint!(
    /// ### What it does
    ///
    /// Enforces that elements do not use invalid ARIA attributes.
    ///

View on GitHub (pinned to e1e7af627c)

Solutions

1. Apply the suggested fix from the help text if present (e.g. aria-labeledby → aria-labelledby).
2. Check the name against the W3C list linked in the help text (w3.org/TR/wai-aria-1-1/#state_prop_def).
3. If the attribute belongs to a third-party component library rather than real ARIA, rename it or disable the rule for that line.

Example fix

// before
<div aria-labeledby="section-title" />

// after
<div aria-labelledby="section-title" />

oxlint --jsx-a11y-plugin src/ # aria-props flags unknown aria-* attributes

// if generating aria props dynamically, filter to the known set
const VALID_ARIA = new Set(['aria-label', 'aria-labelledby', /* ... */]);
const safeAria = (props: Record<string, unknown>) =>
  Object.fromEntries(Object.entries(props).filter(([k]) => !k.startsWith('aria-') || VALID_ARIA.has(k)));

When it happens

Trigger: A JSX attribute name beginning with `aria-` that is not in the valid-ARIA set checked via `is_valid_aria_property` — e.g. `<div aria-labeledby="title" />`, `<button aria-pressedd />`, `<input aria-decribedby="x" />`. Suggestion logic uses case-insensitive prefix matching, so `aria-LabeledBy`-style mistakes get a 'Did you mean' hint.

Common situations: Misspelled aria-labelledby/aria-describedby (the most duplicated props in codebases); copy-paste from bad blog examples; kebab/camel confusion with the React DOM property names (`aria-labelledBy`); custom `aria-*` data props invented for other libraries.

Related errors

• Missing value for `aria-label` attribute.
• Missing value for `aria-labelledby` attribute.
• ARIA used where native HTML could suffice.
• Missing `alt` attribute.
• Invalid `alt` value.

AI-assisted analysis of oxc-project/oxc@e1e7af627c (2026-08-20). Data as JSON: /api/errors/7e6ab854c01686bd. Report an issue: GitHub.