Skip to content

lint/a11y: Prefer native element rule incorrectly suggests <output> instead of role="status" for loading indicators #9245

@PaalTB

Description

@PaalTB

Environment information

Details
  × The elements with this role can be changed to the following elements:
    <output>
  
    23 │         aria-live="polite"
    24 │         className="container mx-auto max-w-3xl px-4 py-6"
  > 25 │         role="status"
       │         ^^^^^^^^^^^^^
    26 │       >
    27 │         <span className="sr-only">Loading dashboard</span>
  
  i For examples and more information, see WAI-ARIA Roles
  

Checked 1 file in 6ms. No fixes applied.
Found 1 error.
check 

Environment

@biomejs/biome: 2.4.4
React + TSX

What happened?

lint/a11y/useSemanticElements currently suggests using <output> instead of a <div role="status"> for status messages such as loading indicators.

This conflicts with ARIA guidance to:

  • Use native HTML elements when they match the needed semantics, but reserve <output> for calculation results / form-related output, not generic status messages.
  • A generic “Loading dashboard…” indicator is a status message and is not the result of a calculation or form interaction.
  • ARIA’s own guidance is “prefer native semantics when they fit; otherwise use roles”, not “replace all role="status" with <output>”.

In other words, <output> is not the correct replacement for every role="status".

Here is a similar discussion on sonarsource

Minimal repro

<div role="status" aria-busy="true" aria-live="polite">
  <span className="sr-only">Loading dashboard</span>
  <Skeleton className="h-8 w-52 rounded-md" />
</div>

Expected result

Should not suggest <output> for a generic status message like a loading indicator.

The rule should either:

  • Only suggest <output> when the element clearly represents the result of a calculation or form output, or
  • Provide a configuration option to disable this specific suggestion.

Suggested change

Adjust the rule (likely useSemanticElements or related a11y rule) so that:

  • It does not recommend as a blanket replacement for role="status".
  • It considers context (e.g., form association, for/name attributes, calculator-like UI) before recommending <output>.

Alternatively, downgrade this to a weaker recommendation or allow opting out via rule configuration.

Code of Conduct

  • I agree to follow Biome's Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Labels

    S-Needs triageStatus: this issue needs to be triaged

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions