Chip: on the web every Chip sets aria-selected on role button
メンテナーはふだん 1 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 2/5
- 見積もり時間
- 1〜3時間
- 初心者へのやさしさ
- 84/100
- issue の種類
- バグ
- 明瞭さ
- 明確に書かれている
- 活発さ
- 活発
- 技術スタック
- react-native, typescript
調査の方向性
Chip.tsxから始めます。issueによると、ここではaria-selectedが渡され、selectedのデフォルト値はfalseです。変更する前に、Webとネイティブでの動作を比較してください。/chipのChipの例を確認し、Webアプリでaxe-coreを実行して、違反がなくなったことと、選択されたtoggleがその状態を公開することを確認してください。通常のアクションチップがtoggle状態を省略し、選択されたWebチップがサポートされているボタン状態を使うようになれば完了です。
索引モデルが issue の本文から書いたものです。
説明
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?
- Run the example app on the web from
main(yarn install, thennpx expo start --webinexample/). - Open the Chip example (
/chip). - 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 |
- 主要言語
- TypeScript
- スター
- 14.5k
- フォーク
- 2.3k
- 平均マージ
- 2日 12時間
- マージ済み PR（30日）
- 22
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
callstack/react-native-paper のほかの issue
-
feature request
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
callstack/react-native-paper#5189 ·
メンテナーはふだん 1 日以内に返信
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
callstack/react-native-paper#5187 ·
メンテナーはふだん 1 日以内に返信
-
Accessibility example app good first task
難易度 1/5 1〜3時間 初心者へのやさしさ 86/100
callstack/react-native-paper#5182 ·
メンテナーはふだん 1 日以内に返信
-
Chip: accessibilityState passed by caller is discarded; aria-checked is never forwarded to the real rendered node対応中かも @bhumikabiyani が 2 日前に担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
callstack/react-native-paper#5146 · コメント 2 件 ·
メンテナーはふだん 1 日以内に返信
-
Tooltip: onPress event object is not propagated to parent component on native対応中かも @aliyilmaztech が 86 日前に担当しました。 オープンbug
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
callstack/react-native-paper#5003 ·
メンテナーはふだん 1 日以内に返信
callstack/react-native-paper の issue をすべて見る
似ている issue
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
メンテナーはふだん 1 日以内に返信
-
pending close triaging
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
anomalyco/opencode#62582 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
live-codes/livecodes#1079 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
Add: ESP 2 ROオープンapproved check:passed streams:add
難易度 2/5 1〜3時間 初心者へのやさしさ 66/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
メンテナーはふだん 1 日以内に返信