UI: Add wheelchair accessibility indicators to stops (#320)

### TL;DR Added wheelchair accessibility indicators to journey stops in the trip planner UI. ### What changed? - Added wheelchair accessibility property to stop data models - Updated the `StopInfo` component to display a wheelchair icon for accessible stops - Fixed the serialization name for wheelchair access from "wheelchairAccess" to "WheelchairAccess" - Added wheelchair accessibility status to preview data - Modified the accessibility icon color to match the UI theme ### How to test? 1. Navigate to the trip planner 2. Search for a journey 3. Verify wheelchair icons appear next to stops that are wheelchair accessible 4. Confirm the icon visibility matches the `isWheelchairAccessible` property 5. Check that the icon color matches the prominence level of the stop text ### Why make this change? To improve accessibility information visibility for users with mobility needs, making it easier to identify which stops are wheelchair accessible directly in the journey view.
ksharma-xyz · Nov 8, 2024 · a386ece · a386ece
1 parent 3159e17
commit a386ece
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 7 deletions.
diff --git a/app/.DS_Store b/app/.DS_Store
diff --git a/...work/api/src/main/kotlin/xyz/ksharma/krail/trip/planner/network/api/model/TripResponse.kt b/...work/api/src/main/kotlin/xyz/ksharma/krail/trip/planner/network/api/model/TripResponse.kt
@@ -152,7 +152,10 @@ data class TripResponse(
 
     @Serializable
     data class DestinationProperties(
-        @SerialName("wheelchairAccess") val wheelchairAccess: String? = null,
+        /**
+         * true if the stop is wheelchair accessible, false otherwise.
+         */
+        @SerialName("WheelchairAccess") val wheelchairAccess: String? = null,
 
         @SerialName("downloads") val downloads: List<Download>? = null,
 

diff --git a/...state/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/state/timetable/TimeTableState.kt b/...state/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/state/timetable/TimeTableState.kt
@@ -110,6 +110,7 @@ data class TimeTableState(
         data class Stop(
             val name: String, // "xx Station, Platform 1" - stopSequence.disassembledName ?: stopSequence.name
             val time: String, // "12:00pm" - stopSequence.departureTimeEstimated ?: stopSequence.departureTimePlanned
+            val isWheelchairAccessible: Boolean,
         )
     }
 }
diff --git a/...ip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/JourneyCard.kt b/...ip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/JourneyCard.kt
@@ -637,14 +637,17 @@ private val PREVIEW_STOPS = persistentListOf(
     TimeTableState.JourneyCardInfo.Stop(
         name = "Stop 1",
         time = "8:30am",
+        isWheelchairAccessible = true,
     ),
     TimeTableState.JourneyCardInfo.Stop(
         name = "Stop 2",
         time = "8:35am",
+        isWheelchairAccessible = true,
     ),
     TimeTableState.JourneyCardInfo.Stop(
         name = "Stop 3",
         time = "8:40am",
+        isWheelchairAccessible = false,
     ),
 )
 

diff --git a/...e/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/LegView.kt b/...e/trip-planner/ui/src/main/kotlin/xyz/ksharma/krail/trip/planner/ui/components/LegView.kt
@@ -42,6 +42,7 @@ import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.toImmutableList
 import xyz.ksharma.krail.design.system.components.Text
 import xyz.ksharma.krail.design.system.theme.KrailTheme
+import xyz.ksharma.krail.design.system.toAdaptiveDecorativeIconSize
 import xyz.ksharma.krail.trip.planner.ui.R
 import xyz.ksharma.krail.trip.planner.ui.state.TransportMode
 import xyz.ksharma.krail.trip.planner.ui.state.TransportModeLine
@@ -95,6 +96,7 @@ fun LegView(
                 time = stops.first().time,
                 name = stops.first().name,
                 isProminent = true,
+                isWheelchairAccessible = stops.first().isWheelchairAccessible,
                 modifier = Modifier
                     .timeLineTop(
                         color = timelineColor,
@@ -139,6 +141,7 @@ fun LegView(
                         time = stop.time,
                         name = stop.name,
                         isProminent = false,
+                        isWheelchairAccessible = stop.isWheelchairAccessible,
                         modifier = Modifier
                             .timeLineCenterWithStop(
                                 color = timelineColor,
@@ -159,6 +162,7 @@ fun LegView(
                 time = stops.last().time,
                 name = stops.last().name,
                 isProminent = true,
+                isWheelchairAccessible = stops.last().isWheelchairAccessible,
                 modifier = Modifier
                     .timeLineBottom(
                         color = timelineColor,
@@ -216,11 +220,13 @@ private fun RouteSummary(
     }
 }
 
+@OptIn(ExperimentalLayoutApi::class)
 @Composable
 private fun StopInfo(
     time: String,
     name: String,
     isProminent: Boolean,
+    isWheelchairAccessible: Boolean,
     modifier: Modifier = Modifier,
 ) {
     Column(modifier = modifier) {
@@ -229,11 +235,36 @@ private fun StopInfo(
             style = if (isProminent) KrailTheme.typography.bodyMedium else KrailTheme.typography.bodySmall,
             color = KrailTheme.colors.onSurface,
         )
-        Text(
-            text = name,
-            style = if (isProminent) KrailTheme.typography.titleSmall else KrailTheme.typography.bodySmall,
-            color = KrailTheme.colors.onSurface,
-        )
+        FlowRow(
+            horizontalArrangement = Arrangement.spacedBy(4.dp),
+            verticalArrangement = Arrangement.spacedBy(2.dp),
+        ) {
+            Text(
+                text = name,
+                style = if (isProminent) KrailTheme.typography.titleSmall else KrailTheme.typography.bodySmall,
+                color = KrailTheme.colors.onSurface,
+                modifier = Modifier.align(Alignment.CenterVertically),
+            )
+            if (isWheelchairAccessible) {
+                Image(
+                    painter = painterResource(R.drawable.ic_a11y),
+                    contentDescription = null,
+                    colorFilter = ColorFilter.tint(
+                        color = if (isProminent) {
+                            KrailTheme.colors.onSurface
+                        } else {
+                            KrailTheme.colors.onSurface.copy(
+                                alpha = 0.75f,
+                            )
+                        },
+                    ),
+                    modifier = Modifier
+                        .size(16.dp.toAdaptiveDecorativeIconSize())
+                        .padding(end = 4.dp)
+                        .align(Alignment.CenterVertically),
+                )
+            }
+        }
     }
 }
 
@@ -288,14 +319,17 @@ private fun PreviewLegView() {
                 TimeTableState.JourneyCardInfo.Stop(
                     time = "12:00 am",
                     name = "XYZ Station, Platform 1",
+                    isWheelchairAccessible = false,
                 ),
                 TimeTableState.JourneyCardInfo.Stop(
                     time = "12:30 am",
                     name = "ABC Station, Platform 2",
+                    isWheelchairAccessible = false,
                 ),
                 TimeTableState.JourneyCardInfo.Stop(
                     time = "01:00 am",
                     name = "DEF Station, Platform 3",
+                    isWheelchairAccessible = true,
                 ),
             ).toImmutableList(),
             modifier = Modifier.background(KrailTheme.colors.surface),
@@ -320,10 +354,12 @@ private fun PreviewLegViewTwoStops() {
                 TimeTableState.JourneyCardInfo.Stop(
                     time = "12:00 am",
                     name = "XYZ Station, Platform 1",
+                    isWheelchairAccessible = true,
                 ),
                 TimeTableState.JourneyCardInfo.Stop(
                     time = "01:00 am",
                     name = "DEF Station, Platform 3",
+                    isWheelchairAccessible = true,
                 ),
             ).toImmutableList(),
             modifier = Modifier.background(KrailTheme.colors.surface),
@@ -347,10 +383,12 @@ private fun PreviewLegViewMetro() {
                 TimeTableState.JourneyCardInfo.Stop(
                     time = "12:00 am",
                     name = "XYZ Station, Platform 1",
+                    isWheelchairAccessible = true,
                 ),
                 TimeTableState.JourneyCardInfo.Stop(
                     time = "01:00 am",
                     name = "DEF Station, Platform 3",
+                    isWheelchairAccessible = true,
                 ),
             ).toImmutableList(),
             modifier = Modifier.background(KrailTheme.colors.surface),
@@ -374,10 +412,12 @@ private fun PreviewLegViewFerry() {
                 TimeTableState.JourneyCardInfo.Stop(
                     time = "12:00 am",
                     name = "XYZ Station, Platform 1",
+                    isWheelchairAccessible = true,
                 ),
                 TimeTableState.JourneyCardInfo.Stop(
                     time = "01:00 am",
                     name = "DEF Station, Platform 3",
+                    isWheelchairAccessible = true,
                 ),
             ).toImmutableList(),
             modifier = Modifier.background(KrailTheme.colors.surface),
@@ -401,10 +441,12 @@ private fun PreviewLegViewLightRail() {
                 TimeTableState.JourneyCardInfo.Stop(
                     time = "12:00 am",
                     name = "XYZ Station, Platform 1",
+                    isWheelchairAccessible = true,
                 ),
                 TimeTableState.JourneyCardInfo.Stop(
                     time = "01:00 am",
                     name = "DEF Station, Platform 3",
+                    isWheelchairAccessible = false,
                 ),
             ).toImmutableList(),
             modifier = Modifier.background(KrailTheme.colors.surface),
@@ -435,6 +477,7 @@ private fun PreviewProminentStopInfo() {
             time = "12:00",
             name = "XYZ Station, Platform 1",
             isProminent = true,
+            isWheelchairAccessible = true,
             modifier = Modifier.background(KrailTheme.colors.surface),
         )
     }

diff --git a/...rc/main/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/business/TripResponseMapper.kt b/...rc/main/kotlin/xyz/ksharma/krail/trip/planner/ui/timetable/business/TripResponseMapper.kt
@@ -225,6 +225,7 @@ private fun TripResponse.StopSequence.toUiModel(): TimeTableState.JourneyCardInf
         TimeTableState.JourneyCardInfo.Stop(
             name = stopName,
             time = time.fromUTCToDisplayTimeString(),
+            isWheelchairAccessible = properties?.wheelchairAccess.toBoolean(),
         )
     } else {
         null

diff --git a/feature/trip-planner/ui/src/main/res/drawable/ic_a11y.xml b/feature/trip-planner/ui/src/main/res/drawable/ic_a11y.xml
@@ -6,6 +6,6 @@
     android:viewportHeight="17">
   <path
       android:pathData="M5.833,3.333C5.375,3.333 4.983,3.17 4.656,2.844C4.33,2.517 4.167,2.125 4.167,1.667C4.167,1.208 4.33,0.816 4.656,0.49C4.983,0.163 5.375,0 5.833,0C6.292,0 6.684,0.163 7.01,0.49C7.337,0.816 7.5,1.208 7.5,1.667C7.5,2.125 7.337,2.517 7.01,2.844C6.684,3.17 6.292,3.333 5.833,3.333ZM10,16.667V12.5H5.833C5.375,12.5 4.983,12.337 4.656,12.01C4.33,11.684 4.167,11.292 4.167,10.833V5.833C4.167,5.375 4.33,4.983 4.656,4.656C4.983,4.33 5.375,4.167 5.833,4.167C6.167,4.167 6.455,4.24 6.698,4.385C6.941,4.531 7.201,4.764 7.479,5.083C8.243,6 8.934,6.628 9.552,6.969C10.17,7.309 10.875,7.486 11.667,7.5V9.167C10.931,9.167 10.188,9.007 9.438,8.688C8.688,8.368 8.042,7.986 7.5,7.542V10.417H10C10.458,10.417 10.851,10.58 11.177,10.906C11.503,11.233 11.667,11.625 11.667,12.083V16.667H10ZM4.167,16.667C3.014,16.667 2.031,16.26 1.219,15.448C0.406,14.635 0,13.653 0,12.5C0,11.5 0.316,10.618 0.948,9.854C1.58,9.09 2.375,8.611 3.333,8.417V10.125C2.847,10.319 2.448,10.628 2.135,11.052C1.823,11.476 1.667,11.958 1.667,12.5C1.667,13.194 1.91,13.785 2.396,14.271C2.882,14.757 3.472,15 4.167,15C4.708,15 5.191,14.844 5.615,14.531C6.038,14.219 6.347,13.819 6.542,13.333H8.25C8.056,14.292 7.576,15.087 6.813,15.719C6.049,16.351 5.167,16.667 4.167,16.667Z"
-      android:fillColor="#3B3B3B"
+      android:fillColor="#FFFFFF"
       tools:ignore="VectorPath" />
 </vector>