fix: Improve discoverability with talkback of the add button in route…

… screen
Scottish-Tech-Army · Nov 10, 2024 · 66dc7d1 · 66dc7d1
1 parent 64b099d
commit 66dc7d1
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 106 deletions.
diff --git a/app/src/main/java/org/scottishtecharmy/soundscape/screens/home/HomeScreen.kt b/app/src/main/java/org/scottishtecharmy/soundscape/screens/home/HomeScreen.kt
@@ -15,8 +15,6 @@ import org.scottishtecharmy.soundscape.screens.home.home.Home
 import org.scottishtecharmy.soundscape.screens.home.locationDetails.LocationDescription
 import org.scottishtecharmy.soundscape.screens.home.locationDetails.LocationDetailsScreen
 import org.scottishtecharmy.soundscape.screens.home.settings.Settings
-import org.scottishtecharmy.soundscape.screens.markers_routes.navigation.MarkersAndRoutesNavGraph
-import org.scottishtecharmy.soundscape.screens.markers_routes.navigation.ScreensForMarkersAndRoutes
 import org.scottishtecharmy.soundscape.screens.markers_routes.screens.MarkersAndRoutesScreen
 import org.scottishtecharmy.soundscape.screens.markers_routes.screens.addroute.AddRouteScreen
 import org.scottishtecharmy.soundscape.viewmodels.HomeViewModel
@@ -119,14 +117,6 @@ fun HomeScreen(
                 val selectedTab = backStackEntry.arguments?.getString("tab")
                 MarkersAndRoutesScreen(mainNavController = navController, selectedTab = selectedTab)
             }
-
-            // Nested graph: Routes and Markers
-            composable(ScreensForMarkersAndRoutes.Markers.route) {
-                MarkersAndRoutesNavGraph(
-                    navController = navController,
-                    startDestination = "Markers",
-                )
-            }
         }
 
         // AddRouteScreen, accessible within the MarkersAndRoutesScreen

diff --git a/...in/java/org/scottishtecharmy/soundscape/screens/markers_routes/components/CustomAppBar.kt b/...in/java/org/scottishtecharmy/soundscape/screens/markers_routes/components/CustomAppBar.kt
@@ -1,10 +1,5 @@
 package org.scottishtecharmy.soundscape.screens.markers_routes.components
 
-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.expandHorizontally
-import androidx.compose.animation.fadeIn
-import androidx.compose.animation.fadeOut
-import androidx.compose.animation.shrinkHorizontally
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.IntrinsicSize
@@ -13,10 +8,6 @@ import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.size
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Add
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
@@ -36,8 +27,6 @@ import org.scottishtecharmy.soundscape.ui.theme.SoundscapeTheme
 @Composable
 fun CustomAppBar(title : String,
                  onNavigateUp: () -> Unit,
-                 onAddClicked: (() -> Unit)? = null,
-                 showAddIcon: Boolean = false,
                  navigationButtonTitle: String = stringResource(R.string.ui_back_button_title),
                  ) {
     Surface(
@@ -67,25 +56,6 @@ fun CustomAppBar(title : String,
                     modifier = Modifier.semantics { heading() }
                 )
             }
-
-
-            AnimatedVisibility(
-                visible = showAddIcon,
-                enter = fadeIn() + expandHorizontally(),
-                exit = fadeOut() + shrinkHorizontally(),
-                modifier = Modifier.fillMaxHeight()
-            ) {
-                IconButton(
-                    onClick = {
-                        onAddClicked?.invoke()
-                    }
-                ){
-                    Icon(
-                        Icons.Default.Add,
-                        contentDescription = stringResource(R.string.general_alert_add),
-                    )
-                }
-            }
         }
     }
 }
@@ -98,9 +68,7 @@ fun CustomAppBarPreview() {
         CustomAppBar(
             "Test app bar with long title",
             navigationButtonTitle = "Back",
-            showAddIcon = false,
             onNavigateUp = {},
-            onAddClicked = {}
         )
     }
 }
@@ -113,9 +81,7 @@ fun CustomAppBarWithActionButtonPreview() {
         CustomAppBar(
             "Test app bar",
             navigationButtonTitle = "Back",
-            showAddIcon = true,
             onNavigateUp = {},
-            onAddClicked = {}
         )
     }
 }
diff --git a/...g/scottishtecharmy/soundscape/screens/markers_routes/components/MarkersAndRoutesAppBar.kt b/...g/scottishtecharmy/soundscape/screens/markers_routes/components/MarkersAndRoutesAppBar.kt
@@ -7,19 +7,15 @@ import androidx.compose.ui.tooling.preview.Preview
 import org.scottishtecharmy.soundscape.R
 import org.scottishtecharmy.soundscape.ui.theme.SoundscapeTheme
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun MarkersAndRoutesAppBar(showAddIcon: Boolean,
-                           onNavigateUp: () -> Unit,
-                           onNavigateToDestination: () -> Unit
+fun MarkersAndRoutesAppBar(
+   onNavigateUp: () -> Unit,
 ) {
 
     CustomAppBar(
         title = stringResource(R.string.search_view_markers),
         navigationButtonTitle = stringResource(R.string.ui_back_button_title),
         onNavigateUp = onNavigateUp,
-        showAddIcon = showAddIcon,
-        onAddClicked = onNavigateToDestination,
     )
 }
 
@@ -28,10 +24,7 @@ fun MarkersAndRoutesAppBar(showAddIcon: Boolean,
 fun MarkersAndRoutesAppBarPreview() {
     SoundscapeTheme {
         MarkersAndRoutesAppBar(
-            showAddIcon = true,
             onNavigateUp = {},
-            onNavigateToDestination = {}
-
         )
     }
 }
diff --git a/...tishtecharmy/soundscape/screens/markers_routes/components/MarkersAndRoutesBottomNavBar.kt b/...tishtecharmy/soundscape/screens/markers_routes/components/MarkersAndRoutesBottomNavBar.kt
@@ -23,7 +23,7 @@ val items = listOf(
 )
 
 @Composable
-fun BottomNavigationBar(navController: NavController,
+fun MarkersAndRoutesTabs(navController: NavController,
 ) {
     val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route
 
@@ -75,7 +75,7 @@ fun BottomNavigationBar(navController: NavController,
 fun BottomNavigationBarPreview() {
     val navController = rememberNavController()
     MaterialTheme {
-        BottomNavigationBar(navController = navController,
+        MarkersAndRoutesTabs(navController = navController,
         )
     }
 }
diff --git a/...scottishtecharmy/soundscape/screens/markers_routes/navigation/MarkersAndRoutesNavGraph.kt b/...scottishtecharmy/soundscape/screens/markers_routes/navigation/MarkersAndRoutesNavGraph.kt
@@ -12,6 +12,7 @@ import org.scottishtecharmy.soundscape.screens.markers_routes.screens.addroute.A
 @Composable
 fun MarkersAndRoutesNavGraph(
     navController: NavHostController,
+    onNavigateToAddRoute: () -> Unit,
     startDestination: String) {
     NavHost(
         navController = navController,
@@ -21,7 +22,10 @@ fun MarkersAndRoutesNavGraph(
             MarkersScreen(navController = navController)
         }
         composable(ScreensForMarkersAndRoutes.Routes.route) {
-            RoutesScreen(navController = navController)
+            RoutesScreen(
+                navController = navController,
+                onNavigateToAddRoute = onNavigateToAddRoute
+            )
         }
 
         // AddRouteScreen, accessible within the MarkersAndRoutesScreen

diff --git a/.../org/scottishtecharmy/soundscape/screens/markers_routes/screens/MarkersAndRoutesScreen.kt b/.../org/scottishtecharmy/soundscape/screens/markers_routes/screens/MarkersAndRoutesScreen.kt
@@ -1,6 +1,7 @@
 package org.scottishtecharmy.soundscape.screens.markers_routes.screens
 
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
@@ -10,14 +11,17 @@ import androidx.navigation.NavController
 import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
 import org.scottishtecharmy.soundscape.screens.home.HomeRoutes
-import org.scottishtecharmy.soundscape.screens.markers_routes.components.BottomNavigationBar
+import org.scottishtecharmy.soundscape.screens.markers_routes.components.MarkersAndRoutesTabs
 import org.scottishtecharmy.soundscape.screens.markers_routes.components.MarkersAndRoutesAppBar
 import org.scottishtecharmy.soundscape.screens.markers_routes.navigation.MarkersAndRoutesNavGraph
 import org.scottishtecharmy.soundscape.screens.markers_routes.navigation.ScreensForMarkersAndRoutes
 import org.scottishtecharmy.soundscape.ui.theme.SoundscapeTheme
 
 @Composable
-fun MarkersAndRoutesScreen(mainNavController: NavController, selectedTab: String?) {
+fun MarkersAndRoutesScreen(
+    mainNavController: NavController,
+    selectedTab: String?
+) {
     // Nested navController for the tab navigation inside MarkersAndRoutes
     val nestedNavController = rememberNavController()
 
@@ -27,24 +31,22 @@ fun MarkersAndRoutesScreen(mainNavController: NavController, selectedTab: String
 
     Scaffold(
         topBar = {
-            MarkersAndRoutesAppBar(
-                showAddIcon = showAddIcon,
-                onNavigateUp = {
-                    mainNavController.navigateUp()
-                },
-                onNavigateToDestination = {
-                    mainNavController.navigate(HomeRoutes.AddRoute.route)
-                },
-            )
-        },
-        bottomBar = {
-            BottomNavigationBar(navController = nestedNavController)
-        }
+            Column {
+                MarkersAndRoutesAppBar(
+                    onNavigateUp = {
+                        mainNavController.navigateUp()
+                    },
+                )
+                MarkersAndRoutesTabs(navController = nestedNavController)
+            }},
     ) { innerPadding ->
         Box(modifier = Modifier.padding(innerPadding)) {
             // MarkersAndRoutesNavGraph is now responsible for handling navigation
             MarkersAndRoutesNavGraph(
                 navController = nestedNavController,
+                onNavigateToAddRoute = {
+                    mainNavController.navigate(HomeRoutes.AddRoute.route)
+                },
                 startDestination = selectedTab ?: ScreensForMarkersAndRoutes.Markers.route
             )
         }

diff --git a/.../main/java/org/scottishtecharmy/soundscape/screens/markers_routes/screens/RoutesScreen.kt b/.../main/java/org/scottishtecharmy/soundscape/screens/markers_routes/screens/RoutesScreen.kt
@@ -1,22 +1,25 @@
 package org.scottishtecharmy.soundscape.screens.markers_routes.marker_route_screens
 
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.AddCircleOutline
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -27,45 +30,65 @@ import org.scottishtecharmy.soundscape.ui.theme.SoundscapeTheme
 
 
 @Composable
-fun RoutesScreen(navController: NavController) {
+fun RoutesScreen(
+    navController: NavController,
+    onNavigateToAddRoute: () -> Unit,
+) {
     Column(
         modifier = Modifier
             .fillMaxSize()
             .verticalScroll(rememberScrollState()),
         horizontalAlignment = Alignment.CenterHorizontally,
-        verticalArrangement = Arrangement.Center
     ) {
-        Box(modifier = Modifier.padding(top = 40.dp)) {
-            Image(
-                painter = painterResource(
-                    id = R.drawable.routes_selected
-                ),
-                contentDescription = null,
-                modifier = Modifier.size(80.dp)
-            )
-        }
-        Box(modifier = Modifier.padding(top = 10.dp)) {
-            Text(
-                stringResource(R.string.routes_no_routes_title),
-                style = MaterialTheme.typography.titleLarge,
-                textAlign = TextAlign.Center,
-                fontWeight = FontWeight.Bold,
-            )
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier.semantics(mergeDescendants = true) {}
+            ) {
+            Box(modifier = Modifier.padding(top = 40.dp)) {
+                Image(
+                    painter = painterResource(
+                        id = R.drawable.routes_selected
+                    ),
+                    contentDescription = null,
+                    modifier = Modifier.size(80.dp)
+                )
+            }
+            Box(modifier = Modifier.padding(top = 10.dp)) {
+                Text(
+                    stringResource(R.string.routes_no_routes_title),
+                    style = MaterialTheme.typography.titleLarge,
+                    color = MaterialTheme.colorScheme.onBackground,
+                    textAlign = TextAlign.Center,
+                )
+            }
+            Box(modifier = Modifier.padding(top = 10.dp)) {
+                Text(
+                    stringResource(R.string.routes_no_routes_hint_1),
+                    color = MaterialTheme.colorScheme.onBackground,
+                    style = MaterialTheme.typography.bodyMedium,
+                    textAlign = TextAlign.Center,
+                )
+            }
+            Box(modifier = Modifier.padding(top = 10.dp, bottom = 40.dp)) {
+                Text(
+                    stringResource(R.string.routes_no_routes_hint_2),
+                    color = MaterialTheme.colorScheme.onBackground,
+                    style = MaterialTheme.typography.bodyMedium,
+                    textAlign = TextAlign.Center,
+                )
+            }
         }
-        Box(modifier = Modifier.padding(top = 10.dp)) {
-            Text(
-                stringResource(R.string.routes_no_routes_hint_1),
-                style = MaterialTheme.typography.bodyMedium,
-                textAlign = TextAlign.Center,
-                fontWeight = FontWeight.Bold,
-            )
-        }
-        Box(modifier = Modifier.padding(top = 10.dp, bottom = 40.dp)) {
-            Text(
-                stringResource(R.string.routes_no_routes_hint_2),
-                style = MaterialTheme.typography.bodyMedium,
-                textAlign = TextAlign.Center,
-                fontWeight = FontWeight.Bold,
+        IconButton(
+            onClick = {
+                onNavigateToAddRoute.invoke()
+            },
+            modifier = Modifier.size(90.dp)
+        ){
+            Icon(
+                Icons.Rounded.AddCircleOutline,
+                tint = MaterialTheme.colorScheme.onBackground,
+                contentDescription = stringResource(R.string.general_alert_add),
+                modifier = Modifier.size(80.dp)
             )
         }
     }
@@ -75,6 +98,9 @@ fun RoutesScreen(navController: NavController) {
 @Composable
 fun RoutesScreenPreview() {
     SoundscapeTheme {
-        RoutesScreen(navController = rememberNavController())
+        RoutesScreen(
+            navController = rememberNavController(),
+            onNavigateToAddRoute = {}
+        )
     }
 }