fix : display modal bottom sheet to pick theme color when screen read…

…er is ON (Gurupreet#124)
cristinnabea · Oct 15, 2021 · 5ab343b · 5ab343b
1 parent 8d6212d
commit 5ab343b
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 69 deletions.
diff --git a/.idea/deploymentTargetDropDown.xml b/.idea/deploymentTargetDropDown.xml
diff --git a/app/src/main/java/com/guru/composecookbook/MainActivity.kt b/app/src/main/java/com/guru/composecookbook/MainActivity.kt
@@ -13,6 +13,7 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.PlayArrow
 import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
@@ -24,11 +25,13 @@ import com.guru.composecookbook.theme.*
 import com.guru.composecookbook.ui.animation.AnimationScreen
 import com.guru.composecookbook.ui.demoapps.DemoUIList
 import com.guru.composecookbook.ui.home.HomeScreen
+import com.guru.composecookbook.ui.home.PalletMenu
 import com.guru.composecookbook.ui.learnwidgets.WidgetScreen
 import com.guru.composecookbook.ui.templates.TemplateScreen
 import com.guru.composecookbook.ui.utils.RotateIcon
 import com.guru.composecookbook.ui.utils.TestTags
 import com.guru.fontawesomecomposelib.FaIcon
+import kotlinx.coroutines.launch
 
 class MainActivity : ComponentActivity() {
     @ExperimentalAnimationApi
@@ -73,13 +76,14 @@ fun BaseView(
 fun HomeScreenContent(
     homeScreen: BottomNavType,
     appThemeState: MutableState<AppThemeState>,
+    chooseColorBottomModalState : ModalBottomSheetState, //use for a11y
     modifier: Modifier
 ) {
     Column(modifier = modifier) {
         Crossfade(homeScreen) { screen ->
             Surface(color = MaterialTheme.colors.background) {
                 when (screen) {
-                    BottomNavType.HOME -> HomeScreen(appThemeState)
+                    BottomNavType.HOME -> HomeScreen(appThemeState, chooseColorBottomModalState)
                     BottomNavType.WIDGETS -> WidgetScreen()
                     BottomNavType.ANIMATION -> AnimationScreen()
                     BottomNavType.DEMOUI -> DemoUIList()
@@ -99,20 +103,40 @@ fun MainAppContent(appThemeState: MutableState<AppThemeState>) {
     //Default home screen state is always HOME
     val homeScreenState = rememberSaveable { mutableStateOf(BottomNavType.HOME) }
     val bottomNavBarContentDescription = stringResource(id = R.string.a11y_bottom_navigation_bar)
+    val chooseColorBottomModalState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
 
-    Column {
-        HomeScreenContent(
-            homeScreen = homeScreenState.value,
-            appThemeState = appThemeState,
-            modifier = Modifier.weight(1f)
-        )
-        BottomNavigationContent(
-            modifier = Modifier
-                .semantics { contentDescription = bottomNavBarContentDescription }
-                .testTag(TestTags.BOTTOM_NAV_TEST_TAG),
-            homeScreenState = homeScreenState
-        )
+    val coroutineScope = rememberCoroutineScope()
+
+    ModalBottomSheetLayout(
+        sheetState = chooseColorBottomModalState,
+        sheetContent = {
+            //Modal used only when user use talkback for the sake of accessibility
+            PalletMenu(
+                modifier = Modifier.align(Alignment.CenterHorizontally)
+            ) { newPalletSelected ->
+                appThemeState.value = appThemeState.value.copy(pallet = newPalletSelected)
+                coroutineScope.launch {
+                    chooseColorBottomModalState.hide()
+                }
+            }
+        }
+    ) {
+        Column {
+            HomeScreenContent(
+                homeScreen = homeScreenState.value,
+                appThemeState = appThemeState,
+                chooseColorBottomModalState = chooseColorBottomModalState,
+                modifier = Modifier.weight(1f)
+            )
+            BottomNavigationContent(
+                modifier = Modifier
+                    .semantics { contentDescription = bottomNavBarContentDescription }
+                    .testTag(TestTags.BOTTOM_NAV_TEST_TAG),
+                homeScreenState = homeScreenState
+            )
+        }
     }
+
 }
 
 @Composable
@@ -222,4 +246,4 @@ fun DefaultPreview() {
     BaseView(appThemeState.value, null) {
         MainAppContent(appThemeState)
     }
-}
+}
diff --git a/app/src/main/java/com/guru/composecookbook/ui/home/HomeScreen.kt b/app/src/main/java/com/guru/composecookbook/ui/home/HomeScreen.kt
@@ -1,8 +1,10 @@
 package com.guru.composecookbook.ui.home
 
+import android.annotation.SuppressLint
 import android.content.Context
 import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.GridCells
@@ -14,17 +16,15 @@ import androidx.compose.material.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.FiberManualRecord
 import androidx.compose.material.icons.filled.Palette
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.MutableState
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.guru.composecookbook.R
@@ -38,13 +38,19 @@ import com.guru.composecookbook.ui.home.dynamic.DynamicUIActivity
 import com.guru.composecookbook.ui.home.dynamic.DynamicUiType
 import com.guru.composecookbook.ui.home.lists.ListViewActivity
 import com.guru.composecookbook.ui.utils.TestTags
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.launch
 import java.util.*
 
 
+@OptIn(ExperimentalMaterialApi::class)
 @ExperimentalFoundationApi
 @Composable
-fun HomeScreen(appThemeState: MutableState<AppThemeState>) {
+fun HomeScreen(appThemeState: MutableState<AppThemeState>,
+               chooseColorBottomModalState: ModalBottomSheetState) {
     val showMenu = remember { mutableStateOf(false) }
+    val coroutineScope = rememberCoroutineScope()
+
     Scaffold(
         modifier = Modifier.testTag(TestTags.HOME_SCREEN_ROOT),
         topBar = {
@@ -58,12 +64,10 @@ fun HomeScreen(appThemeState: MutableState<AppThemeState>) {
                     }) {
                         Icon(
                             painter = painterResource(id = R.drawable.ic_sleep),
-                            contentDescription = null
+                            contentDescription = stringResource(id = R.string.cd_dark_theme)
                         )
                     }
-                    IconButton(onClick = { showMenu.value = !showMenu.value }) {
-                        Icon(imageVector = Icons.Default.Palette, contentDescription = null)
-                    }
+                    ChangeColorIconButton(coroutineScope, chooseColorBottomModalState, showMenu)
                 },
             )
         },
@@ -78,6 +82,36 @@ fun HomeScreen(appThemeState: MutableState<AppThemeState>) {
     )
 }
 
+
+@SuppressLint("ServiceCast")
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+private fun ChangeColorIconButton(
+    coroutineScope: CoroutineScope,
+    chooseColorBottomModalState: ModalBottomSheetState,
+    showMenu: MutableState<Boolean>
+) {
+    val accessibilityManager = LocalContext.current.getSystemService(Context.ACCESSIBILITY_SERVICE)
+                as android.view.accessibility.AccessibilityManager
+    IconButton(onClick = {
+        if (accessibilityManager.isEnabled && accessibilityManager.isTouchExplorationEnabled) {
+            //Showing modal bottom sheet instead when user use a screen reader (otherwise it's not accessible)
+            coroutineScope.launch {
+                chooseColorBottomModalState.show()
+            }
+        } else {
+            showMenu.value = !showMenu.value
+        }
+    }) {
+        Icon(
+            imageVector = Icons.Default.Palette, contentDescription = stringResource(
+                id = R.string.cd_change_color
+            )
+        )
+    }
+}
+
+@OptIn(ExperimentalMaterialApi::class)
 @ExperimentalFoundationApi
 @Composable
 fun HomeScreenContent(
@@ -112,44 +146,40 @@ fun HomeScreenContent(
                     })
             }
         }
-        PalletMenu(
-            modifier = Modifier.align(Alignment.TopEnd),
-            showMenu.value,
-            onPalletChange
-        )
+        if(showMenu.value){
+            PalletMenu(
+                modifier = Modifier.align(Alignment.TopEnd),
+                onPalletChange
+            )
+        }
+
     }
 }
 
+@OptIn(ExperimentalMaterialApi::class, androidx.compose.animation.ExperimentalAnimationApi::class)
 @Composable
 fun PalletMenu(
     modifier: Modifier,
-    showMenu: Boolean,
     onPalletChange: (ColorPallet) -> Unit
 ) {
-    Card(
-        modifier = modifier
-            .padding(8.dp)
-            .animateContentSize(),
-        elevation = 8.dp
-    ) {
+    Box(modifier = Modifier.fillMaxWidth()){
         Column(
-            horizontalAlignment = Alignment.Start
+            horizontalAlignment = Alignment.Start,
+            modifier = modifier
+                .background(MaterialTheme.colors.background)
+                .animateContentSize(),
         ) {
-            if (showMenu) {
-                MenuItem(green500, "Green") {
-                    onPalletChange.invoke(ColorPallet.GREEN)
-                }
-                MenuItem(purple, "Purple") {
-                    onPalletChange.invoke(ColorPallet.PURPLE)
-                }
-                MenuItem(orange500, "Orange") {
-                    onPalletChange.invoke(ColorPallet.ORANGE)
-                }
-                MenuItem(blue500, "Blue") {
-                    onPalletChange.invoke(ColorPallet.BLUE)
-                }
-            } else {
-
+            MenuItem(green500, "Green") {
+                onPalletChange.invoke(ColorPallet.GREEN)
+            }
+            MenuItem(purple, "Purple") {
+                onPalletChange.invoke(ColorPallet.PURPLE)
+            }
+            MenuItem(orange500, "Orange") {
+                onPalletChange.invoke(ColorPallet.ORANGE)
+            }
+            MenuItem(blue500, "Blue") {
+                onPalletChange.invoke(ColorPallet.BLUE)
             }
         }
     }
@@ -263,13 +293,16 @@ fun homeItemClicked(homeScreenItems: HomeScreenItems, context: Context, isDarkTh
     context.startActivity(intent)
 }
 
+@OptIn(ExperimentalMaterialApi::class)
 @ExperimentalFoundationApi
 @Preview
 @Composable
 fun PreviewHomeScreen() {
     val state = remember {
         mutableStateOf(AppThemeState(false, ColorPallet.GREEN))
     }
-    HomeScreen(state)
+    val chooseColorBottomModalState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
+
+    HomeScreen(state, chooseColorBottomModalState)
 }
 
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -21,5 +21,7 @@
     <string name="title_activity_custom_fling_settings">Custom Fling Settings</string>
     <string name="title_activity_templates">Templates</string>
     <string name="cd_back">Back</string>
+    <string name="cd_change_color">Change color</string>
+    <string name="cd_dark_theme">Dark Theme</string>
 
 </resources>