Open matthias-dev opened 1 month ago
For context, the difference is that in v16 the icon button is 48x48px while now it is 40x40px. The reason for that change was that this was a change in the Material specs for M3 icon buttons. Despite that, the touch target remains 48x48px for better accessiblity. Unfortunately this means sometimes touch targets overlap.
Although I'll leave this issue open since it would be ideal if this experience can be improved here.
Is this a regression?
The previous version in which this bug was not present was
16.2.14
Description
Placing two mat-icon-buttons side by side just like the angular material doc pages does results in overlapping touch targets. And the user clicks the wrong buttons. v16.2.14 (of the docs):![image](https://github.com/user-attachments/assets/b5ccb0d0-5961-4b2f-8f9e-91cffea96a3b)
v18.1.2 (of the docs):![image](https://github.com/user-attachments/assets/48ce62be-3489-4a6e-9d22-ea9c7fc7c7a8)
Reproduction
Just open the https://v16.material.angular.io/components/button/overview page and compare the button touch target behavior when moving the mouse over the icon buttons with the one of the current version https://material.angular.io/components/button/overview
Expected Behavior
Icon-Buttons should be separated clearly for the user, and no overlapping should occur.
Actual Behavior
Even though the mouse pointer is clearly over another button, the neighboring button is already displayed as hovered and is executed when clicked.
Environment