Navigation Focus Support in 2024: Support Keyboard Navigation with Compose!

DroidKaigi 2024 - 2024/9/12
English version of the slides
https://2024.droidkaigi.jp/en/timetable/694196/

Video:
https://www.youtube.com/watch?v=poJg1A2xL-o

Transcript

1. Supporting keyboard navigation with Compose DroidKaigi 2024 Tiphaine Handling navigation focus in 2024
2. 2 Tiphaine • Android engineer @ DeNA (Pococha) • DroidKaigi volunteer staff • Mobile Dev Japan co-organizer
3. 3 Slides & Video: It's 2021, let's support accessibility (Japanese only) Better late than never ✌🤠✌ Today is a sequel to this talk
4. 4 01 Introduction to Focus Common Problems 02 Focus in Compose 03
5. 01 5 Introduction to Focus
8. 8 Focus Navigation
9. 9 • Alternative way to interact with a smartphone without using the touch screen • Move through the UI one element at a time Focus Navigation Focus Elements Ref: Google Play Store
10. Focus Focus 10 • Current position in the UI • Can only interact with this element • Element will have some visual changes when focused Ref: Google Play Store
11. Focus 11 • Accessibility Focus ≠ Navigation Focus • Navigation Focus is sometimes called “Keyboard Navigation” • Both focuses are Focus Navigation variants 😵💫 Focus Types
12. 12 Differences between focuses
13. Don’t touch the screen 👋 👀 Don’t see the screen 13 Navigation Focus Accessibility Focus
14. Only actionable elements All elements Navigation Focus Accessibility Focus 14
15. focusable attribute importantForAccessibility and focusable attributes 15 Only actionable elements All elements Navigation Focus Accessibility Focus
16. Keyboard, Switch Access, D-pad (arrow keys)… Screen readers like TalkBack 16 focusable attribute importantForAccessibility and focusable attributes Only actionable elements All elements Navigation Focus Accessibility Focus
17. 17 • Hardware keyboard (tablets, Chromebooks) • On-screen keyboard (soft input keyboard) Image: Sergi Kabrera Devices for Nav Focus
18. 18 • TV remote controller • Smartwatches rotating bezel • Game controller • Switch Access Image: Erik Mclean Devices for Nav Focus
19. 19 Changeable indicator Only one default indicator Keyboard, Switch Access, D-pad (arrow keys)… Screen readers like TalkBack focusable attribute importantForAccessibility and focusable attributes Only actionable elements All elements Navigation Focus Accessibility Focus
20. 20 Focus indicator Navigation Focus Accessibility Focus
21. 21 Due to the time restriction, today’s focus will be Nav Focus (🥶)
22. 22 For more info on Accessibility Focus, check out my 2021 talk 💁 Slides & Video: It's 2021, let's support accessibility (Japanese only)
23. 23 Types of navigation (relying on Nav Focus)
24. 24 • Using a D-pad (directional pad) or arrow keys • Two-dimensional navigation • Focus goes up, down, left, or right Directional Navigation
25. 25 • Using “tab” key or Switch Access • One-dimensional navigation (forward or backward) • Focus follows the order in which elements appear in the layout Tab Navigation 1 2 3
26. 26 Focus Navigation Accessibility Focus Navigation Focus Directional Navigation Tab Navigation
27. 01 27 Introduction to Focus Common Problems Focus in Compose 02 03 Introduction to Focus
28. 02 28 Common Problems
29. 1/3 29 Can all actions be done?
30. 30 • Make actionable elements focusable (if you don’t use OnClickListener) // Also focusable with // Accessibility Focus android:focusable="true" Handle click actions
31. myView.setOnLongClickListener { // Do something true } 31 Can’t reach the view 🥲
32. myView.setOnLongClickListener { // Do something true } // Set this for any listener 
 // except setOnClickListener⚠ myView.isFocusable = true 32
33. 33 How about gesture-based actions? 🤔
34. 34 Focusable, but nothing happens 😢 true } myView.isFocusable = true view.performClick() myView.setOnTouchListener { view, event -> // Do something with the event
35. 35 • Nav Focus can’t trigger OnTouchListener 😣 • Need a different way to detect input events 👉 Listen to KeyEvents instead Handle gesture-based actions
36. myView.setOnKeyListener { view, keyCode, event -> 36 } // Choose which one(s) you want to support KeyEvent.KEYCODE_ENTER, ... -> { // Do something true } else -> false when (keyCode) { Ref: Android Developers }
37. myView.setOnKeyListener { view, keyCode, event -> } when (keyCode) { } 37 Don’t forget to parse duplicate events ⚠ when (keyCode) { ... } // The same event will come several times if (event.action != KeyEvent.ACTION_UP) { return@setOnKeyListener false }
38. override fun onKeyUp(keyCode: Int, event: KeyEvent?)
 : Boolean { } return when (keyCode) { KeyEvent.KEYCODE_ENTER -> performClick() else -> ... } 38 Use this instead for custom Views 🚀
39. 39 Is it easy to use and navigate the app? 2/3
40. 40 • Skip non-interactive elements • Wait for an action to initiate changes // Skip this View android:focusable=“false” Meet the user’s expectations
41. 41 • Make sure the focus can always be removed • Verify the Esc key allows to move away • Double check your WebViews, scrolls and drop-down lists Prevent keyboard traps
42. 42 Try to test on different manufacturers 😇
43. 43 • Keep the flow logical and consistent // Tab navigation
 android:nextFocusForward=“@id/...” // Directional navigation // Can also set up, down and left android:nextFocusRight=“@id/...” Maintain the expected flow
44. 44 Facilitate navigation Ref: Android Developers // Available from API 26+ android:keyboardNavigationCluster • Group elements with clusters 1 2 3 4 10 11 12 Main content Bottom nav bar Top tabs
45. 45 • Request the focus when the start is obvious // Available from API 26+ // Won’t show on-screen keyboard <EditText ... android:focusedByDefault="true"/> Facilitate navigation
46. 46 Ref: Alex Zlatkus Start here instead
47. 47 Is the focus always visible? 3/3
48. 48 • Ensure the focus is visible • Customize the indicator color and/or shape when necessary Don’t let the user get lost Ref: Google Play Store app in 2021
49. Customize the indicator: whole app 49 <!-- themes.xml --> <style name=“AppTheme" ...> ... <item name="colorControlHighlight">...</item> </style> Customize the indicator
50. 50 <!-- outline.xml --> <shape ... android:shape="rectangle"> ... <stroke android:width="4dp" android:color=“@color/black” /> </shape> Customize the indicator: single View ᶃ Customize the indicator: single View Customize the indicator
51. <!-- focus_selector.xml --> <selector ...> </selector> 51 <item android:drawable=“@drawable/outline” 
 android:state_focused="true" /> <item android:drawable="@color/transparent"/> Customize the indicator: single View ᶄ Customize the indicator: single View Customize the indicator
52. // Set click effect as state_pressed in selector <Button ... android:foreground=“@drawable/focus_selector"/> 52 Customize the indicator: single View ᶅ Customize the indicator: single View Customize the indicator
53. 53 I will talk about on-screen keyboard another time… 🥲
54. 01 54 Introduction to Focus Common Problems Focus in Compose 02 03 Introduction to Focus Common Problems
55. 03 55 Focus in Compose
56. 56 Compose specificities
57. 57 • Focus follows the declaration order of Composables • Priorities goes to elements inside the same level Tab Navigation flow // Level ᶃ // Level ᶄ // Level ᶄ Column { Row { Row { } } } ... ...
58. 58 CustomButton("1") CustomButton("2") CustomButton("3") CustomButton("4") Column { } Row { Row { } }
59. 59 Row { Column { } Column { } } CustomButton("1") CustomButton("2") CustomButton("3") CustomButton("4")
60. 60 Modifier order matters 🧐
61. 61 Handling actions (in Compose)
62. Modifier.focusable() 62 • Need to provide a focus indicator and handle the displaying logic by yourself 😭 Make the element focusable
63. 63 Modifier var color by remember { .focusable() mutableStateOf(transparent) } // Modifier of your Composable Must set focusable as the last Modifier ⚠
64. 64 Modifier .border(5.dp, indicatorColor) .onFocusChanged { focusState -> } color = if (focusState.isFocused) { black } else { transparent } var color by remember { ...} .focusable() 🎉
65. 65 Modifier.clickable { // Do something } • With this Modifier, the Composable will automatically become focusable Handle click actions
66. 66 👀 How about other actionsʁ
67. 67 Handle other actions 👉 Listen to KeyEvents instead (Again) • Can’t trigger anything (including long click) 😢
68. 68 Listen to KeyEvents Modifier.onPreviewKeyEvent {} Modifier.onKeyEvent {} // Parent callback is invoked first // Start from children callback
69. 69 Modifier.onKeyEvent { keyEvent -> } when (keyEvent.key) { Modifier.onKeyEvent Key.Enter -> { // Do something true } else -> false }
70. 70 // Parse duplicates if (keyEvent.type != KeyEventType.KeyUp) { return@onPreviewKeyEvent false } when (keyEvent.key) { } when (keyEvent.key) { ... } Modifier.onKeyEvent { keyEvent -> } Modifier.onKeyEvent
71. 71 Controls & Navigation (in Compose)
72. • Can still be clicked in TouchMode 👋 72 Modifier.focusProperties { Skip an element canFocus = false }
73. 73 Change the flow - Tab Navigation Modifier.focusProperties { } next = } previous = ... ... • Use FocusProperties with FocusRequester Change the flow
74. 74 val (first, second) = remember { FocusRequester.createRefs() }
75. Modifier 75 val (first, second) = remember { FocusRequester.createRefs() } first // First Composable // Second Composable (Destination) Modifier.focusRequester( ) ) second .focusRequester(
76. 76 val (first, second) = remember { FocusRequester.createRefs() } Modifier .focusProperties { } second next = first) .focusRequester(
77. 77 // Won’t be used The top most Modifier wins ⚠ Modifier .focusProperties { } .focusProperties { previous = second } next = second
78. 78 Modifier.focusProperties { left = ... right = ... up = ... down = ... } Change the flow - Directional Nav Change the flow
79. 79 val focusManager = LocalFocusManager.current Move the focus focusManager.moveFocus( ) FocusDirection.Down // Go to the nearest focusable Composable // Direction you want the focus to go
80. 80 • Go wherever you want (as long as it’s focusable) val requester = remember { FocusRequester() } requester.requestFocus() Request the focus
81. Button( onClick = { ) { ... } TextField(... // If clicked, move to the TextField 81 ) }
82. 82 Button( onClick = { ) { ... } TextField(... } ) val requester = remember { FocusRequester() } Modifier.focusRequester(requester) // If clicked, move to the TextField
83. 83 Button( onClick = { ) { ... } TextField(... } ) val requester = remember { FocusRequester() } Modifier.focusRequester(requester) requester.requestFocus() // If clicked, move to the TextField
84. 84 Try it out!
85. 85 ᶃ Plug it to your phone ᶄ Tap any key ᶅ The focus indicator will appear (Same steps with other external tools 🎮) With a hardware keyboard
86. 86 1⃣ Use an emulator OR 2⃣ Use device mirroring With your computer keyboard
87. 87 • D-pad navigation is enabled by default with pre-set hardware profiles ✅ • For custom profiles, select the option when creating the device 1⃣ Use an emulator
91. 91 Control your phone with your computer keyboard 🥳
92. 92 • Use a real device through AndroidStudio • Preferences → Tools → Device mirroring 2⃣ Use device mirroring
94. 94 Quickly test on real devices while coding 🎉
95. 95 • Focus in Compose ɹ- Android Developers official documentation • Android App Development: Accessibility ɹ(LinkedIn Learning) - Renato Iwashima References
96. Thanks! Theme: SlidesCarnival ɹ tahia910 Special thanks: • Shogo Takasaki • Hidenari Tajima