react / react/react-native

Specify keyboard focus separately from Screen Reader focus

Aperta
#34,737 5 commenti 4 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

API: Keyboard Needs: Triage :mag: Never gets stale
Lingua principale
C++
Stelle
127k
Fork
25.3k
Merge medio
1g 23h
PR unite (30g)
4

Descrizione

Description

On Android keyboard focus and accessibility focus are handled separately at the system level. Often these match, as many accessibility services use the “focusable” property (which informs keyboard focus), to also inform them where to focus. In API 28 however, Android added the setScreenReaderFocusable property to View (https://developer.android.com/reference/android/view/View#setScreenReaderFocusable(boolean)) which allows you to flag a view as being focusable only for screen readers, without making that same view focusable by keyboards.

This is useful since screen readers often want to focus on views that are content only, but not actionable (so their users can hear the content), but focusing on these content elements is not useful for keyboard navigation users, who only need to be able to move between interactive elements.

Right now in React Native, the accessible prop maps to focusable on Android, making the element focusable by both screen readers and keyboard users.

There are a few different approaches we could take here. We could surface a new prop called screenReaderFocusable, that sets focusable to false but screenReaderFocusable to true, we could adjust the accessible prop to only set screenReaderFocusable to true, and add a new prop for keyboardFocusable which sets focusable to true, or we could have the accessible prop contextually set either focusable (if the element is interactive by having a click handler) or screenreaderFocusable (if it’s content only).

Version

0.66

Output of npx react-native info

see description

Steps to reproduce

see description

Snack, code example, screenshot, or link to a repository

see description

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Start by reviewing how React Native's Android accessible prop currently maps to focusable, then read the linked Android View setScreenReaderFocusable API. Compare the proposed prop designs and establish which behavior should apply to interactive versus content-only views. Done means a decided API and separate keyboard and screen-reader focus behavior.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
android, react-native
Ambito
accessibility, mobile
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.