oxc-project/oxc · warning · OxcDiagnostic

The `scope` prop can only be used on `<th>` elements

Error message

The `scope` prop can only be used on `<th>` elements

What it means

This is the `jsx_a11y/scope` rule in oxlint. It fires when the `scope` attribute (found case-insensitively via `has_jsx_prop_ignore_case`) appears on any element other than `<th>` (element type resolved with `get_element_type` against the HTML tag set). `scope` communicates header-cell associations to screen readers and is only meaningful on `<th>`.

Source

Thrown at crates/oxc_linter/src/rules/jsx_a11y/scope.rs:15

use oxc_ast::{AstKind, ast::JSXAttributeItem};
use oxc_diagnostics::OxcDiagnostic;
use oxc_macros::declare_oxc_lint;
use oxc_span::Span;

use crate::{
    AstNode,
    context::LintContext,
    globals::HTML_TAG,
    rule::Rule,
    utils::{get_element_type, has_jsx_prop_ignore_case},
};

fn scope_diagnostic(span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn("The `scope` prop can only be used on `<th>` elements")
        .with_help("Remove the `scope` prop on elements other than `<th>`.")
        .with_label(span)
}

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

declare_oxc_lint!(
    /// ### What it does
    ///
    /// The scope prop should be used only on `<th>` elements.
    ///
    /// ### Why is this bad?
    ///
    /// The scope attribute makes table navigation much easier for screen reader users, provided that it is used correctly.
    /// Incorrectly used, scope can make table navigation much harder and less efficient.
    /// A screen reader operates under the assumption that a table has a header and that this header specifies a scope. Because of the way screen readers function, having an accurate header makes viewing a table far more accessible and more efficient for people who use the device.
    ///

View on GitHub (pinned to e1e7af627c)

Solutions

1. Remove the `scope` prop from the non-`<th>` element.
2. If it was meant to label a column/row group, move `scope` onto the corresponding `<th>`.
3. For complex tables, prefer explicit `headers`/`id` associations on real header cells.

Example fix

// before
<td scope="row">Q1</td>

// after
<th scope="row">Q1</th>

npx oxlint --jsx-a11y/scope src/

When it happens

Trigger: A JSX opening element with a `scope` prop where the resolved element type is anything other than `th` — typically `<td scope="col">`, `<div scope>`, or a custom element.

Common situations: Copy-pasting header-cell markup into data cells; trying to fix table navigation by adding `scope` to `<td>`; HTML-to-JSX conversions preserving invalid attributes; misunderstanding that `scope` fixes headers, not cells.

Related errors

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

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