Is it expected that button touch target zone is not constrai

Question

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 thread please

Filip Wiesner · Answer

image png click area mp4

Rohan Maity · Answer

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

Filip Wiesner · Answer

gt its own constrained area What do you mean thinking face 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 · Answer

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 gt 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 · Answer

Interesting where is this quote from

Rohan Maity · Answer

Rohan Maity · Answer

It s in the middle of the section actually

Filip Wiesner · Answer

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

Filip Wiesner · Answer

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

Rohan Maity · Answer

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 · Answer

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

vide · Answer

There is also a ```LocalViewConfiguration current minimumTouchTargetSize``` that applies globally

vide · Answer

< 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 · Answer

This will be on global level right

vide · Answer

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 · Answer

face with rolling eyes 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 smile

vide · Answer

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

vide · Answer

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

Filip Wiesner · Answer

gt 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] · Answer

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 · Answer

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 · Answer

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

Filip Wiesner · Answer

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

Stylianos Gakis · Answer

gt 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 skull and crossbones

Filip Wiesner · Answer

Oh it s much worse It should be two 12 sp clickable texts in column with like 4 sp spacing slightly smiling face

Stylianos Gakis · Answer

I can t dizzy face

Stylianos Gakis · Answer

Do your designers even use phones

Rohan Maity · Answer

May be send your designer these guidelines first

Filip Wiesner · Answer

Guys I know smile 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 · Answer

Fighting the good fight

Filip Wiesner · Answer

Yup I am basically a superhero if you think about it