# `react-doctor/prefer-tag-over-role`

Replace role with the semantic HTML element when one exists.

- **Category:** Accessibility
- **Severity:** warn
- **Source:** oxlint-plugin-react-doctor
- **Framework:** global
- **Enabled when:** always
- **Documentation:** <https://oxc.rs/docs/guide/usage/linter/rules/jsx_a11y/prefer-tag-over-role>

## Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Fires only on a generic `<div>` or `<span>` (after JSX-element-type resolution) that carries a static `role` string which maps to at least one built-in HTML element with that implicit ARIA role — e.g. `<div role="button">`, `<span role="navigation">`, `<div role="list">`. Roles with no semantic equivalent (`role="unknown"`, `role="tablist"`) and roles applied to non-generic tags (`<header role="banner">`, `<ul role="list">`) never fire. False positive / non-trigger: a dynamically computed role like `role={someVar}` or `role={cond ? "button" : "link"}` is skipped because the static check can't read a non-literal value, so don't expect those to be flagged.

## Fix prompt

Use this once validation confirms the diagnostic is real.

Swap the generic element for the native tag that carries the role implicitly and drop the now-redundant `role`: `<div role="button">` becomes `<button>`, `<span role="navigation">` becomes `<nav>`. When a role maps to multiple tags the rule suggests only the first match in its internal table, so `<div role="list">` becomes `<menu>` (not `<ul>`) — review the suggestion and substitute the contextually correct element if another fits better. Native elements bring built-in keyboard, focus, and semantics that a role alone does not, so reach for the real element rather than reintroducing ARIA. See https://oxc.rs/docs/guide/usage/linter/rules/jsx_a11y/prefer-tag-over-role