IssueTracker

Jetpack Compose version: Compose bom 2025.01.01

Material Library Version (M2, M3 or Both?): M3

Material Compose component used: TimePicker

Android Studio Build: Build #AI-243.21565.193.2431.12735582

Kotlin version: 2.1.0

Steps to Reproduce or Code Sample to Reproduce:

1. Use TimePicker component (androidx.compose.material3.TimePicker)
2. Turn on talkback

When using the TimePicker with talkback enabled, I cannot select the correct time. The clock times announce correctly but when I double tap to toggle, some numbers select the wrong time while others select nothing.

Suggested Fix:

In the ClockText code , currently the code uses an on–globally–positioned modifier to obtain parentCenter:

.onGloballyPositioned {
    parentCenter = it.parentCoordinates?.size?.center ?: IntOffset.Zero
    // rest of code
}

then the onclick calls:

onClick {
    scope.launch {
        state.onTap(center.x, center.y, maxDist, autoSwitchToMinute, parentCenter)
    }
    true
}

But When talkback is enabled the parentCenter computed from the parentCoordinates is not accurate and throws off subsequent calculations in onTap. Explicitly using the known size of the dial container to compute its center should fix this, because you ensure that the angle is always calculated relative to the actual center of the clock dial even with talkback enabled. Something like:

@Composable
private fun ClockText(
    modifier: Modifier,
    state: AnalogTimePickerState,
    value: Int,
    autoSwitchToMinute: Boolean
) {
    ...
    // Instead of computing parentCenter from the clock number’s parent,
    // compute the dial’s center from the known container size.
    val dialCenter: IntOffset = with(LocalDensity.current) {
        IntOffset(
            (ClockDialContainerSize.toPx() / 2).roundToInt(),
            (ClockDialContainerSize.toPx() / 2).roundToInt()
        )
    }
   ...
    Box(
        contentAlignment = Alignment.Center,
        modifier = modifier
            .minimumInteractiveComponentSize()
            .size(MinimumInteractiveSize)
            .onGloballyPositioned {
                // Use the clock number’s own center for the tap point,
                // but ignore its parent’s coordinates.
                center = it.boundsInParent().center
            }
            .focusable()
            .semantics(mergeDescendants = true) {
                // When a number is activated (via TalkBack’s double–tap),
                // call onTap with the fixed dial center.
                onClick {
                    scope.launch {
                        state.onTap(
                            center.x,
                            center.y,
                            maxDist,
                            autoSwitchToMinute,
                            dialCenter
                        )
                    }
                    true
                }
                this.selected = selected
            }
    ) {...}
}