[Composition] Keyboard focus visual not shown when focus is set programmatically or via NavigateFocus into a newly-shown content island
メンテナーはふだん 2 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 55/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 静か
- 技術スタック
- cpp, react-native
- 領域
- accessibility, desktop
調査の方向性
NavigateFocusRequested の処理から開始し、フォーカスが新たに表示された ReactNativeIsland に移動するときに FocusNavigationReason がどのように使われるかを追跡します。Composition/Fabric の island で、JS の component.focus() パスとネイティブの NavigateFocus(...First) パスの両方を再現します。キーボード理由によるフォーカスでリングが直ちに表示され、ポップアップを閉じた後に復元されるフォーカスも含めて、既存のキーボードナビゲーションにリグレッションがないことが完了条件です。
索引モデルが issue の本文から書いたものです。
説明
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
- 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. - 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))
- JS:
- Observe the item is focused (Narrator announces it) but no focus ring is drawn.
- 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
- 主要言語
- C++
- スター
- 17.4k
- フォーク
- 1.2k
- 平均マージ
- 2日 17時間
- マージ済み PR（30日）
- 13
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
microsoft/react-native-windows のほかの issue
-
Fabric text is drawn with ClearType onto transparent composition surfaces, fringing thin glyphsオープンNeeds: Triage :mag:
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
microsoft/react-native-windows#16340 ·
メンテナーはふだん 2 日以内に返信
-
bug Needs: Triage :mag:
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
microsoft/react-native-windows#16321 · コメント 1 件 ·
メンテナーはふだん 2 日以内に返信
-
Needs: Triage :mag:
難易度 5/5 1週間以上 初心者へのやさしさ 30/100
microsoft/react-native-windows#16442 · コメント 1 件 ·
メンテナーはふだん 2 日以内に返信
-
Fabric: activating the window doesn't announce the window or the focused control to a screen readerオープンNeeds: Triage :mag:
難易度 4/5 3〜5日 初心者へのやさしさ 48/100
microsoft/react-native-windows#16435 ·
メンテナーはふだん 2 日以内に返信
-
bug Needs: Triage :mag:
難易度 4/5 3〜5日 初心者へのやさしさ 48/100
microsoft/react-native-windows#16410 ·
メンテナーはふだん 2 日以内に返信
microsoft/react-native-windows の issue をすべて見る
似ている issue
-
Make Catch2 optional when `RDK_BUILD_CPP_TESTS=OFF`対応中かも @pechersky が今日担当しました。 オープンbug
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
メンテナーはふだん 2 日以内に返信
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
dice-group/dice-hash#111 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 64/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
MerginMaps/mobile#4741 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
ros-perception/image_pipeline#1198 ·