Skip to content

Chip: on the web every Chip sets aria-selected on role button #5180

Open

Description

@Doberjohn

Current behaviour

On the web, every Chip renders <button role="button" aria-selected="true|false"> (Chip.tsx passes aria-selected={selected}, and selected defaults to false). aria-selected is not allowed on role button, so screen readers ignore the selected state, and axe-core reports aria-allowed-attr (critical): "ARIA attribute is not allowed: aria-selected". The example app shows it on the Chip, Card, Floating Action Button, List.Section and Tooltip screens.

Expected behaviour

On the web a Chip used as a toggle exposes its state with aria-pressed, the state role button supports, and only when the app passes selected, so a plain action chip isn't announced as a toggle. Native keeps announcing the selected state as it does today. axe reports no aria-allowed-attr violation.

How to reproduce?

  1. Run the example app on the web from main (yarn install, then npx expo start --web in example/).
  2. Open the Chip example (/chip).
  3. Run axe-core on the page (for example with the axe DevTools extension).

Preview

What have you tried so far?

Your Environment

software version
react-native-paper main (8cb344b)
browser Chromium 153
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions