Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

No keyboard focus indicator on most components, and the three that have one each did it differently

Ouverte
  • Quelque chose ne va pas ?
#5,083 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 7 jours

@k0ndee y travaille déjà.

Depuis le 7/9/2026.

  • #5107 par @k0ndee — ouverte

Évaluation

Difficulté
5/5
Temps estimé
Plus d'une semaine
Accessibilité débutants
45/100
Type d'issue
Bug
Clarté
Plutôt claire
Activité
Active
Stack technique
react-native, typescript
Domaine
accessibility, frontend, mobile

Piste de recherche

Commencez par lire src/theme/tokens/sys/state.ts, src/utils/isKeyboardFocusEvent.ts et la gestion existante du focus dans FAB, Checkbox et Switch ; reproduisez le comportement avec cd example && yarn start. Examinez les composants interactifs indiqués et leur gestion actuelle du focus avant de décider du fonctionnement du comportement partagé. C’est terminé lorsque la navigation au clavier affiche un indicateur MD3 cohérent sur les composants concernés sur Android et le Web, sans anneaux déclenchés par la souris ni les problèmes documentés de rognage et de contraste.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

Current behaviour

Most interactive components have no MD3 keyboard focus indicator.

has a ring no ring
FAB, FAB.Menu, Checkbox, Switch RadioButton, Chip, SegmentedButtons, List.Item, pressable Card, Button, IconButton, Menu.Item, Drawer.Item, DataTable rows

On Android a keyboard user gets nothing. On web you get the browser's default
outline, so not invisible, just not MD3 and different per browser.

The three that do have one each did it their own way. FAB has a local
useFocusRing hook with a reanimated SharedValue and checks
document.activeElement. Checkbox uses useState plus
src/utils/isKeyboardFocusEvent.ts. Switch uses a SharedValue plus the same
util. All three also carry their own copy of

const webNoOutline = { outline: "none" } as unknown as ViewStyle;

src/theme/tokens/sys/state.ts already has focusIndicator: { thickness: 3, outerOffset: 2 }. It is just not used in most places.

One thing to know before testing on iOS: onFocus never fires there for a View or
Pressable. RCTViewComponentView.mm emits it from becomeFirstResponder only
behind the enableImperativeFocus flag, which defaults off. Android has no such
gate. So the FAB/Checkbox/Switch rings are already inert on iOS, and this is a web
and Android fix.

Expected behaviour

A focus indicator on every interactive component, from one shared implementation and
the existing tokens.

Easy to get wrong:

  • Keyboard only. A mouse click must not light it. Pressable's own focused state
    fires for clicks too, see necolas/react-native-web#1849.
  • Placement. MD3 puts the ring outside, hence outerOffset. But outside gets
    trimmed by a clipping ancestor sized to its content, and lands on the neighbour for
    things that sit flush. Chips in a horizontal ScrollView are the obvious case.
    material-web hits the same thing and has an inward variant for it.
  • Colour. MD3 tonal palettes are luminance matched by tone, so a secondary ring
    drawn on top of another role at the same tone is about 1:1 and disappears. It needs
    to land somewhere with real contrast.
How to reproduce?
  1. cd example && yarn start
  2. Android, hardware keyboard or adb shell input keyevent KEYCODE_TAB. Tab through
    the Chip screen. Nothing. Same on List.Item, Segmented Buttons, Radio Button, a
    pressable Card.
  3. FAB and Checkbox do show a ring, so focus itself works.
  4. Web, same screens, you get the browser outline instead.

Android drops keyboard focus the moment you touch the screen. Tab again to get back.

Preview

Nothing to show as a still, it only exists while something is focused.

What have you tried so far?
  • Read every component for existing focus handling to get the table, rather than
    trusting the ticket this came from.
  • RN has outlineWidth / outlineColor / outlineStyle / outlineOffset since
    0.77, implemented on both platforms. Measured on iOS sim, android-35 emulator and
    expo web: paints on all three, costs no layout, takes its radius from the view it
    sits on, survives that view's own overflow: 'hidden', negative offset draws
    inside. An ancestor's overflow: 'hidden' does clip it.
  • Version floor is fine. The react-native-reanimated >= 4.3.0 peer dep already
    declares react-native: "0.81 - 0.85".
Your Environment
software version
ios 18.3 (simulator)
android 15 / API 35 (emulator)
react-native 0.85.3
react-native-web 0.21.2
react-native-paper 6.0.0-alpha.0 (main)
node 24.13.0
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.2k
Merge moyen
6 j 12 h
PR mergées (30 j)
5

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de callstack/react-native-paper

Toutes les issues de callstack/react-native-paper

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.