Update README.md

tutorials/Tab_Navigation/README.md

@@ -6,13 +6,12 @@ In this tutorial, we will show you how to use tabbing navigation between compone
 
 ## Default `Next/Previous` tabbing navigation
 
-By default, `Next/Previous` tabbed navigation moves focus in composition order (in order of appearance), to see how this works, we can use some of the components that are already focusable by default:`TextField`, `OutlinedTextField`, `BasicTextField`, `CircularProgressIndicator`, `LinearProgressIndicator`.
+By default, `Next/Previous` tabbed navigation moves focus in composition order (in order of appearance), to see how this works, we can use some of the components that are already focusable by default: `TextField`, `OutlinedTextField`, `BasicTextField`, components with `Modifier.clickable` (`Button`, `IconButton`, `MenuItem`).
 
 ```kotlin
 import androidx.compose.ui.window.application
 import androidx.compose.ui.window.Window
 import androidx.compose.ui.window.WindowState
-import androidx.compose.ui.window.WindowSize
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
@@ -24,11 +23,12 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 
 fun main() = application {
     Window(
-        state = WindowState(size = WindowSize(350.dp, 500.dp)),
+        state = WindowState(size = DpSize(350.dp, 500.dp)),
         onCloseRequest = ::exitApplication
     ) {
         Box(
@@ -58,12 +58,10 @@ fun main() = application {
 To make a non-focusable component focusable, you need to apply `Modifier.focusable()` modifier to the component.
 
 ```kotlin
+import androidx.compose.foundation.background
 import androidx.compose.ui.window.application
 import androidx.compose.ui.window.Window
 import androidx.compose.ui.window.WindowState
-import androidx.compose.ui.window.WindowSize
-import androidx.compose.material.Button
-import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.foundation.focusable
@@ -76,6 +74,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
@@ -84,17 +83,17 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.lerp
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.input.key.*
+import androidx.compose.ui.input.pointer.PointerEventType
+import androidx.compose.ui.input.pointer.onPointerEvent
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.IntSize
-import androidx.compose.ui.input.key.KeyEventType
-import androidx.compose.ui.input.key.type
-import androidx.compose.ui.input.key.key
-import androidx.compose.ui.input.key.Key
-import androidx.compose.ui.input.key.onPreviewKeyEvent
+import androidx.compose.ui.unit.DpSize
 
 fun main() = application {
     Window(
-        state = WindowState(size = WindowSize(350.dp, 450.dp)),
+        state = WindowState(size = DpSize(350.dp, 450.dp)),
         onCloseRequest = ::exitApplication
     ) {
         MaterialTheme(
@@ -114,7 +113,7 @@ fun main() = application {
                     Text(text = "Clicks: ${clicks.value}")
                     Spacer(modifier = Modifier.height(20.dp))
                     for (x in 1..5) {
-                        FocusableButton("Button $x", { clicks.value++ })
+                        FocusableBox("Button $x", { clicks.value++ })
                         Spacer(modifier = Modifier.height(20.dp))
                     }
                 }
@@ -125,27 +124,27 @@ fun main() = application {
 
 @OptIn(ExperimentalComposeUiApi::class)
 @Composable
-fun FocusableButton(
+fun FocusableBox(
     text: String = "",
     onClick: () -> Unit = {},
     size: IntSize = IntSize(200, 35)
 ) {
     val keyPressedState = remember { mutableStateOf(false) }
     val interactionSource = remember { MutableInteractionSource() }
-    val colors = ButtonDefaults.buttonColors(
-        backgroundColor = if (interactionSource.collectIsFocusedAsState().value) {
-            if (keyPressedState.value)
-                lerp(MaterialTheme.colors.secondary, Color(64, 64, 64), 0.3f)
-            else
-                MaterialTheme.colors.secondary
-        } else {
-            MaterialTheme.colors.primary
-        }
-    )
-    Button(
-        onClick = onClick,
-        interactionSource = interactionSource,
-        modifier = Modifier.size(size.width.dp, size.height.dp)
+    val backgroundColor = if (interactionSource.collectIsFocusedAsState().value) {
+        if (keyPressedState.value)
+            lerp(MaterialTheme.colors.secondary, Color(64, 64, 64), 0.3f)
+        else
+            MaterialTheme.colors.secondary
+    } else {
+        MaterialTheme.colors.primary
+    }
+    Box(
+        modifier = Modifier
+            .clip(RoundedCornerShape(4.dp))
+            .background(backgroundColor)
+            .size(size.width.dp, size.height.dp)
+            .onPointerEvent(PointerEventType.Press) { onClick() }
             .onPreviewKeyEvent {
                 if (
                     it.key == Key.Enter ||
@@ -164,9 +163,9 @@ fun FocusableButton(
                 false
             }
             .focusable(interactionSource = interactionSource),
-        colors = colors
+        contentAlignment = Alignment.Center
     ) {
-        Text(text = text)
+        Text(text = text, color = Color.White)
     }
 }
 ```
@@ -185,7 +184,6 @@ In the example below, we simply create a `FocusRequester` list and create text f
 import androidx.compose.ui.window.application
 import androidx.compose.ui.window.Window
 import androidx.compose.ui.window.WindowState
-import androidx.compose.ui.window.WindowSize
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
@@ -199,11 +197,12 @@ import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusOrder
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 
 fun main() = application {
     Window(
-        state = WindowState(size = WindowSize(350.dp, 500.dp)),
+        state = WindowState(size = DpSize(350.dp, 500.dp)),
         onCloseRequest = ::exitApplication
     ) {
         val itemsList = remember { List(5) { FocusRequester() } }
@@ -309,4 +308,4 @@ fun main() = application {
 }
 ```
 
-<img alt="reverse-order" src="focus-switcher.gif" height="480" />
+<img alt="reverse-order" src="focus-switcher.gif" height="480" />