Skip to content

Allow role="separator" as an interactive ARIA role #9483

Open
@MrGrigri

Description

@MrGrigri

Describe the bug

When creating an element with the role attribute with the value of "separator" and adding a tabindex attribute with the value of "0" and a key down event listener, I get the following errors: A11y: noninteractive element cannot have nonnegative tabIndex value and A11y: Non-interactive element <span> should not be assigned mouse or keyboard event listeners.. This is not correct according to the Mozilla Developer Network and W3C's Aria Authoring Practices guide.

The only fix is to ignore these issues with: <!-- svelte-ignore a11y-no-noninteractive-element-interactions --> and <!-- svelte-ignore a11y-no-noninteractive-tabindex -->

Reproduction

https://stackblitz.com/edit/vitejs-vite-pfawto?file=Separator.svelte

Logs

9:46:46 PM [vite-plugin-svelte] /home/projects/vitejs-vite-pfawto/src/lib/Separator.svelte:10:0 A11y: noninteractive element cannot have nonnegative tabIndex value
9:46:46 PM [vite-plugin-svelte] /home/projects/vitejs-vite-pfawto/src/lib/Separator.svelte:10:0 A11y: Non-interactive element <span> should not be assigned mouse or keyboard event listeners.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.9.2 - /usr/local/bin/pnpm
  npmPackages:
    svelte: ^4.2.3 => 4.2.3

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions