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

Open Beginner friendly
  • Is something wrong?
#5,180 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
84/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react-native, typescript
Domain
accessibility, frontend

Research direction

Start in Chip.tsx, where the issue says aria-selected is passed and selected defaults to false; compare the web behavior with native before changing it. Check the Chip example at /chip and run axe-core on the web app to confirm the violation is gone and a selected toggle exposes its state. Done when plain action chips omit toggle state and selected web chips use the supported button state.

Written by the indexing model from the issue text.

Description

Accessibility bug web
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
Dominant language
TypeScript
Stars
14.5k
Forks
2.3k
Avg merge
2d 12h
Merged PRs (30d)
22

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from callstack/react-native-paper

All issues in callstack/react-native-paper

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.