[#275] Change the top app bar focus order so that TalkBack reads the …

…title first
Orange-OpenSource · Dec 15, 2023 · 181c67f · 181c67f
1 parent f7be902
commit 181c67f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/lib/src/main/java/com/orange/ods/compose/component/appbar/top/OdsLargeTopAppBar.kt b/lib/src/main/java/com/orange/ods/compose/component/appbar/top/OdsLargeTopAppBar.kt
@@ -26,6 +26,9 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.semantics.isTraversalGroup
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.traversalIndex
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
@@ -124,14 +127,15 @@ fun OdsLargeTopAppBarInternal(
                         start = titleStartPadding,
                         end = dimensionResource(id = R.dimen.spacing_m)
                     )
-                    .alpha(titleAlpha),
+                    .alpha(titleAlpha)
+                    .semantics { traversalIndex = -1f },
                 text = title,
                 style = OdsTheme.typography.h6,
                 overflow = TextOverflow.Ellipsis,
                 maxLines = titleMaxLines,
             )
         },
-        modifier = modifier,
+        modifier = modifier.semantics { isTraversalGroup = true },
         navigationIcon = { navigationIcon?.Content() },
         actions = { OdsTopAppBarActions(actions = actions, overflowMenuItems = overflowMenuItems) },
         colors = TopAppBarDefaults.largeTopAppBarColors(

diff --git a/lib/src/main/java/com/orange/ods/compose/component/appbar/top/OdsTopAppBar.kt b/lib/src/main/java/com/orange/ods/compose/component/appbar/top/OdsTopAppBar.kt
@@ -18,6 +18,9 @@ import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.semantics.isTraversalGroup
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.traversalIndex
 import androidx.compose.ui.unit.dp
 import com.orange.ods.compose.component.OdsComposable
 import com.orange.ods.compose.component.content.OdsComponentContent
@@ -75,8 +78,8 @@ fun OdsTopAppBarInternal(
     elevated: Boolean = true
 ) {
     TopAppBar(
-        title = { Text(text = title, style = OdsTheme.typography.h6) },
-        modifier = modifier,
+        title = { Text(text = title, style = OdsTheme.typography.h6, modifier = Modifier.semantics { traversalIndex = -1f }) },
+        modifier = modifier.semantics { isTraversalGroup = true },
         navigationIcon = navigationIcon?.let { { it.Content() } },
         actions = { OdsTopAppBarActions(actions = actions, overflowMenuItems = overflowMenuItems) },
         backgroundColor = OdsTheme.colors.component.topAppBar.barBackground,
@@ -99,4 +102,4 @@ private fun PreviewOdsTopAppBar() = Preview {
         actions = actions,
         overflowMenuItems = overflowMenuItems
     )
-}
+}