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 檢視

維護者通常 12 天內回覆

還沒有人認領這個 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
30 天內沒有已合併 PR

環境準備

從這裡開始

  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 摘要。