StaveFocus.kt
Each line, with the release that last changed it.
| 0.5.0 | 1 | package dev.stave.ui.theme |
| 2 | ||
| 3 | import androidx.compose.foundation.border | |
| 4 | import androidx.compose.foundation.interaction.MutableInteractionSource | |
| 5 | import androidx.compose.foundation.interaction.collectIsFocusedAsState | |
| 6 | import androidx.compose.foundation.shape.RoundedCornerShape | |
| 7 | import androidx.compose.runtime.Composable | |
| 8 | import androidx.compose.runtime.getValue | |
| 9 | import androidx.compose.runtime.remember | |
| 10 | import androidx.compose.ui.Modifier | |
| 11 | import androidx.compose.ui.draw.clip | |
| 12 | import androidx.compose.ui.unit.dp | |
| 13 | ||
| 14 | /** | |
| 15 | * Earhorn's keyboard-focus visual, ported from Android's `staveFocusable`: a | |
| 16 | * 2dp [FocusRing] border while focused, nothing otherwise (the caller paints its | |
| 17 | * own background and hover wash). Amber on SurfaceBase is 8.50:1, well over the | |
| 18 | * 3:1 WCAG 2.4.11 asks of a focus indicator; a translucent amber wash is ~1.3:1. | |
| 19 | * | |
| 20 | * Pass the same [interactionSource] to the clickable/toggleable/selectable that | |
| 21 | * makes the element focusable. | |
| 22 | */ | |
| 23 | @Composable | |
| 24 | fun Modifier.staveFocusRing( | |
| 25 | interactionSource: MutableInteractionSource, | |
| 26 | cornerRadiusDp: Int = 8, | |
| 27 | ): Modifier { | |
| 28 | val focused by interactionSource.collectIsFocusedAsState() | |
| 29 | val shape = remember(cornerRadiusDp) { RoundedCornerShape(cornerRadiusDp.dp) } | |
| 30 | return this | |
| 31 | .clip(shape) | |
| 32 | .then(if (focused) Modifier.border(2.dp, FocusRing, shape) else Modifier) | |
| 33 | } |