Theme and a11y fixes (#37)

* Theme and a11y fixes

1. A11y fixes with minimum search tap size of 48dp
2. Fix the sample code with correct color on text style which works on light and dark mode.
3. Add focus requester on search field on country picker
4. Wrap hint and innerTextField inside a box, so that cursor is not at the end of hint.

* Review suggestions.

ccp/src/main/java/com/togitech/ccp/component/CountryDialog.kt

@@ -2,6 +2,7 @@ package com.togitech.ccp.component
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -24,6 +25,7 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Clear
 import androidx.compose.material.icons.filled.Search
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -33,6 +35,8 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.platform.LocalContext
@@ -58,6 +62,7 @@ private val DEFAULT_ROW_PADDING = 16.dp
 private const val ROW_PADDING_VERTICAL_SCALING = 1.1f
 private val SEARCH_ICON_PADDING = 5.dp
 private const val HEADER_TEXT_SIZE_MULTIPLE = 1.5
+private val MIN_TAP_DIMENSION = 48.dp
 
 /**
  * @param onDismissRequest Executes when the user tries to dismiss the dialog.
@@ -204,29 +209,45 @@ private fun SearchTextField(
     leadingIcon: (@Composable () -> Unit)? = null,
     hint: String = stringResource(id = R.string.search),
 ) {
+    val requester = remember { FocusRequester() }
+
+    LaunchedEffect(Unit) {
+        requester.requestFocus()
+    }
+
     BasicTextField(
         modifier = modifier
+            .height(MIN_TAP_DIMENSION)
             .fillMaxWidth()
-            .padding(horizontal = DEFAULT_ROW_PADDING),
+            .focusRequester(requester),
         value = value,
         onValueChange = onValueChange,
         singleLine = true,
         cursorBrush = SolidColor(textStyle.color),
         textStyle = textStyle,
         decorationBox = { innerTextField ->
             Row(
-                Modifier.fillMaxWidth(),
+                Modifier
+                    .fillMaxWidth()
+                    .height(MIN_TAP_DIMENSION),
                 verticalAlignment = Alignment.CenterVertically,
             ) {
                 if (leadingIcon != null) leadingIcon()
-                if (value.isEmpty()) {
-                    Text(
-                        text = hint,
-                        maxLines = 1,
-                        style = textStyle.copy(color = textStyle.color.copy(alpha = 0.5f)),
-                    )
+                Box(
+                    modifier = Modifier
+                        .padding(start = DEFAULT_ROUNDING)
+                        .weight(1f),
+                    contentAlignment = Alignment.CenterStart,
+                ) {
+                    if (value.isEmpty()) {
+                        Text(
+                            text = hint,
+                            maxLines = 1,
+                            style = textStyle.copy(color = textStyle.color.copy(alpha = 0.5f)),
+                        )
+                    }
+                    innerTextField()
                 }
-                innerTextField()
             }
         },
     )

ccp/src/main/java/com/togitech/ccp/component/TogiCountryCodePicker.kt

@@ -102,7 +102,7 @@ fun TogiCountryCodePicker(
     initialCountryIsoCode: Iso31661alpha2? = null,
     initialCountryPhoneCode: PhoneCode? = null,
     label: @Composable (() -> Unit)? = null,
-    textStyle: TextStyle = MaterialTheme.typography.body1,
+    textStyle: TextStyle = MaterialTheme.typography.body1.copy(color = MaterialTheme.colors.onSurface),
 ) {
     val context = LocalContext.current
     val focusRequester = remember { FocusRequester() }