From e71dd1d576dc4aa6fece1d9822df0140939f3332 Mon Sep 17 00:00:00 2001
From: FooIbar <118464521+FooIbar@users.noreply.github.com>
Date: Wed, 6 Nov 2024 23:22:56 +0800
Subject: [PATCH] Improve scrollbar a11y

---
 .../compose/foundation/scrollbar/Scrollbar.kt         | 11 +++++++++--
 .../com/hippo/ehviewer/ui/tools/VerticalScrollbar.kt  |  7 +++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/app/src/main/kotlin/androidx/compose/foundation/scrollbar/Scrollbar.kt b/app/src/main/kotlin/androidx/compose/foundation/scrollbar/Scrollbar.kt
index 6fc9935b5..3b361b0c5 100644
--- a/app/src/main/kotlin/androidx/compose/foundation/scrollbar/Scrollbar.kt
+++ b/app/src/main/kotlin/androidx/compose/foundation/scrollbar/Scrollbar.kt
@@ -28,6 +28,7 @@ import androidx.compose.foundation.interaction.DragInteraction
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.interaction.collectIsHoveredAsState
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.grid.LazyGridState
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -78,6 +79,7 @@ val LocalScrollbarStyle = staticCompositionLocalOf { defaultScrollbarStyle() }
 data class ScrollbarStyle(
     val minimalHeight: Dp,
     val thickness: Dp,
+    val padding: Dp,
     val shape: Shape,
     val hoverDurationMillis: Int,
     val unhoverColor: Color,
@@ -90,6 +92,7 @@ data class ScrollbarStyle(
 fun defaultScrollbarStyle() = ScrollbarStyle(
     minimalHeight = 16.dp,
     thickness = 8.dp,
+    padding = 0.dp,
     shape = RoundedCornerShape(4.dp),
     hoverDurationMillis = 300,
     unhoverColor = Color.Black.copy(alpha = 0.12f),
@@ -239,7 +242,7 @@ private fun Scrollbar(
         )
     }
 
-    val scrollThickness = style.thickness.roundToPx()
+    val scrollThickness = (style.thickness + style.padding * 2).roundToPx()
     val measurePolicy = if (isVertical) {
         remember(sliderAdapter, scrollThickness) {
             verticalMeasurePolicy(sliderAdapter, { containerSize = it }, scrollThickness)
@@ -261,7 +264,11 @@ private fun Scrollbar(
     Layout(
         {
             Box(
-                Modifier
+                if (isVertical) {
+                    Modifier.padding(horizontal = style.padding)
+                } else {
+                    Modifier.padding(vertical = style.padding)
+                }
                     .background(if (isVisible) color else Color.Transparent, style.shape)
                     .scrollbarDrag(
                         interactionSource = interactionSource,
diff --git a/app/src/main/kotlin/com/hippo/ehviewer/ui/tools/VerticalScrollbar.kt b/app/src/main/kotlin/com/hippo/ehviewer/ui/tools/VerticalScrollbar.kt
index 4bf769652..5ca3024f2 100644
--- a/app/src/main/kotlin/com/hippo/ehviewer/ui/tools/VerticalScrollbar.kt
+++ b/app/src/main/kotlin/com/hippo/ehviewer/ui/tools/VerticalScrollbar.kt
@@ -56,9 +56,7 @@ fun VerticalScrollbar(
         adapter = adapter,
         modifier = scrollbarModifier
             .padding(
-                start = HorizontalPadding,
                 top = contentPadding.calculateTopPadding(),
-                end = HorizontalPadding,
                 bottom = contentPadding.calculateBottomPadding(),
             )
             .graphicsLayer { alpha = scrollbarAlpha.value },
@@ -70,13 +68,14 @@ fun VerticalScrollbar(
 fun scrollbarStyle(color: Color) = ScrollbarStyle(
     minimalHeight = ThumbLength,
     thickness = ThumbThickness,
-    hoverDurationMillis = 300,
+    padding = ThumbPadding,
     shape = ThumbShape,
+    hoverDurationMillis = 300,
     unhoverColor = color,
     hoverColor = color,
 )
 
-private val HorizontalPadding = 8.dp
+private val ThumbPadding = 8.dp
 private val ThumbLength = 48.dp
 private val ThumbThickness = 8.dp
 private val ThumbShape = RoundedCornerShape(ThumbThickness / 2)