No keyboard focus indicator on most components, and the three that have one each did it differently
維護者通常 7 天內回覆
評估
- 難度
- 5/5
- 預估耗時
- 一週以上
- 新手友好度
- 45/100
- Issue 類型
- 缺陷
- 描述清晰度
- 基本清楚
- 活躍度
- 活躍
- 技術堆疊
- react-native, typescript
- 領域
- accessibility, frontend, mobile
研究方向
先閱讀 src/theme/tokens/sys/state.ts、src/utils/isKeyboardFocusEvent.ts，以及 FAB、Checkbox 和 Switch 中現有的焦點處理；使用 cd example && yarn start 重現該行為。在決定共用行為應如何運作之前，檢查列出的互動元件及其目前的焦點處理。完成的標準是：在 Android 和 Web 上，鍵盤導覽會在受影響的元件中顯示一致的 MD3 指示器，同時不存在由滑鼠觸發的光圈，也不存在文件中記錄的裁切和對比問題。
由索引模型根據 Issue 內容生成。
描述
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 ownfocusedstate
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 horizontalScrollVieware the obvious case.
material-web hits the same thing and has aninwardvariant for it. - Colour. MD3 tonal palettes are luminance matched by tone, so a
secondaryring
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?
cd example && yarn start- 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. - FAB and Checkbox do show a ring, so focus itself works.
- 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/outlineOffsetsince
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 ownoverflow: 'hidden', negative offset draws
inside. An ancestor'soverflow: 'hidden'does clip it. - Version floor is fine. The
react-native-reanimated >= 4.3.0peer dep already
declaresreact-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 |
- 主要語言
- TypeScript
- 星號
- 14.5k
- 分支
- 2.3k
- 平均合併
- 6 天 2 小時
- 30 天內合併 PR
- 1
環境準備
- 沒有 Dockerfile 或 Docker Compose 檔案
- 有 Pull Request 範本
- 閱讀貢獻指南
從這裡開始
- 先讀完整個 Issue，再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫，在一個分支上完成修改。
- 送出 Pull Request，並在描述裡引用這個 Issue 編號。
callstack/react-native-paper 的其他 Issue
-
Menu ignores the keyboard when it mounts while the keyboard is already open可能已有人在做 @manchoudhary 於 34 天前認領。 未關閉
難度 2/5 1-3 小時 新手友好度 76/100
callstack/react-native-paper#5096 ·
維護者通常 7 天內回覆
-
Color Picker Popup Is Obscured On "Guides -> Theming -> Creating Dynamic Theme Colors" Documentation On Both v5 and v6可能已有人在做 @fatihcvs 於 29 天前認領。 未關閉bug
難度 2/5 1-3 小時 新手友好度 68/100
callstack/react-native-paper#5093 ·
維護者通常 7 天內回覆
-
Tooltip: onPress event object is not propagated to parent component on native可能已有人在做 @Shevilll 於 121 天前認領。 未關閉bug
難度 2/5 1-3 小時 新手友好度 74/100
callstack/react-native-paper#5003 ·
維護者通常 7 天內回覆
-
Snackbar stays mounted after `visible=false` under new architecture (iOS + Android)可能已有人在做 @momomuchu 於 109 天前認領。 未關閉
難度 2/5 1-3 小時 新手友好度 78/100
callstack/react-native-paper#4951 ·
維護者通常 7 天內回覆
-
bug
難度 2/5 1-3 小時 新手友好度 68/100
callstack/react-native-paper#4881 ·
維護者通常 7 天內回覆
查看 callstack/react-native-paper 的全部 Issue
相似的 Issue
-
難度 2/5 1-3 小時 新手友好度 76/100
維護者通常 1 天內回覆
-
難度 2/5 1-3 小時 新手友好度 78/100
Koenkk/zigbee-herdsman-converters#13540 ·
維護者通常 1 天內回覆
-
check:passed streams:add
難度 2/5 1-3 小時 新手友好度 72/100
維護者通常 1 天內回覆
-
area/busola/ux
難度 2/5 1-3 小時 新手友好度 68/100
kyma-project/busola#5442 ·
維護者通常 2 天內回覆
-
難度 2/5 1-3 小時 新手友好度 78/100
vercel-labs/wterm#246 ·
維護者通常 1 天內回覆