Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#16,368 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 2 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
55/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
cpp, react-native
Lĩnh vực
accessibility, desktop

Hướng nghiên cứu

Bắt đầu từ việc xử lý NavigateFocusRequested và lần theo cách FocusNavigationReason được sử dụng khi tiêu điểm di chuyển vào một ReactNativeIsland vừa được hiển thị. Tái hiện cả đường đi JS component.focus() và đường đi native NavigateFocus(...First) với các island Composition/Fabric. Hoàn thành khi tiêu điểm do lý do bàn phím hiển thị vòng ngay lập tức, bao gồm cả tiêu điểm được khôi phục sau khi đóng popup, mà không gây hồi quy cho việc điều hướng bằng bàn phím hiện có.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
C++
Star
17.4k
Fork
1.2k
Merge trung bình
2 ngày 17 giờ
Pull request đã merge (30 ngày)
13

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của microsoft/react-native-windows

Tất cả issue của microsoft/react-native-windows

Issue tương tự

Thêm issue về C++

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.