Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

[a11y] `role` prop not fully supported on React Native

オープン
  • 何か問題がありますか？
#422 コメント 2 件 リアクション 1 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
25/100
issue の種類
バグ
明瞭さ
説明が足りない
活発さ
停滞
技術スタック
react-native
領域
accessibility, mobile-dev

調査の方向性

リンクされている rsd-role-repro から始め、issue で説明されている View と Pressable のケースを比較し、role と accessible の props に注目してください。ネストされた View 要素を含め、iOS のスクリーンリーダーで動作を確認してください。非 pressable 要素で role の読み上げが機能し、親コントロールによって問題のあるネストされたアクセシビリティ要素を防止できれば完了です。

索引モデルが issue の本文から書いたものです。

説明

bug
Describe the issue

React Native requires accessible={true} prop to be set on View elements to announce role prop. However, the accessible prop is not exposed by RSD.

The only way in where role works correctly in RN with RSD is:

  1. Text elements behave as if accessible={true} by default
  2. When using Pressable, it sets accessible={true} on the renderer View element. Using onPress handler with RSD triggers using Pressable instead of plain View.

These two cases are frequent enough that they avoid the problem in most cases, but unfortunately, not all.

A simple solution would be to have the role prop (perhaps excluding none/presentation) set accessible to true. However, that creates an issue in the iOS environment, which generally does not support nested accessibility elements. If there are two nested Views with accessible prop, only one is recognized (the ancestor one).

Expected behavior

There should be a way of controlling accessible prop. Perhaps a reasonable default would be to set it to true when role is not none/presentation. However, given the iOS issue described above, there should be a way to disable the status of accessibility element (on a parent), as it might prevent children from receiving a11y focus.

Steps to reproduce
  1. Render <html.div role="heading"> element, without onClick handler.
  2. Compare with the case when you set onClick handler, with renders accessible prop through Pressable component
  3. Use a screen reader to navigate to the button
  4. Role is not being announced

https://github.com/user-attachments/assets/be386fe5-3a61-46fb-bd3c-00659801e6df

Notice the header role announced on elements with accessible prop, and not announced otherwise.

Test case

https://github.com/mdjastrzebski/rsd-role-repro

Additional comments

No response

主要言語
JavaScript
スター
3.6k
フォーク
208
30日以内にマージされた PR はありません

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

react/react-strict-dom のほかの issue

react/react-strict-dom の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。