Skip to content

A11y warning role="switch" ... must have "aria-checked" is a false positive for native input elements #7837

Closed
@metonym

Description

@metonym

Describe the bug

Svelte v3.50.0 added additional accessibility checks in #5852.

role-has-required-aria-props now emits the following warning:

A11y: Elements with the ARIA role "switch" must have the following attributes defined: "aria-checked"

<input role="switch" type="checkbox" checked />

Per MDN, ARIA attributes are not required if using the native input element with type="checkbox" or type="radio" because it has its own semantics (i.e., checked).

As a result, the a11y warning for the above use case is a false positive.

I encountered this in carbon-design-system/carbon-components-svelte#1480. The workaround is to ignore the warning.

Reproduction

https://svelte.dev/repl/ea3cff693d6f4b8caa80e651cbaf1eae?version=3.50.0

Logs

No response

System Info

System:
  OS: macOS 12.1
  CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
  Memory: 20.60 MB / 16.00 GB
  Shell: 5.8 - /bin/zsh
Binaries:
  Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
  Yarn: 1.22.19 - /usr/local/bin/yarn
  npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
Browsers:
  Chrome: 105.0.5195.52
  Firefox: 103.0
  Safari: 15.2
npmPackages:
  rollup: ^1.27.14 => 1.27.14

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions