Fix VpnSettingsScreen DPAD navigation

6 files changed, 30 insertions, 12 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt
index 1fe1815e92..9ea26d6e01 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt
@@ -2,7 +2,6 @@ package net.mullvad.mullvadvpn.compose.cell
 
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.material3.Icon
@@ -13,13 +12,14 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.focus.focusProperties
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.core.text.HtmlCompat
 import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.compose.component.ChevronView
+import net.mullvad.mullvadvpn.compose.component.ChevronButton
 import net.mullvad.mullvadvpn.compose.component.textResource
 import net.mullvad.mullvadvpn.compose.extensions.toAnnotatedString
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
@@ -53,6 +53,7 @@ fun ExpandableComposeCell(
     val bodyViewModifier = Modifier
 
     BaseCell(
+        modifier = Modifier.focusProperties { canFocus = false },
         title = {
             BaseCellTitle(
                 title = title,
@@ -64,6 +65,7 @@ fun ExpandableComposeCell(
             ExpandableComposeCellBody(
                 isExpanded = isExpanded,
                 modifier = bodyViewModifier,
+                onExpand = onCellClicked,
                 onInfoClicked = onInfoClicked
             )
         },
@@ -75,6 +77,7 @@ fun ExpandableComposeCell(
 private fun ExpandableComposeCellBody(
     isExpanded: Boolean,
     modifier: Modifier,
+    onExpand: ((Boolean) -> Unit),
     onInfoClicked: (() -> Unit)? = null
 ) {
     Row(
@@ -96,9 +99,9 @@ private fun ExpandableComposeCellBody(
             }
         }
 
-        ChevronView(
+        ChevronButton(
             isExpanded = isExpanded,
-            modifier = Modifier.size(Dimens.expandableCellChevronSize)
+            onExpand = onExpand,
         )
     }
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt
index faec68d5d4..ef898aac6d 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt
@@ -11,6 +11,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.focus.focusProperties
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
@@ -45,6 +46,7 @@ fun InformationComposeCell(
     val bodyViewModifier = Modifier
 
     BaseCell(
+        modifier = Modifier.focusProperties { canFocus = false },
         title = {
             BaseCellTitle(
                 title = title,
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt
index d6adf33b83..e340b959d6 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt
@@ -28,7 +28,7 @@ import androidx.compose.ui.graphics.compositeOver
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.compose.component.ChevronView
+import net.mullvad.mullvadvpn.compose.component.Chevron
 import net.mullvad.mullvadvpn.compose.component.VerticalDivider
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
@@ -258,7 +258,7 @@ fun RelayLocationCell(
                     color = MaterialTheme.colorScheme.background,
                     modifier = Modifier.padding(vertical = Dimens.verticalDividerPadding)
                 )
-                ChevronView(
+                Chevron(
                     isExpanded = expanded.value,
                     modifier =
                         Modifier.fillMaxHeight()
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt
index 5d38b97d80..e7d6e7f1c3 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SwitchComposeCell.kt
@@ -12,6 +12,7 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.focusProperties
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
@@ -118,12 +119,12 @@ private fun SwitchComposeCell(
     modifier: Modifier = Modifier,
 ) {
     BaseCell(
-        modifier = modifier,
+        modifier = modifier.focusProperties { canFocus = false },
         title = titleView,
         isRowEnabled = isEnabled,
         bodyView = {
             SwitchCellView(
-                onSwitchClicked = null,
+                onSwitchClicked = onCellClicked,
                 isEnabled = isEnabled,
                 isToggled = isToggled,
                 onInfoClicked = onInfoClicked
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Chevron.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Chevron.kt
index cd41c3e2a0..5510b54fac 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Chevron.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Chevron.kt
@@ -4,6 +4,7 @@ import androidx.compose.animation.core.LinearEasing
 import androidx.compose.animation.core.TweenSpec
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -15,12 +16,11 @@ import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.lib.theme.color.AlphaChevron
 
 @Composable
-fun ChevronView(
+fun Chevron(
     modifier: Modifier = Modifier,
     color: Color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaChevron),
     isExpanded: Boolean
 ) {
-    val resourceId = R.drawable.icon_chevron
 
     val degree = remember(isExpanded) { if (isExpanded) 270f else 90f }
     val animatedRotation =
@@ -31,9 +31,21 @@ fun ChevronView(
         )
 
     Icon(
-        painterResource(id = resourceId),
+        painterResource(id = R.drawable.icon_chevron),
         contentDescription = null,
         tint = color,
         modifier = modifier.rotate(animatedRotation.value),
     )
 }
+
+@Composable
+fun ChevronButton(
+    modifier: Modifier = Modifier,
+    color: Color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaChevron),
+    onExpand: (Boolean) -> Unit,
+    isExpanded: Boolean
+) {
+    IconButton(modifier = modifier, onClick = { onExpand(!isExpanded) }) {
+        Chevron(isExpanded = isExpanded, color = color)
+    }
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt
index 5bdb448483..ed41d25f40 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt
@@ -71,7 +71,7 @@ fun LocationInfo(
                     },
                 style = MaterialTheme.typography.labelLarge.copy(fontWeight = FontWeight.SemiBold)
             )
-            ChevronView(
+            Chevron(
                 isExpanded = isExpanded,
                 color =
                     if (isExpanded) {