Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

Chip: accessibilityState passed by caller is discarded; aria-checked is never forwarded to the real rendered node

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#5,146 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 17 jours

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
72/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
react-native, typescript
Domaine
accessibility, frontend

Piste de recherche

Commence par lire l’implémentation de Chip et suivre comment les props arrivent jusqu’à TouchableRipple et son nœud Pressable ; l’issue indique que aria-checked est perdu lors de la propagation des props du Surface externe. Vérifie le DOM web rendu pour un Chip sélectionné et confirme à la fin que aria-checked atteint le nœud interactif. L’issue ne mentionne aucun fichier de test ; commence donc par localiser les tests d’accessibilité existants de Chip.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

Description

Chip destructures selected/disabled/etc. and computes its own accessibilityState={{ selected, disabled }} internally, but any accessibilityState (or aria-checked) a caller passes in falls into ...rest and is spread onto the outer, non-interactive Surface — never reaching the interactive TouchableRipple/Pressable node.

This is a real accessibility gap on web: react-native-web does not derive aria-* attributes from a native accessibilityState object at all (confirmed via react-native-web's forwardedProps/index.js allowlist, which only forwards a literal aria-checked prop straight to the DOM). So even though Chip's own internally-computed accessibilityState happens to reach the real Pressable on native (where RN's Pressable merges accessibilityState.checked itself), there is no equivalent path on web, and Chip never sets aria-checked itself.

Net effect: a Chip rendered as part of a custom radio/checkbox group (e.g. a chip-based single/multi-select control) reports checked: false in the web accessibility tree for every option, including the selected one — a screen reader user on web cannot tell which option is selected.

Reproduction

  1. Render a Chip with selected={true} inside PaperProvider, on web (react-native-web).
  2. Inspect the rendered DOM / accessibility tree.
  3. No aria-checked attribute is present anywhere in the output.

Expected behavior

Chip should forward a literal aria-checked prop (distinct from accessibilityState) through to the real interactive node it renders (TouchableRipple → Pressable), so consumers building a custom selectable-chip group can make selection state screen-reader-visible on web.

Additional context

  • Verified the in-flight 6.0.0 refactor (commit 466d9c608d2cb3dead7831b64c925f4523419b0e, PR #5005, "refactor: migrate accessibility props to aria props") does not fix this: it adds role/aria-label/aria-selected/aria-disabled forwarding to TouchableRipple, but Chip's own vocabulary there is selected/aria-selected, not checked/aria-checked — an unrecognized aria-checked is still spread via ...rest onto the non-interactive Surface in that version too.
  • react-native-paper version: 5.15.3 (latest stable at time of filing).
  • We've applied a local patch-package patch forwarding aria-checked through Chip → TouchableRipple → Pressable as a workaround; happy to share the patch/diff if useful upstream.
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.3k
Merge moyen
13 j 16 h
PR mergées (30 j)
5

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de callstack/react-native-paper

Toutes les issues de callstack/react-native-paper

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.