IssueTracker

Component used: Activity

Version used: 1.9.0-alpha01

Devices/Android versions reproduced on:

• A device with 3 button navigation enabled and a (virtual) keyboard, video captured on Pixel 6 Pro Emulator (API 34) --

When using the keyboard to navigate through the screen content using the tab key with edge to edge enabled, the focused element is displayed below the bottom navigation bar. Displaying content below the navigation bar is desirable as it visually looks good but it seems to conflict with making the app properly accessible for keyboard users.

I've attached two videos, one using the sample code below tabbing through the buttons and a second video of the Android settings screen doing the same thing. As shown in both videos, the selected content isn't (always) properly visible to the user.

Ideally the focused content should be on top of the navigation buttons so it's always properly visible to the user so edge to edge can be enabled whilst still keeping the app keyboard accessible.

Sample code:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        installSplashScreen()
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            enableEdgeToEdge(darkTheme = false)
            Scaffold { padding ->
                Column(
                    modifier = Modifier
                        .verticalScroll(rememberScrollState())
                        .padding(padding),
                    verticalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    repeat(20) { index ->
                        Button(
                            onClick = {},
                            modifier = Modifier.fillMaxWidth(),
                            content = { Text("Button $index") }
                        )
                    }
                }
            }
        }
    }
}

Swapping the verticalScroll and padding in the above snippet "solves" the keyboard issue but it'll no longer make use of edge to edge displayed content.

Perhaps a workaround is possible in code using insets, if so I'd love to hear it, but since the issue also seems to appear in the Android settings it'd be great if it could be solved on the platform rather than in every app.