fix(material-experimental/mdc-button): set proper touch target

[crisbeto]

This is a reimplementation of #22846 which includes a fix for RTL layouts.

Adds some styles to ensure that the MDC-based button always has a touch target of at least 48px. Note that I decided against using MDC's built-in touch target class, because it would've added a margin on the button host node.

Fixes #22799.

Caretaker note: Check in with the Domains team to make sure this passes their RTL tests on Guitar (feel free to message me to know who to contact)

[mmalerba]

LGTM

[mmalerba]

Now that I think about it, should we hide the touch target element for lower densities? We don't need to guarantee accessible touch targets for lower densities, and I suspect most people would want to disable them anyways

[crisbeto]

I don't feel super strogly about it, but it seems like something that doesn't really hurt the experience on lower densities either. Also at what point would we hide the touch target?

[mmalerba]

I think it does hurt the experience, the touch target will over-hang quite a bit on lower densities, to the point where you can easily click the wrong button because its overlapping the neighboring button. (you could solve this by adding a bunch of margin, but that defeats the point of low density)

[crisbeto]

I've pushed a change to remove the touch target on the two most dense configurations.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}