Talkback无障碍模式下ModalBottomSheetLayout启动焦点异常求助

问题出在哪 #

• 自动聚焦无效：你给Text添加了focusRequester和focusable，但没有在Sheet完全展开后触发焦点请求，时机不对导致功能失效。
• 焦点穿透到底层视图：ModalBottomSheetLayout默认不会自动隔离底层内容的焦点，Talkback仍能访问Sheet后方的组件。

修复步骤 #

1. 监听Sheet状态，展开后触发焦点请求 #

使用LaunchedEffect监听sheetState的变化，当Sheet切换到Expanded状态时，调用focusRequest.requestFocus()，确保焦点请求在Sheet完全显示后执行。

2. 隔离底层内容的焦点访问 #

当Sheet展开时，给底层内容添加语义化标记和焦点限制，阻止Talkback访问后方组件。

完整修复代码 #

@ExperimentalMaterialApi
@Composable
fun BottomSheetExample(
    contents: @Composable () -> Unit
) {
    val focusRequest = FocusRequester()
    val sheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)

    // 监听Sheet展开状态，触发焦点请求
    LaunchedEffect(sheetState.currentValue) {
        if (sheetState.currentValue == ModalBottomSheetValue.Expanded) {
            focusRequest.requestFocus()
        }
    }

    ModalBottomSheetLayout(
        sheetState = sheetState,
        sheetContent = {
            Column(
                // 给根布局添加focusable，限制焦点范围在Sheet内
                modifier = Modifier.focusable()
            ) {
                Text(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(start = 30.dp, end = 30.dp, top = 21.dp, bottom = 21.dp),
                    text = "Text Sample 1",
                    fontSize = 16.sp,
                    color = colorResource(id = R.color.johnstonBlack)
                )
                Text(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(start = 30.dp, end = 30.dp, top = 21.dp, bottom = 21.dp)
                        .focusRequester(focusRequest)
                        .focusable(),
                    text = "Text Sample 2",
                    fontSize = 16.sp,
                    color = colorResource(id = R.color.johnstonBlack)
                )
                Text(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(start = 30.dp, end = 30.dp, top = 21.dp, bottom = 21.dp),
                    text = "Text Sample 3",
                    fontSize = 16.sp,
                    color = colorResource(id = R.color.johnstonBlack)
                )
            }
        },
        content = {
            // 根据Sheet状态控制底层内容是否可访问
            if (sheetState.currentValue == ModalBottomSheetValue.Expanded) {
                Box(
                    modifier = Modifier
                        .semantics { contentDescription = null } // 移除语义化描述
                        .focusable(false) // 禁止焦点获取
                ) {
                    contents()
                }
            } else {
                contents()
            }
        }
    )
}

额外提示 #

• Sheet的根布局添加focusable()可以确保焦点被限制在Sheet内部，避免Talkback跳转到外部组件。
• 如果需要Text组件在Talkback中被识别为可交互元素，建议添加contentDescription属性，或者使用ClickableText组件，单纯的focusable可能无法提供清晰的无障碍反馈。

内容的提问来源于stack exchange，提问作者Nik