Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 5b638cb2 authored by Josh's avatar Josh Committed by Joshua Mokut
Browse files

Fixed accessibility issues with shortcut customizer buttons 

The known issues were related to clipping/truncation of text when font
size became too large to fit into fixed width button containers. This is
now addressed by allowing components to use variable dimensions with min
width/height defined, allowing them to take up as much space as is
permitted by their parent.s

This CL also indirectly addresses a talkback issue with disabled buttons - previously when
focused with talkback, disabled buttons did not announce that they were
disabled or a button. This was due to the use of a non-clickable surface
for disabled buttons. The use of clikable/non-clickable surface was
never necessary as ShortcutHelperClickableSurface allows for enabled
parameter to define whether or not a clickable surface is enabled.

Test: manual - try out the accessibility scenarios above and ensure
everything works as expected.
Flag: com.android.systemui.keyboard_shortcut_helper_shortcut_customizer
Fix: 390050558
Fix: 390073679
Fix: 390072395
Fix: 390098828
Fix: 390047758

Change-Id: I06157cc313dadcb05352553aea8b2eccea76d4ef
parent f71aa0da

packages/SystemUI/src/com/android/systemui/keyboard/shortcut/ui/composable/ShortcutCustomizer.kt

+9 −8
Original line number Diff line number Diff line
@@ -16,6 +16,7 @@ 


package com.android.systemui.keyboard.shortcut.ui.composable



import androidx.compose.foundation.BorderStroke

import androidx.compose.foundation.background

import androidx.compose.foundation.border

import androidx.compose.foundation.interaction.MutableInteractionSource
@@ -27,6 +28,7 @@ import androidx.compose.foundation.layout.Row 
import androidx.compose.foundation.layout.RowScope

import androidx.compose.foundation.layout.Spacer

import androidx.compose.foundation.layout.height

import androidx.compose.foundation.layout.heightIn

import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.layout.size

import androidx.compose.foundation.layout.sizeIn
@@ -211,19 +213,19 @@ private fun DialogButtons( 
            shape = RoundedCornerShape(50.dp),

            onClick = onCancel,

            color = Color.Transparent,

            width = 80.dp,

            modifier = Modifier.heightIn(40.dp),

            contentColor = MaterialTheme.colorScheme.primary,

            text = stringResource(R.string.shortcut_helper_customize_dialog_cancel_button_label),

            border = BorderStroke(width = 1.dp, color = MaterialTheme.colorScheme.outlineVariant)

        )

        Spacer(modifier = Modifier.width(8.dp))

        ShortcutHelperButton(

            modifier =

                Modifier.focusRequester(focusRequester).focusProperties {

                    canFocus = true

                }, // enable focus on touch/click mode

            modifier = Modifier

                .heightIn(40.dp)

                .focusRequester(focusRequester)

                .focusProperties { canFocus = true }, // enable focus on touch/click mode

            onClick = onConfirm,

            color = MaterialTheme.colorScheme.primary,

            width = 116.dp,

            contentColor = MaterialTheme.colorScheme.onPrimary,

            text = confirmButtonText,

            enabled = isConfirmButtonEnabled,
@@ -413,8 +415,7 @@ private fun PromptShortcutModifier( 
private fun ActionKeyContainer(defaultModifierKey: ShortcutKey.Icon.ResIdIcon) {

    Row(

        modifier =

            Modifier.height(48.dp)

                .width(105.dp)

            Modifier.sizeIn(minWidth = 105.dp, minHeight = 48.dp)

                .background(

                    color = MaterialTheme.colorScheme.surface,

                    shape = RoundedCornerShape(16.dp),

packages/SystemUI/src/com/android/systemui/keyboard/shortcut/ui/composable/ShortcutHelper.kt

+1 −1109

File changed.

Preview size limit exceeded, changes collapsed.

packages/SystemUI/src/com/android/systemui/keyboard/shortcut/ui/composable/Surfaces.kt

+50 −75
Original line number Diff line number Diff line
@@ -32,7 +32,6 @@ import androidx.compose.foundation.layout.Arrangement 
import androidx.compose.foundation.layout.Box

import androidx.compose.foundation.layout.Row

import androidx.compose.foundation.layout.Spacer

import androidx.compose.foundation.layout.height

import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.layout.size

import androidx.compose.foundation.layout.width
@@ -45,7 +44,6 @@ import androidx.compose.material3.LocalAbsoluteTonalElevation 
import androidx.compose.material3.LocalContentColor

import androidx.compose.material3.LocalTonalElevationEnabled

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.Surface

import androidx.compose.material3.Text

import androidx.compose.material3.contentColorFor

import androidx.compose.material3.minimumInteractiveComponentSize
@@ -74,13 +72,14 @@ import androidx.compose.ui.platform.LocalDensity 
import androidx.compose.ui.semantics.Role

import androidx.compose.ui.semantics.role

import androidx.compose.ui.semantics.semantics

import androidx.compose.ui.text.style.TextOverflow

import androidx.compose.ui.unit.Dp

import androidx.compose.ui.unit.dp

import androidx.compose.ui.unit.sp

import androidx.compose.ui.zIndex

import com.android.app.tracing.coroutines.launchTraced as launch

import com.android.compose.modifiers.thenIf

import com.android.systemui.keyboard.shortcut.ui.model.IconSource

import com.android.app.tracing.coroutines.launchTraced as launch



/**

 * A selectable surface with no default focus/hover indications.
@@ -217,30 +216,37 @@ fun ClickableShortcutSurface( 
 */

@Composable

fun ShortcutHelperButton(

    modifier: Modifier = Modifier,

    onClick: () -> Unit,

    shape: Shape = RoundedCornerShape(360.dp),

    contentColor: Color,

    color: Color,

    width: Dp,

    height: Dp = 40.dp,

    modifier: Modifier = Modifier,

    shape: Shape = RoundedCornerShape(360.dp),

    iconSource: IconSource = IconSource(),

    text: String? = null,

    contentColor: Color,

    contentPaddingHorizontal: Dp = 16.dp,

    contentPaddingVertical: Dp = 10.dp,

    enabled: Boolean = true,

    border: BorderStroke? = null,

    contentDescription: String? = null,

) {

    ShortcutHelperButtonSurface(

    ClickableShortcutSurface(

        onClick = onClick,

        shape = shape,

        color = color,

        modifier = modifier,

        enabled = enabled,

        width = width,

        height = height,

        color = color.getDimmedColorIfDisabled(enabled),

        border = border,

        modifier = modifier.semantics { role = Role.Button },

        interactionsConfig = InteractionsConfig(

            hoverOverlayColor = MaterialTheme.colorScheme.onSurface,

            hoverOverlayAlpha = 0.11f,

            pressedOverlayColor = MaterialTheme.colorScheme.onSurface,

            pressedOverlayAlpha = 0.15f,

            focusOutlineColor = MaterialTheme.colorScheme.secondary,

            focusOutlineStrokeWidth = 3.dp,

            focusOutlinePadding = 2.dp,

            surfaceCornerRadius = 28.dp,

            focusOutlineCornerRadius = 33.dp,

        ),

        enabled = enabled

    ) {

        Row(

            modifier =
@@ -250,6 +256,18 @@ fun ShortcutHelperButton( 
                ),

            verticalAlignment = Alignment.CenterVertically,

            horizontalArrangement = Arrangement.Center,

        ) {

            ShortcutHelperButtonContent(iconSource, contentColor, text, contentDescription)

        }

    }

}



@Composable

private fun ShortcutHelperButtonContent(

    iconSource: IconSource,

    contentColor: Color,

    text: String?,

    contentDescription: String?

) {

    if (iconSource.imageVector != null) {

        Icon(
@@ -261,7 +279,7 @@ fun ShortcutHelperButton( 
    }



    if (iconSource.imageVector != null && text != null)

                Spacer(modifier = Modifier.weight(1f))

        Spacer(modifier = Modifier.width(8.dp))



    if (text != null) {

        Text(
@@ -270,56 +288,13 @@ fun ShortcutHelperButton( 
            fontSize = 14.sp,

            style = MaterialTheme.typography.labelLarge,

            modifier = Modifier.wrapContentSize(Alignment.Center),

            overflow = TextOverflow.Ellipsis,

        )

    }

}

    }

}



@Composable

private fun ShortcutHelperButtonSurface(

    onClick: () -> Unit,

    shape: Shape,

    color: Color,

    modifier: Modifier = Modifier,

    enabled: Boolean,

    width: Dp,

    height: Dp,

    border: BorderStroke?,

    content: @Composable () -> Unit,

) {

    if (enabled) {

        ClickableShortcutSurface(

            onClick = onClick,

            shape = shape,

            color = color,

            border = border,

            modifier = modifier.semantics { role = Role.Button }.width(width).height(height),

            interactionsConfig =

                InteractionsConfig(

                    hoverOverlayColor = MaterialTheme.colorScheme.onSurface,

                    hoverOverlayAlpha = 0.11f,

                    pressedOverlayColor = MaterialTheme.colorScheme.onSurface,

                    pressedOverlayAlpha = 0.15f,

                    focusOutlineColor = MaterialTheme.colorScheme.secondary,

                    focusOutlineStrokeWidth = 3.dp,

                    focusOutlinePadding = 2.dp,

                    surfaceCornerRadius = 28.dp,

                    focusOutlineCornerRadius = 33.dp,

                ),

        ) {

            content()

        }

    } else {

        Surface(

            shape = shape,

            color = color.copy(0.38f),

            modifier = modifier.semantics { role = Role.Button }.width(width).height(height),

        ) {

            content()

        }

    }

}

private fun Color.getDimmedColorIfDisabled(enabled: Boolean): Color =

    if (enabled) this else copy(alpha = 0.38f)



@Composable

private fun surfaceColorAtElevation(color: Color, elevation: Dp): Color {