IssueTracker

Jetpack Compose version: Compose BOM 2024.09.03

Material Library Version (M2, M3 or Both?): M3, v1.3.0

Material Compose component used: androidx.compose.material3.Scaffold

Android Studio Build: Android Studio Koala Feature Drop | 2024.1.2 Patch 1

Kotlin version: 2.0.21

Description

The default focus order of a scaffold using both a topBar and a bottomBar seems incorrect and prioritises the bottomBar over the content. The focus is now initially placed on the topBar navigation icon, then goes to the bottomBar and lastly the content. The expected order would be topBar -> content -> bottomBar, similar to the order talkback uses.

Below code snippet renders a minimal reproduction of the issue.

1. The initial focus is placed on the navigation icon
2. Tab is pressed, the focus is moved to the "Bottom left" button
3. Tab is pressed, the focus is moved to the "Bottom right" button
4. Tab is pressed, the focus is moved to the "Button 0" button

When no navigationIcon is provided in the topBar, the initial focus is placed on the first button in the content (Button 0). In this case, the scaffold does seem to follow the "logical" focus order: button 0 -> button 1 -> button 2 -> bottom left -> bottom right.

Attached videos show the issue described.

Sample code:

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text("Top app bar") },
            navigationIcon = {
                // Adding/removing this icon button changes the focus behavior
                IconButton(onClick = {}) {
                    Icon(Icons.Outlined.Close, null)
                }
            }
        )
    },
    bottomBar = {
        Row(
            modifier = Modifier
                .background(Color.LightGray)
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Button(onClick = {}) {
                Text("Bottom left")
            }
            Button(onClick = {}) {
                Text("Bottom right")
            }
        }
    },
) {
    Column(Modifier.padding(it)) {
        repeat(3) {
            Button(onClick = {}) {
                Text("Button $it")
            }
        }
    }
}