PM-12761 Talkback UI Focus misalignment bug. (#4325)

app/src/main/java/com/x8bit/bitwarden/ui/auth/feature/welcome/WelcomeScreen.kt

@@ -32,6 +32,9 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
@@ -123,15 +126,20 @@ private fun WelcomeScreenContent(
         Spacer(modifier = Modifier.weight(1f))
 
         HorizontalPager(state = pagerState) { index ->
+            val pageNumberContentDescription =
+                stringResource(R.string.page_number_x_of_y, index + 1, state.pages.size)
+            val pagerSemanticsModifier = Modifier.semantics(mergeDescendants = true) {
+                contentDescription = pageNumberContentDescription
+            }
             if (LocalConfiguration.current.isPortrait) {
                 WelcomeCardPortrait(
                     state = state.pages[index],
-                    modifier = Modifier.standardHorizontalMargin(),
+                    modifier = pagerSemanticsModifier.standardHorizontalMargin(),
                 )
             } else {
                 WelcomeCardLandscape(
                     state = state.pages[index],
-                    modifier = Modifier
+                    modifier = pagerSemanticsModifier
                         .standardHorizontalMargin(landscape = LANDSCAPE_HORIZONTAL_MARGIN),
                 )
             }
@@ -176,7 +184,7 @@ private fun WelcomeCardLandscape(
 ) {
     Row(
         verticalAlignment = Alignment.CenterVertically,
-        modifier = modifier,
+        modifier = modifier.semantics(mergeDescendants = true) {},
     ) {
         Image(
             painter = rememberVectorPainter(id = state.imageRes),
@@ -213,7 +221,8 @@ private fun WelcomeCardPortrait(
 ) {
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
-        modifier = modifier,
+        modifier = modifier
+            .semantics(mergeDescendants = true) {},
     ) {
         Image(
             painter = rememberVectorPainter(id = state.imageRes),
@@ -264,6 +273,9 @@ private fun IndicatorDots(
 
             Box(
                 modifier = Modifier
+                    .clearAndSetSemantics {
+                        // clear semantics so indicator dots are skipped by screen reader
+                    }
                     .size(8.dp)
                     .clip(CircleShape)
                     .background(color.value)

app/src/main/res/values/strings.xml

@@ -1087,4 +1087,5 @@ Do you want to switch to this account?</string>
   <string name="bitwarden_can_notify_you_each_time_you_receive_a_new_login_request_from_another_device">Bitwarden can notify you each time you receive a new login request from another device.</string>
   <string name="skip_for_now">Skip for now</string>
   <string name="done_text">Done</string>
+  <string name="page_number_x_of_y">%1$s of %2$s</string>
 </resources>