Merge pull request #400 from android/jv/rally_a11y

[Rally] Content description, tabs, and grouping views

Author: JolandaVerhoef

Rally/app/src/main/java/com/example/compose/rally/ui/components/CommonUi.kt

@@ -39,6 +39,8 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.unit.dp
 import com.example.compose.rally.R
 import java.text.DecimalFormat
@@ -79,8 +81,15 @@ private fun BaseRow(
     amount: Float,
     negative: Boolean
 ) {
+    val dollarSign = if (negative) "–$ " else "$ "
+    val formattedAmount = formatAmount(amount)
     Row(
-        modifier = Modifier.height(68.dp),
+        modifier = Modifier
+            .height(68.dp)
+            .clearAndSetSemantics {
+                contentDescription =
+                    "$title account ending in ${subtitle.takeLast(4)}, current balance $dollarSign$formattedAmount"
+            },
         verticalAlignment = Alignment.CenterVertically
     ) {
         val typography = MaterialTheme.typography
@@ -100,14 +109,12 @@ private fun BaseRow(
             horizontalArrangement = Arrangement.SpaceBetween
         ) {
             Text(
-                text = if (negative) "–$ " else "$ ",
+                text = dollarSign,
                 style = typography.h6,
                 modifier = Modifier.align(Alignment.CenterVertically)
             )
             Text(
-                text = formatAmount(
-                    amount
-                ),
+                text = formattedAmount,
                 style = typography.h6,
                 modifier = Modifier.align(Alignment.CenterVertically)
             )

Rally/app/src/main/java/com/example/compose/rally/ui/components/TopAppBar.kt

@@ -40,6 +40,8 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.semantics.clearAndSetSemantics
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.example.compose.rally.RallyScreen
@@ -96,6 +98,7 @@ private fun RallyTab(
             .selectable(
                 selected = selected,
                 onClick = onSelected,
+                role = Role.Tab,
                 interactionSource = remember { MutableInteractionSource() },
                 indication = rememberRipple(
                     bounded = false,
@@ -104,10 +107,10 @@ private fun RallyTab(
                 )
             )
     ) {
-        Icon(imageVector = icon, contentDescription = null, tint = tabTintColor)
+        Icon(imageVector = icon, contentDescription = text, tint = tabTintColor)
         if (selected) {
             Spacer(Modifier.width(12.dp))
-            Text(text, color = tabTintColor)
+            Text(text, color = tabTintColor, modifier = Modifier.clearAndSetSemantics {})
         }
     }
 }

Rally/app/src/main/java/com/example/compose/rally/ui/overview/OverviewScreen.kt

@@ -44,6 +44,8 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.dp
 import com.example.compose.rally.R
 import com.example.compose.rally.RallyScreen
@@ -128,7 +130,13 @@ private fun AlertHeader(onClickSeeAll: () -> Unit) {
 @Composable
 private fun AlertItem(message: String) {
     Row(
-        modifier = Modifier.padding(RallyDefaultPadding),
+        modifier = Modifier
+            .padding(RallyDefaultPadding)
+            // Regard the whole row as one semantics node. This way each row will receive focus as
+            // a whole and the focus bounds will be around the whole row content. The semantics
+            // properties of the descendants will be merged. If we'd use clearAndSetSemantics instead,
+            // we'd have to define the semantics properties explicitly.
+            .semantics(mergeDescendants = true) {},
         horizontalArrangement = Arrangement.SpaceBetween
     ) {
         Text(
@@ -138,9 +146,11 @@ private fun AlertItem(message: String) {
         )
         IconButton(
             onClick = {},
-            modifier = Modifier.align(Alignment.Top)
+            modifier = Modifier
+                .align(Alignment.Top)
+                .clearAndSetSemantics {}
         ) {
-            Icon(Icons.Filled.Sort, contentDescription = stringResource(id = R.string.sort))
+            Icon(Icons.Filled.Sort, contentDescription = null)
         }
     }
 }
@@ -193,6 +203,7 @@ private fun <T> OverViewDivider(
         }
     }
 }
+
 /**
  * The Accounts card within the Rally Overview screen.
  */
@@ -217,6 +228,7 @@ private fun AccountsCard(onScreenChange: (RallyScreen) -> Unit) {
         )
     }
 }
+
 /**
  * The Bills card within the Rally Overview screen.
  */