Skip to content

linter: jsx_a11y/no-noninteractive-tabindex reports false positive on elements with role="listbox" #20855

@L4Ph

Description

@L4Ph

What version of Oxlint are you using?

1.57.0

What command did you run?

vp lint --fix

What does your .oxlintrc.json (or oxlint.config.ts) config file look like?

Since I'm using Vite+, this is just for reference.

{
  "$schema": "./node_modules/oxlint/configuration_schema.json",
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/no-noninteractive-tabindex": "warn"
  }
}

What happened?

no-noninteractive-tabindex warns when tabIndex={0} is used on a <div> with role="listbox", even though listbox is an interactive widget role per the WAI-ARIA specification.

The equivalent ESLint rule (eslint-plugin-jsx-a11y/no-noninteractive-tabindex) correctly recognizes listbox as interactive and does not warn.

Reproduction

<div
  role="listbox"
  aria-label="Layers"
  aria-multiselectable="true"
  tabIndex={0}
>
  <div role="option" aria-selected={false}>Item 1</div>
  <div role="option" aria-selected={true}>Item 2</div>
</div>

Expected behavior

No warning. role="listbox" is an interactive widget role — tabIndex={0} is required for keyboard focus per the WAI-ARIA Listbox pattern.

Actual behavior

! eslint-plugin-jsx-a11y(no-noninteractive-tabindex): `tabIndex` should only be declared on interactive elements.
     ,-[src/components/sidebar/LayerPanel.tsx:474:9]
 473 |         aria-activedescendant={activeLayerId ?? undefined}
 474 |         tabIndex={0}
     :         ^^^^^^^^^^^^
 475 |       >
     `----
  help: The `tabIndex` attribute should be removed.

References

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Priority

    None yet

    Effort

    None yet

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions