No keyboard focus indicator on most components, and the three that have one each did it differently
メンテナーはふだん 7 日以内に返信
評価
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 初心者へのやさしさ
- 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.2k
- 平均マージ
- 6日 12時間
- マージ済み PR（30日）
- 5
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
callstack/react-native-paper のほかの issue
-
Menu ignores the keyboard when it mounts while the keyboard is already open対応中かも @manchoudhary が 20 日前に担当しました。 オープン
難易度 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 が 15 日前に担当しました。 オープン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 が 107 日前に担当しました。 オープン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 が 95 日前に担当しました。 オープン
難易度 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時間 初心者へのやさしさ 72/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
メンテナーはふだん 4 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信