Add accessibility semantics and touch targets to zoom and lens controls

Increase ZoomButton to 48dp minimum touch target, add Role.Button and
contentDescription/selected semantics, and use centralized AppColors.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ole-Morten Duesund 2026-03-05 12:15:26 +01:00
commit 527c8fd0bb
2 changed files with 24 additions and 9 deletions

View file

@ -16,10 +16,16 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.role
import androidx.compose.ui.semantics.selected
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import no.naiv.tiltshift.camera.CameraLens
import no.naiv.tiltshift.ui.theme.AppColors
/**
* Lens selection UI for switching between camera lenses.
@ -59,9 +65,9 @@ private fun LensButton(
) {
val backgroundColor by animateColorAsState(
targetValue = if (isSelected) {
Color(0xFFFFB300)
AppColors.Accent
} else {
Color(0x80000000)
AppColors.OverlayDark
},
label = "lens_button_bg"
)
@ -76,7 +82,8 @@ private fun LensButton(
.size(48.dp)
.clip(CircleShape)
.background(backgroundColor)
.clickable(onClick = onClick),
.clickable(role = Role.Button, onClick = onClick)
.semantics { selected = isSelected; contentDescription = "${lens.displayName} lens" },
contentAlignment = Alignment.Center
) {
Text(

View file

@ -16,9 +16,15 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.role
import androidx.compose.ui.semantics.selected
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import no.naiv.tiltshift.ui.theme.AppColors
import kotlin.math.abs
/**
@ -65,9 +71,9 @@ private fun ZoomButton(
) {
val backgroundColor by animateColorAsState(
targetValue = if (isSelected) {
Color(0xFFFFB300) // Amber when selected
AppColors.Accent
} else {
Color(0x80000000) // Semi-transparent black
AppColors.OverlayDark
},
label = "zoom_button_bg"
)
@ -79,10 +85,11 @@ private fun ZoomButton(
Box(
modifier = Modifier
.size(44.dp)
.size(48.dp)
.clip(CircleShape)
.background(backgroundColor)
.clickable(onClick = onClick),
.clickable(role = Role.Button, onClick = onClick)
.semantics { selected = isSelected; contentDescription = "${preset.label}x zoom" },
contentAlignment = Alignment.Center
) {
Text(
@ -105,8 +112,9 @@ fun ZoomIndicator(
Box(
modifier = modifier
.clip(CircleShape)
.background(Color(0x80000000))
.padding(horizontal = 12.dp, vertical = 6.dp),
.background(AppColors.OverlayDark)
.padding(horizontal = 12.dp, vertical = 6.dp)
.semantics { contentDescription = "Current zoom: %.1fx".format(currentZoom) },
contentAlignment = Alignment.Center
) {
Text(