Accessibility testing in Jetpack Compose
Think about an utility that incorporates desk info. On this utility, every row will embrace the identify of a rustic and its capital. Customers will be capable to entry and browse the info within the desk utilizing assistive applied sciences.
Instance code:
@Composable
enjoyable AccessibilityExample() {
val countryList = listOf(
Nation("Turkey", "Ankara"),
Nation("USA", "Washington, D.C."),
Nation("France", "Paris"),
// Different nations...
)
Column {
for (nation in countryList) {
CountryRow(nation)
}
}
}
@Composable
enjoyable CountryRow(nation: Nation) {
Row(
modifier = Modifier
.clickable { /* Click on motion */ }
.padding(16.dp)
.semantics {
// Set the nation identify and capital because the accessibility description
contentDescription = "Nation: ${nation.identify}, Capital: ${nation.capital}"
}
) {
Textual content(textual content = nation.identify, fashion = MaterialTheme.typography.body1)
Spacer(modifier = Modifier.width(16.dp))
Textual content(textual content = nation.capital, fashion = MaterialTheme.typography.body2)
}
}
information class Nation(val identify: String, val capital: String)
On this instance, we outline a predominant element referred to as AccessibilityExamplethat created CountryRow parts signify nation information within the type of a listing.
CountryRow represents one row for every nation. The Modifier used to make the row clickable and semantics perform is used to supply accessibility description. Nation and capital names are mixed utilizing contentDescription to set the accessibility description.
Take a look at code:
@Take a look at
enjoyable testAccessibilityExample() {
val countryList = listOf(
Nation("Turkey", "Ankara"),
Nation("USA", "Washington, D.C."),
Nation("France", "Paris")
)
// Use CompositionLocalProvider to check the appliance
compositionTestRule.setContent {
Column {
for (nation in countryList) {
CountryRow(nation)
}
}
}
// Verify if every nation has the proper accessibility description
countryList.forEach { nation ->
val accessibilityDescription =
"Nation: ${nation.identify}, Capital: ${nation.capital}"
// Confirm that the semantics of CountryRow are appropriately set
composeTestRule.onNodeWithText(nation.identify).assertSemantics {
assert(hasClickAction())
assert(hasContentDescription(accessibilityDescription))
}
composeTestRule.onNodeWithText(nation.capital).assertSemantics {
assert(hasClickAction())
assert(hasContentDescription(accessibilityDescription))
}
}
}
This check instance checks if CountryRow component has the proper accessibility properties. It validates whether or not the accessibility descriptor is about correctly and whether or not it’s clickable for every nation.
Within the instance check, the appliance is configured for testing utilizing composeTestRule And CompositionLocalProvider. It then verifies if every nation has the proper accessibility and clickability description.
This fashion you may create an accessible element utilizing Jetpack Compose and write checks to make sure that the element works appropriately.