Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

[Composition] Keyboard focus visual not shown when focus is set programmatically or via NavigateFocus into a newly-shown content island

Aperta
  • Qualcosa non va?
#16,368 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
55/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
cpp, react-native
Ambito
accessibility, desktop

Direzione di ricerca

Inizia dalla gestione di NavigateFocusRequested e traccia come viene usato FocusNavigationReason quando il focus si sposta in una ReactNativeIsland appena mostrata. Riproduci sia il percorso JS component.focus() sia il percorso nativo NavigateFocus(...First) con isole Composition/Fabric. Il lavoro è completato quando il focus dovuto alla tastiera mostra immediatamente l’anello, incluso il ripristino del focus dopo la chiusura di un popup, senza regressioni nella navigazione da tastiera esistente.

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

Descrizione

bug Invalid Triage Needs: Triage :mag:
Problem Description

In react-native-windows (Composition / Fabric), the keyboard focus ring
(focus visual) is drawn only after a real keyboard event has occurred
within a given ReactNativeIsland. When focus is placed programmatically
— either JS component.focus() or native
InputFocusNavigationHost.GetForSiteBridge(bridge).NavigateFocus(FocusNavigationRequest.Create(FocusNavigationReason.First))
— focus moves correctly (UIA/Narrator announces the element) but the island is
not put into the "show focus visuals" state, so no ring is rendered
until the user presses Tab/arrow inside that island.

The "keyboard mode" that enables the ring appears to be tracked per island:
a keypress that happened in island A does not enable focus visuals for a
programmatic focus placed into a freshly-shown island B.

Steps To Reproduce
  1. Build an app with two Composition content islands (each its own
    ReactNativeIsland) — e.g. a main view and a popup/menu shown in a separate
    island.
  2. Show the popup island and set focus on its first item, using either:
    • JS: firstItemRef.current.focus(), or
    • native: InputFocusNavigationHost.GetForSiteBridge(bridge).NavigateFocus(FocusNavigationRequest.Create(FocusNavigationReason.First))
  3. Observe the item is focused (Narrator announces it) but no focus ring is drawn.
  4. Press Tab or an arrow key → the focus ring now appears and behaves correctly.
Expected Results

When focus is moved with a keyboard navigation reason
(First / Last / directional), RNW should render the focus visual — matching
XAML/WinUI FocusState.Keyboard semantics. At minimum, there should be a way to
request keyboard focus visuals when setting focus programmatically (so a menu/
popup that opens via keyboard shows a ring on its initial item, and focus
restored to a caller after dismissing a popup shows a ring).

Actual results:
No focus ring is drawn on the initially focused element until the user presses
a key in that island. enableFocusRing is true on the components (the ring
renders correctly once keyboard navigation occurs).

Investigation suggests the NavigateFocusRequested handling moves focus but
ignores the FocusNavigationReason for focus-visual purposes, so even the
native NavigateFocus(...First) path does not enable the ring.

CLI version

CLI 0.81.3

Environment
- react-native-windows: 0.81.5
- @react-native-windows/cli: 0.81.3
- react-native: 0.81.5
- UI library: @fluentui/react-native 0.42.24 (ButtonV1, enableFocusRing)
- Architecture: Composition / Fabric, DesktopChildSiteBridge content islands
- Windows App SDK: bundled via host app (1.x)
- OS: Windows 11 (x64)
Community Modules

No response

Target React Native Architecture

None

Target Platform Version

None

Visual Studio Version

None

Build Configuration

None

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

No response

Lingua principale
C++
Stelle
17.4k
Fork
1.2k
Merge medio
2g 17h
PR unite (30g)
13

Preparare l'ambiente

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.

Altre issue di microsoft/react-native-windows

Tutte le issue di microsoft/react-native-windows

Issue simili

Altre issue su C++

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.