Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

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

未关闭 适合新手
  • 哪里不对？
#5,146 2 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 17 天内回复

还没有人认领这个 Issue。

评估

难度
2/5
预计耗时
1-3 小时
新手友好度
72/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
react-native, typescript
领域
accessibility, frontend

调研方向

先阅读 Chip 的实现，并追踪 props 如何传递到 TouchableRipple 及其 Pressable 节点；issue 指出，aria-checked 在外层 Surface 的 spread 处丢失。检查已选中 Chip 渲染后的 Web DOM，并在完成时确认 aria-checked 到达了交互节点。issue 没有提到测试文件，因此先找到现有的 Chip 无障碍测试。

由索引模型根据 Issue 内容生成。

描述

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.
主要语言
TypeScript
星标
14.5k
派生
2.3k
平均合并
13 天 16 小时
30 天内合并 PR
5

环境准备

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

callstack/react-native-paper 的其他 Issue

查看 callstack/react-native-paper 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。