Merge "[Media] Output device chip padding for a11y." into main (582fc3ab) · Commits · e / os / android_frameworks_base

packages/SystemUI/src/com/android/systemui/media/remedia/ui/compose/Media.kt

+64 −32

Original line number	Diff line number	Diff line
		@@ -37,6 +37,7 @@ import androidx.compose.foundation.background
		import androidx.compose.foundation.clickable
		import androidx.compose.foundation.combinedClickable
		import androidx.compose.foundation.hoverable
		import androidx.compose.foundation.indication
		import androidx.compose.foundation.interaction.DragInteraction
		import androidx.compose.foundation.interaction.Interaction
		import androidx.compose.foundation.interaction.MutableInteractionSource
		@@ -44,7 +45,6 @@ import androidx.compose.foundation.interaction.PressInteraction
		import androidx.compose.foundation.layout.Arrangement
		import androidx.compose.foundation.layout.Box
		import androidx.compose.foundation.layout.Column
		import androidx.compose.foundation.layout.PaddingValues
		import androidx.compose.foundation.layout.Row
		import androidx.compose.foundation.layout.Spacer
		import androidx.compose.foundation.layout.fillMaxSize
		@@ -65,6 +65,7 @@ import androidx.compose.material3.SliderColors
		import androidx.compose.material3.SliderDefaults.colors
		import androidx.compose.material3.SliderState
		import androidx.compose.material3.Text
		import androidx.compose.material3.ripple
		import androidx.compose.runtime.Composable
		import androidx.compose.runtime.LaunchedEffect
		import androidx.compose.runtime.Stable
		@@ -376,29 +377,32 @@ private fun ContentScope.CardForegroundContent(
		) {
		Column(
		modifier =
		modifier
		.combinedClickable(
		modifier.combinedClickable(
		onClick = viewModel.onClick,
		onLongClick = viewModel.onLongClick,
		onClickLabel = viewModel.onClickLabel,
		)
		.padding(16.dp)
		) {
		// Always add the first/top row, regardless of presentation style.
		Row(verticalAlignment = Alignment.CenterVertically) {
		Box(modifier = Modifier.fillMaxWidth()) {
		// Icon.
		Icon(
		icon = viewModel.icon,
		tint = colorScheme.primary,
		modifier = Modifier.size(24.dp).clip(CircleShape),
		modifier =
		Modifier.align(Alignment.TopStart)
		.padding(top = 16.dp, start = 16.dp)
		.size(24.dp)
		.clip(CircleShape),
		)
		Spacer(modifier = Modifier.weight(1f))

		Row(
		horizontalArrangement = Arrangement.spacedBy(8.dp),
		modifier = Modifier.align(Alignment.TopEnd),
		) {
		viewModel.outputSwitcherChips.fastForEach { chip ->
		OutputSwitcherChip(
		viewModel = chip,
		colorScheme = colorScheme,
		modifier = Modifier.padding(start = 8.dp),
		)
		OutputSwitcherChip(viewModel = chip, colorScheme = colorScheme)
		}
		}
		}

		@@ -415,7 +419,7 @@ private fun ContentScope.CardForegroundContent(
		// Second row.
		Row(
		verticalAlignment = Alignment.CenterVertically,
		modifier = Modifier.padding(top = 16.dp),
		modifier = Modifier.padding(start = 16.dp, top = 16.dp, end = 16.dp),
		) {
		Metadata(
		title = viewModel.title,
		@@ -441,7 +445,7 @@ private fun ContentScope.CardForegroundContent(
		Row(
		horizontalArrangement = Arrangement.spacedBy(8.dp),
		verticalAlignment = Alignment.CenterVertically,
		modifier = Modifier.padding(top = 24.dp),
		modifier = Modifier.padding(start = 16.dp, top = 24.dp, end = 16.dp, bottom = 16.dp),
		) {
		Navigation(
		viewModel = viewModel.navigation,
		@@ -464,7 +468,7 @@ private fun ContentScope.CardForegroundContent(
		// Bottom row.
		Row(
		verticalAlignment = Alignment.CenterVertically,
		modifier = Modifier.padding(top = 36.dp),
		modifier = Modifier.padding(start = 16.dp, top = 36.dp, end = 16.dp, bottom = 16.dp),
		) {
		Metadata(
		title = viewModel.title,
		@@ -914,15 +918,42 @@ private fun OutputSwitcherChip(
		colorScheme: AnimatedColorScheme,
		modifier: Modifier = Modifier,
		) {
		PlatformButton(
		onClick = viewModel.onClick,
		colors = ButtonDefaults.buttonColors(containerColor = colorScheme.primary),
		contentPadding = PaddingValues(start = 8.dp, end = 12.dp, top = 4.dp, bottom = 4.dp),
		modifier = modifier.height(24.dp),
		// For accessibility reasons, the touch area for the chip needs to be at least 48dp in height.
		// At the same time, the rounded corner chip should only be as tall as it needs to be to contain
		// its contents and look like a nice design; also, the ripple effect should only be shown within
		// the bounds of the chip.
		//
		// This is achieved by sharing this InteractionSource between the outer and inner composables.
		//
		// The outer composable hosts that clickable that writes user events into the InteractionSource.
		// The inner composable consumes the user events from the InteractionSource and feeds them into
		// its indication.
		val clickInteractionSource = remember { MutableInteractionSource() }
		Box(
		modifier =
		modifier
		.height(48.dp)
		.clickable(interactionSource = clickInteractionSource, indication = null) {
		viewModel.onClick()
		}
		.padding(top = 16.dp, end = 16.dp, bottom = 8.dp)
		) {
		Icon(icon = viewModel.icon, tint = colorScheme.onPrimary, modifier = Modifier.size(16.dp))
		Row(
		horizontalArrangement = Arrangement.spacedBy(4.dp),
		verticalAlignment = Alignment.CenterVertically,
		modifier =
		Modifier.clip(RoundedCornerShape(12.dp))
		.background(colorScheme.primary)
		.indication(clickInteractionSource, ripple())
		.padding(start = 8.dp, end = 12.dp, top = 4.dp, bottom = 4.dp),
		) {
		Icon(
		icon = viewModel.icon,
		tint = colorScheme.onPrimary,
		modifier = Modifier.size(16.dp),
		)

		viewModel.text?.let {
		Spacer(Modifier.size(4.dp))
		Text(
		text = viewModel.text,
		style = MaterialTheme.typography.bodySmall,
		@@ -931,6 +962,7 @@ private fun OutputSwitcherChip(
		}
		}
		}
		}

		/** Renders the primary action of media controls: the play/pause button. */
		@Composable