diff --git a/compose/snippets/build.gradle.kts b/compose/snippets/build.gradle.kts index 8b644b694..c8d728da0 100644 --- a/compose/snippets/build.gradle.kts +++ b/compose/snippets/build.gradle.kts @@ -160,6 +160,7 @@ dependencies { debugImplementation(libs.androidx.compose.ui.tooling) androidTestImplementation(libs.androidx.compose.ui.test.junit4) + androidTestImplementation(libs.androidx.compose.ui.test.junit4.accessibility) debugImplementation(libs.androidx.compose.ui.test.manifest) } diff --git a/compose/snippets/src/androidTest/java/com/example/compose/snippets/accessibility/AccessibilitySnippets.kt b/compose/snippets/src/androidTest/java/com/example/compose/snippets/accessibility/AccessibilitySnippets.kt index 724876a87..ee6b51325 100644 --- a/compose/snippets/src/androidTest/java/com/example/compose/snippets/accessibility/AccessibilitySnippets.kt +++ b/compose/snippets/src/androidTest/java/com/example/compose/snippets/accessibility/AccessibilitySnippets.kt @@ -16,25 +16,109 @@ package com.example.compose.snippets.accessibility +import androidx.activity.ComponentActivity +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.size +import androidx.compose.material3.Text +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.semantics.SemanticsActions +import androidx.compose.ui.semantics.contentDescription import androidx.compose.ui.semantics.getOrNull +import androidx.compose.ui.semantics.semantics import androidx.compose.ui.test.SemanticsMatcher import androidx.compose.ui.test.assert +import androidx.compose.ui.test.junit4.accessibility.enableAccessibilityChecks import androidx.compose.ui.test.junit4.createAndroidComposeRule -import com.example.compose.snippets.MyActivity +import androidx.compose.ui.test.onRoot +import androidx.compose.ui.test.tryPerformAccessibilityChecks +import androidx.compose.ui.unit.dp +import com.google.android.apps.common.testing.accessibility.framework.AccessibilityCheckResult +import com.google.android.apps.common.testing.accessibility.framework.integrations.espresso.AccessibilityValidator import org.junit.Ignore import org.junit.Rule import org.junit.Test -class AccessibilitySnippetsTest { +class AccessibilityTest { + +// [START android_compose_accessibility_testing_label] @Rule @JvmField - val composeTestRule = createAndroidComposeRule() + val composeTestRule = createAndroidComposeRule() + + @Test + fun noAccessibilityLabel() { + composeTestRule.setContent { + Box( + modifier = Modifier + .size(50.dp, 50.dp) + .background(color = Color.Gray) + .clickable { } + .semantics { + contentDescription = "" + } + ) + } - private val nodeMatcher = SemanticsMatcher("DUMMY") { it.isRoot } + composeTestRule.enableAccessibilityChecks() - @Ignore("Dummy test") + // Any action (such as performClick) will perform accessibility checks too: + composeTestRule.onRoot().tryPerformAccessibilityChecks() + } +// [END android_compose_accessibility_testing_label] +// [START android_compose_accessibility_testing_click] + @Test + fun smallClickTarget() { + composeTestRule.setContent { + Box( + modifier = Modifier + .size(20.dp, 20.dp) + .background(color = Color(0xFFFAFBFC)) + .clickable { } + ) + } + + composeTestRule.enableAccessibilityChecks() + + // Any action (such as performClick) will perform accessibility checks too: + composeTestRule.onRoot().tryPerformAccessibilityChecks() + } +// [END android_compose_accessibility_testing_click] + +// [START android_compose_accessibility_testing_validator] + @Test + fun lowContrastScreen() { + composeTestRule.setContent { + Box( + modifier = Modifier + .fillMaxSize() + .background(color = Color(0xFFFAFBFC)), + contentAlignment = Alignment.Center + ) { + Text(text = "Hello", color = Color(0xFFB0B1B2)) + } + } + + // Optionally, set AccessibilityValidator manually + val accessibilityValidator = AccessibilityValidator() + .setThrowExceptionFor( + AccessibilityCheckResult.AccessibilityCheckResultType.WARNING + ) + + composeTestRule.enableAccessibilityChecks(accessibilityValidator) + + composeTestRule.onRoot().tryPerformAccessibilityChecks() + } +// [END android_compose_accessibility_testing_validator] + + private val nodeMatcher = SemanticsMatcher(description = "DUMMY") { it.isRoot } + + @Ignore("Dummy test") // [START android_compose_accessibility_testing] @Test fun test() { diff --git a/compose/snippets/src/androidTest/java/com/example/compose/snippets/semantics/SemanticsSnippets.kt b/compose/snippets/src/androidTest/java/com/example/compose/snippets/semantics/SemanticsSnippets.kt index 89b577ea7..1b867edfa 100644 --- a/compose/snippets/src/androidTest/java/com/example/compose/snippets/semantics/SemanticsSnippets.kt +++ b/compose/snippets/src/androidTest/java/com/example/compose/snippets/semantics/SemanticsSnippets.kt @@ -16,7 +16,6 @@ package com.example.compose.snippets.semantics -import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.semantics.Role import androidx.compose.ui.semantics.SemanticsProperties diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/accessibility/AccessibilitySnippets.kt b/compose/snippets/src/main/java/com/example/compose/snippets/accessibility/AccessibilitySnippets.kt index 3c6be8afc..a83111f71 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/accessibility/AccessibilitySnippets.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/accessibility/AccessibilitySnippets.kt @@ -19,9 +19,11 @@ package com.example.compose.snippets.accessibility import androidx.compose.foundation.Canvas +import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.clickable +import androidx.compose.foundation.combinedClickable import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.PaddingValues @@ -34,6 +36,7 @@ import androidx.compose.foundation.selection.toggleable import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.AccountCircle import androidx.compose.material.icons.filled.Add +import androidx.compose.material.icons.filled.Favorite import androidx.compose.material.icons.filled.Share import androidx.compose.material3.BottomAppBar import androidx.compose.material3.Checkbox @@ -44,10 +47,13 @@ import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Scaffold +import androidx.compose.material3.SwipeToDismissBox import androidx.compose.material3.Text import androidx.compose.material3.TopAppBar +import androidx.compose.material3.rememberSwipeToDismissBoxState import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableFloatStateOf import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue @@ -58,16 +64,29 @@ import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.painter.Painter import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource +import androidx.compose.ui.semantics.CollectionInfo +import androidx.compose.ui.semantics.CollectionItemInfo import androidx.compose.ui.semantics.CustomAccessibilityAction +import androidx.compose.ui.semantics.LiveRegionMode +import androidx.compose.ui.semantics.ProgressBarRangeInfo import androidx.compose.ui.semantics.Role import androidx.compose.ui.semantics.clearAndSetSemantics +import androidx.compose.ui.semantics.collectionInfo +import androidx.compose.ui.semantics.collectionItemInfo import androidx.compose.ui.semantics.customActions import androidx.compose.ui.semantics.heading +import androidx.compose.ui.semantics.hideFromAccessibility import androidx.compose.ui.semantics.isTraversalGroup +import androidx.compose.ui.semantics.liveRegion import androidx.compose.ui.semantics.onClick +import androidx.compose.ui.semantics.paneTitle +import androidx.compose.ui.semantics.progressBarRangeInfo +import androidx.compose.ui.semantics.role import androidx.compose.ui.semantics.semantics import androidx.compose.ui.semantics.stateDescription +import androidx.compose.ui.semantics.toggleableState import androidx.compose.ui.semantics.traversalIndex +import androidx.compose.ui.state.ToggleableState import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.example.compose.snippets.R @@ -155,7 +174,7 @@ private fun LargeBox() { // [START android_compose_accessibility_click_label] @Composable -private fun ArticleListItem(openArticle: () -> Unit) { +private fun ArticleListItem(openArticle: () -> Unit = {}) { Row( Modifier.clickable( // R.string.action_read_article = "read article" @@ -418,6 +437,376 @@ fun FloatingBox() { } // [END android_compose_accessibility_traversal_fab] +@OptIn(ExperimentalFoundationApi::class) +@Composable +fun InteractiveElements( + openArticle: () -> Unit = {}, + addToBookmarks: () -> Unit = {}, +) { +// [START android_compose_accessibility_interactive_clickable] + Row( + // Uses `mergeDescendants = true` under the hood + modifier = Modifier.clickable { openArticle() } + ) { + Icon( + painter = painterResource(R.drawable.ic_logo), + contentDescription = "Open", + ) + Text("Accessibility in Compose") + } +// [END android_compose_accessibility_interactive_clickable] + +// [START android_compose_accessibility_interactive_click_label] + Row( + modifier = Modifier + .clickable(onClickLabel = "Open this article") { + openArticle() + } + ) { + Icon( + painter = painterResource(R.drawable.ic_logo), + contentDescription = "Open" + ) + Text("Accessibility in Compose") + } +// [END android_compose_accessibility_interactive_click_label] + +// [START android_compose_accessibility_interactive_long_click] + Row( + modifier = Modifier + .combinedClickable( + onLongClickLabel = "Bookmark this article", + onLongClick = { addToBookmarks() }, + onClickLabel = "Open this article", + onClick = { openArticle() }, + ) + ) {} +// [END android_compose_accessibility_interactive_long_click] +} + +// [START android_compose_accessibility_interactive_nested_click] +@Composable +private fun ArticleList(openArticle: () -> Unit) { + NestedArticleListItem( + // Clickable is set separately, in a nested layer: + onClickAction = openArticle, + // Semantics are set here: + modifier = Modifier.semantics { + onClick( + label = "Open this article", + action = { + // Not needed here: openArticle() + true + } + ) + } + ) +} +// [END android_compose_accessibility_interactive_nested_click] + +@Composable +private fun NestedArticleListItem( + onClickAction: () -> Unit, + modifier: Modifier = Modifier, +) { +} + +@Composable +private fun Semantics( + removeArticle: () -> Unit, + openArticle: () -> Unit, + addToBookmarks: () -> Unit, +) { + +// [START android_compose_accessibility_semantics_alert_polite] + PopupAlert( + message = "You have a new message", + modifier = Modifier.semantics { + liveRegion = LiveRegionMode.Polite + } + ) +// [END android_compose_accessibility_semantics_alert_polite] + +// [START android_compose_accessibility_semantics_alert_assertive] + PopupAlert( + message = "Emergency alert incoming", + modifier = Modifier.semantics { + liveRegion = LiveRegionMode.Assertive + } + ) +// [END android_compose_accessibility_semantics_alert_assertive] + + Box() { +// [START android_compose_accessibility_semantics_window] + ShareSheet( + message = "Choose how to share this photo", + modifier = Modifier + .fillMaxWidth() + .align(Alignment.TopCenter) + .semantics { paneTitle = "New bottom sheet" } + ) +// [END android_compose_accessibility_semantics_window] + } + +// [START android_compose_accessibility_semantics_error] + Error( + errorText = "Fields cannot be empty", + modifier = Modifier + .semantics { + error("Please add both email and password") + } + ) +// [END android_compose_accessibility_semantics_error] + + val progress by remember { mutableFloatStateOf(0F) } +// [START android_compose_accessibility_semantics_progress] + ProgressInfoBar( + modifier = Modifier + .semantics { + progressBarRangeInfo = + ProgressBarRangeInfo( + current = progress, + range = 0F..1F + ) + } + ) +// [END android_compose_accessibility_semantics_progress] + + val milkyWay = List(10) { it.toString() } +// [START android_compose_accessibility_semantics_long_list] + MilkyWayList( + modifier = Modifier + .semantics { + collectionInfo = CollectionInfo( + rowCount = milkyWay.count(), + columnCount = 1 + ) + } + ) { + milkyWay.forEachIndexed { index, text -> + Text( + text = text, + modifier = Modifier.semantics { + collectionItemInfo = + CollectionItemInfo(index, 0, 0, 0) + } + ) + } + } +// [END android_compose_accessibility_semantics_long_list] + +// [START android_compose_accessibility_semantics_custom_action_swipe] + SwipeToDismissBox( + modifier = Modifier.semantics { + // Represents the swipe to dismiss for accessibility + customActions = listOf( + CustomAccessibilityAction( + label = "Remove article from list", + action = { + removeArticle() + true + } + ) + ) + }, + state = rememberSwipeToDismissBoxState(), + backgroundContent = {} + ) { + ArticleListItem() + } +// [END android_compose_accessibility_semantics_custom_action_swipe] + +// [START android_compose_accessibility_semantics_custom_action_long_list] + ArticleListItemRow( + modifier = Modifier + .semantics { + customActions = listOf( + CustomAccessibilityAction( + label = "Open article", + action = { + openArticle() + true + } + ), + CustomAccessibilityAction( + label = "Add to bookmarks", + action = { + addToBookmarks() + true + } + ), + ) + } + ) { + Article( + modifier = Modifier.clearAndSetSemantics { }, + onClick = openArticle, + ) + BookmarkButton( + modifier = Modifier.clearAndSetSemantics { }, + onClick = addToBookmarks, + ) + } +// [END android_compose_accessibility_semantics_custom_action_long_list] +} + +@Composable +private fun PopupAlert( + message: String, + modifier: Modifier = Modifier, +) { +} + +@Composable +fun ShareSheet( + message: String, + modifier: Modifier = Modifier, +) { +} + +@Composable +private fun Error( + errorText: String, + modifier: Modifier = Modifier, +) { +} + +@Composable +private fun ProgressInfoBar( + modifier: Modifier = Modifier, +) { +} + +@Composable +private fun MilkyWayList( + modifier: Modifier = Modifier, + content: @Composable () -> Unit, +) { + content() +} + +@Composable +private fun ArticleListItemRow( + modifier: Modifier = Modifier, + content: @Composable () -> Unit, +) { + content() +} + +@Composable +fun Article( + onClick: () -> Unit, + modifier: Modifier = Modifier, +) { +} + +@Composable +fun BookmarkButton( + onClick: () -> Unit, + modifier: Modifier = Modifier, +) { +} + +// [START android_compose_accessibility_merging] +@Composable +private fun ArticleListItem( + openArticle: () -> Unit, + addToBookmarks: () -> Unit, +) { + + Row(modifier = Modifier.clickable { openArticle() }) { + // Merges with parent clickable: + Icon( + painter = painterResource(R.drawable.ic_logo), + contentDescription = "Article thumbnail" + ) + ArticleDetails() + + // Defies the merge due to its own clickable: + BookmarkButton(onClick = addToBookmarks) + } +} +// [END android_compose_accessibility_merging] + +@Composable +fun ArticleDetails( + modifier: Modifier = Modifier, +) { +} + +// [START android_compose_accessibility_clearing] +// Developer might intend this to be a toggleable. +// Using `clearAndSetSemantics`, on the Row, a clickable modifier is applied, +// a custom description is set, and a Role is applied. + +@Composable +fun FavoriteToggle() { + val checked = remember { mutableStateOf(true) } + Row( + modifier = Modifier + .toggleable( + value = checked.value, + onValueChange = { checked.value = it } + ) + .clearAndSetSemantics { + stateDescription = if (checked.value) "Favorited" else "Not favorited" + toggleableState = ToggleableState(checked.value) + role = Role.Switch + }, + ) { + Icon( + imageVector = Icons.Default.Favorite, + contentDescription = null // not needed here + + ) + Text("Favorite?") + } +} +// [END android_compose_accessibility_clearing] + +// [START android_compose_accessibility_hiding] +@Composable +fun WatermarkExample( + watermarkText: String, + content: @Composable () -> Unit, +) { + Box { + WatermarkedContent() + // Mark the watermark as hidden to accessibility services. + WatermarkText( + text = watermarkText, + color = Color.Gray.copy(alpha = 0.5f), + modifier = Modifier + .align(Alignment.BottomEnd) + .semantics { hideFromAccessibility() } + ) + } +} + +@Composable +fun DecorativeExample() { + Text( + modifier = + Modifier.semantics { + hideFromAccessibility() + }, + text = "A dot character that is used to decoratively separate information, like •" + ) +} +// [END android_compose_accessibility_hiding] + +@Composable +private fun WatermarkedContent() { +} + +@Composable +private fun WatermarkText( + text: String, + color: Color, + modifier: Modifier = Modifier, +) { +} + private object ColumnWithFab { // [START android_compose_accessibility_traversal_fab_scaffold] @OptIn(ExperimentalMaterial3Api::class) diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index 733b3cd7e..0a2589feb 100644 --- a/gradle/libs.versions.toml +++ b/gradle/libs.versions.toml @@ -7,6 +7,7 @@ androidx-activity-compose = "1.10.1" androidx-appcompat = "1.7.0" androidx-compose-bom = "2025.04.01" androidx-compose-ui-test = "1.7.0-alpha08" +androidx-compose-ui-test-junit4-accessibility = "1.8.0-rc02" androidx-constraintlayout = "2.2.1" androidx-constraintlayout-compose = "1.1.1" androidx-coordinator-layout = "1.3.0" @@ -97,8 +98,9 @@ androidx-compose-runtime-livedata = { module = "androidx.compose.runtime:runtime androidx-compose-ui = { module = "androidx.compose.ui:ui", version.ref = "compose-latest" } androidx-compose-ui-googlefonts = { module = "androidx.compose.ui:ui-text-google-fonts" } androidx-compose-ui-graphics = { module = "androidx.compose.ui:ui-graphics" } -androidx-compose-ui-test = { module = "androidx.compose.ui:ui-test" } -androidx-compose-ui-test-junit4 = { module = "androidx.compose.ui:ui-test-junit4" } +androidx-compose-ui-test = { module = "androidx.compose.ui:ui-test", version.ref = "compose-latest" } +androidx-compose-ui-test-junit4 = { module = "androidx.compose.ui:ui-test-junit4", version.ref = "compose-latest" } +androidx-compose-ui-test-junit4-accessibility = { group = "androidx.compose.ui", name = "ui-test-junit4-accessibility", version.ref = "androidx-compose-ui-test-junit4-accessibility" } androidx-compose-ui-test-manifest = { module = "androidx.compose.ui:ui-test-manifest" } androidx-compose-ui-tooling = { module = "androidx.compose.ui:ui-tooling" } androidx-compose-ui-tooling-preview = { module = "androidx.compose.ui:ui-tooling-preview" }