Is it expected that button touch target zone is not constrained by view size when min touch target s...

# compose-android

[Filip Wiesner]

Is it expected that button touch target zone is not constrained by view size when min touch target size is not enforced?
Example in thread 🧵

[Filip Wiesner]

image.png,click_area.mp4

click_area.mp4

[Rohan Maity]

Button has its own constrained area so far I have used
Can you share the whole composable?

[Filip Wiesner]

its own constrained area

What do you mean? 🤔 If you’re referring to the minimum touch target size, it should be disabled using the CompositionLocalProvider, as seen in the image.

There is nothing more to show. It's just a test composable with a Box wrapper

[Rohan Maity]

Ok I think I got the question wrong earlier
To your question, if you are disabling the TouchTargetInforcement I believe compose internal logic to increase touch target kicks in
From the docs

When the size of a clickable composable is smaller than the minimum touch target size, Compose still increases the touch target size. It does so by expanding the touch target size outside of the boundaries of the composable.

[Filip Wiesner]

Interesting, where is this quote from?

[Rohan Maity]

https://developer.android.com/jetpack/compose/accessibility#minimum-target-sizes

[Rohan Maity]

It's in the middle of the section actually

[Filip Wiesner]

So there is nothing I can do about it 😄 Good, at least I can tell the designer to reconsider those stupid tiny interactive surfaces. Thanks Rohan 🤝

[Filip Wiesner]

So the composition locals only affect the draw boundaries of the composable, but input touch area cannot be overridden.

[Rohan Maity]

Touch target area ideally should be constrained by wrapping composable but I think in your case according to compose touch target it's not According to guidelines hence internal logic overrides it

[vide]

The composition locals are named somewhat confusingly. LocalMinimumTouchTargetEnforcement only applies for Material components.

[vide]

There is also a

LocalViewConfiguration.current.minimumTouchTargetSize

that applies globally

[vide]

@Filip Wiesner if you want, you can override the global minimum like this:

val viewConfiguration: ViewConfiguration = LocalViewConfiguration.current
val minTouchViewConfiguration = object : ViewConfiguration by viewConfiguration {
    override val minimumTouchTargetSize = DpSize(...)
}

CompositionLocalProvider(LocalViewConfiguration provides minTouchViewConfiguration) {
    ...
}

[Rohan Maity]

This will be on global level right?

[vide]

You can provide the modifier LocalViewConfiguration wherever you need it. If you want for it to apply for the whole composition, put it at the root level. If you want it to apply only for a button component, provide it in that component

[Filip Wiesner]

🙄 Why don’t material components use ViewConfiguration instead of their own solution, which only affects half of the functionality?
Thanks for this, but I’ll still tell the designer it’s not possible and that we should follow accessibility requirements 😄

[vide]

The material library does use the ViewConfiguration provided value for their implementation

[vide]

It's just that you cannot control the global behaviour by using the material customization options

[Filip Wiesner]

The material library does use the ViewConfiguration provided value for their implementation

I see the minimumInteractiveComponentSize defined in material package as DpSize(48.dp, 48.dp).

[Louis Pullen-Freilich [G]]

The documentation here might be a bit confusing / lacking, but there are two separate concepts / requirements here.

• In Compose, touch targets are automatically expanded using ViewConfiguration values, to try and ensure that anything that receives touch events is accessible. In some cases, such as if you have very small items next to each other, (e.g imagine a grid of 20x20 buttons), it is not possible to expand the touch input, as there is no empty space around. ViewConfiguration controls the value used by this system
• Material (the design system) specifies a minimum touch target of 48 for all its interactable components. The extra intention here, is that the total layout size of each interactable component is at least this size, so that in normal situations it is not possible to place these components together in a way where they are not accessible - e.g two checkboxes placed next to each other will still leave enough space for accessible input. Because Compose already has support for expanding input, to support this in Material all we need to do is make sure we ‘allocate’ the extra space that Compose will automatically expand the input to, without us needing to manually move the pointer input handling to fill these bounds
I guess the TL;DR is, Compose isn’t ‘forceful’ about layout size, but it will try to expand inputs. In Compose Material we want to enforce sizing so it is not possible for you to place components in a way where they aren’t accessible. The reason for the flag to disable this Material layout sizing is mostly to allow for compatibility when migrating to Compose, it shouldn’t really be used unless you are sure that you are leaving enough space around these components

[vide]

Ah, it seems the internal implementation of Material has changed between versions. It uses the

LocalViewConfiguration.current.minimumTouchTargetSize

in Material 1.3.1

[Rohan Maity]

I did not use the older version, so was not aware of the old flow.

[Filip Wiesner]

Wow, thank you for the detailed explanation of the full picture, Louis

[Stylianos Gakis]

I can tell the designer to reconsider those stupid tiny interactive surfaces

Does your designer hate your users? Do they want them to become frustrated as they try to click little tiny things? I really would push back incredibly hard against such a touch target. 20dps is incredibly small ☠️

[Filip Wiesner]

Oh it's much worse. It should be two 12.sp clickable texts in column with like 4.sp spacing 🙂

[Stylianos Gakis]

I can’t 😵

[Stylianos Gakis]

Do your designers even use phones?

[Rohan Maity]

May be send your designer these guidelines first

[Filip Wiesner]

Guys, I know... 😄 I am trying so hard to be diplomatic and carefully explain why it is bad but you gotta do what you gotta do.

[Stylianos Gakis]

Fighting the good fight

[Filip Wiesner]

Yup, I am basically a superhero if you think about it