android - 如果我有特定文本作为占位符，为什么 Android TalkBack 不选择此 Jetpack Compose OutlinedTextField？

Question

我正在使用 TalkBack 测试我的应用程序的辅助功能兼容性。但是，如果启用了 TalkBack，某些 OutlinedTextFields 将被跳过并且即使通过单击也无法选择。我使用最新版本的 Kotlin/Gradle/Compose 创建了一个示例应用程序，以确保它与我的项目设置无关。

将“占位符”文本更改为某些值允许 TalkBack 选择，而其他值使其不可选择(例如“MM/DD/YYYY”使 TalkBack 跳过该字段，但“Hello World”允许 TalkBack 选择该字段)。

代码如下:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            PlaygroundTheme {
                // A surface container using the 'background' color from the theme
                Column(
                    modifier = Modifier.fillMaxSize(),
                ) {
                    Greeting("Android")
                    OutlinedTextField(
                        value = remember{mutableStateOf("")}.value,
                        onValueChange = {

                        },
                        label = {
                            Text(text = "Date of Birth")
                        },
                        placeholder = {
                            Text(text = "MM/DD/YYYY") //TalkBack won't select the field with this placeholder

//                          Text(text = "Hello World") //TalkBack WILL select the field with this placeholder
                        }
                    )
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

这是我正在使用的依赖项:

buildscript {
    ext {
        compose_version = '1.3.0-alpha01'
    }
}// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
    id 'com.android.application' version '7.2.1' apply false
    id 'com.android.library' version '7.2.1' apply false
    id 'org.jetbrains.kotlin.android' version '1.7.0' apply false
}

    id 'com.android.application'
    id 'org.jetbrains.kotlin.android'
}

android {
    compileSdk 32

    defaultConfig {
        applicationId "com.example.playground"
        minSdk 21
        targetSdk 32
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary true
        }
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion '1.2.0'
    }
    packagingOptions {
        resources {
            excludes += '/META-INF/{AL2.0,LGPL2.1}'
        }
    }
}

dependencies {

    implementation 'androidx.core:core-ktx:1.8.0'
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation 'androidx.compose.material3:material3:1.0.0-alpha14'
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.0'
    implementation 'androidx.activity:activity-compose:1.5.0'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"
}

TalkBack 是否禁止某些字符串或字符？

Answer 1

我有同样的问题...我进行了一些测试(使用 androidx.compose.ui:ui:1.3.0-beta03):

• OutlinedTextField 为空。❌
• 带占位符的 OutlinedTextField。✅
• 带占位符和标签的 OutlinedTextField。❌
• 带标签的 OutlinedTextField。✅
• TextField 为空。❌
• 带占位符的 TextField。✅
• 带有占位符和标签的 TextField。✅
• 带标签的文本框。✅

当我们放置一个placeholder 和一个label 时，TextField 和OutlinedTextField 之间的行为是不同的。 Google 的问题跟踪器上有一些类似的问题 here , here或 here .

除了仅使用带有 OutlinedTextField 的 label 之外，我没有找到其他解决方案，因为可访问性对我们来说不是可选的。我在 Google's tracker 上发了一个新问题使用我制作的以下示例，以及结果:

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(all = 16.dp)
        .verticalScroll(state = rememberScrollState()),
) {
    // OutlinedTextField empty.❌
    Text(text = "OutlinedTextField empty")
    Spacer(modifier = Modifier.height(height = 4.dp))
    OutlinedTextField(
        value = "",
        onValueChange = { },
        modifier = Modifier.fillMaxWidth(),
    )
    Spacer(modifier = Modifier.height(height = 12.dp))

    // OutlinedTextField with placeholder.✅
    Text(text = "OutlinedTextField with placeholder")
    Spacer(modifier = Modifier.height(height = 4.dp))
    OutlinedTextField(
        value = "",
        placeholder = { Text(text = "Placeholder") },
        onValueChange = { },
        modifier = Modifier.fillMaxWidth(),
    )
    Spacer(modifier = Modifier.height(height = 12.dp))

    // OutlinedTextField with placeholder and label.❌
    Text(text = "OutlinedTextField with placeholder and label")
    OutlinedTextField(
        value = "",
        placeholder = { Text(text = "Placeholder") },
        label = { Text(text = "Label") },
        onValueChange = { },
        modifier = Modifier.fillMaxWidth(),
    )
    Spacer(modifier = Modifier.height(height = 12.dp))

    // OutlinedTextField with label.✅
    Text(text = "OutlinedTextField with label")
    OutlinedTextField(
        value = "",
        label = { Text(text = "Label") },
        onValueChange = { },
        modifier = Modifier.fillMaxWidth(),
    )
    Spacer(modifier = Modifier.height(height = 12.dp))

    // TextField empty.❌
    Text(text = "TextField empty")
    Spacer(modifier = Modifier.height(height = 4.dp))
    TextField(
        value = "",
        onValueChange = { },
        modifier = Modifier.fillMaxWidth(),
    )
    Spacer(modifier = Modifier.height(height = 12.dp))

    // TextField with placeholder.✅
    Text(text = "TextField with Placeholder")
    Spacer(modifier = Modifier.height(height = 4.dp))
    TextField(
        value = "",
        placeholder = { Text(text = "Placeholder") },
        onValueChange = { },
        modifier = Modifier.fillMaxWidth(),
    )
    Spacer(modifier = Modifier.height(height = 12.dp))


    // TextField with placeholder and label.✅
    Text(text = "TextField with Placeholder and label")
    Spacer(modifier = Modifier.height(height = 4.dp))
    TextField(
        value = "",
        placeholder = { Text(text = "Placeholder") },
        label = { Text(text = "Label") },
        onValueChange = { },
        modifier = Modifier.fillMaxWidth(),
    )
    Spacer(modifier = Modifier.height(height = 12.dp))

    // TextField with label.✅
    Text(text = "TextField with label")
    Spacer(modifier = Modifier.height(height = 4.dp))
    TextField(
        value = "",
        label = { Text(text = "Label") },
        onValueChange = { },
        modifier = Modifier.fillMaxWidth(),
    )
    Spacer(modifier = Modifier.height(height = 12.dp))
}