feat(button & stepper): ensure minimum 48x48 hit target for better accessibility #3522
Conversation
nitzanyiz
changed the title
nitzanyiz
changed the title
nitzanyiz
changed the title
src/components/button/index.tsx
Outdated
| const isWidthDefined = containerStyle.width !== undefined || containerStyle.minWidth !== undefined; | ||
| const width = containerStyle.width || containerStyle.minWidth || 0; |
There was a problem hiding this comment.
Can't we combine both
I think isWidthDefined is redundant, you check run checks on the width (if it's zero it's undefined)
There was a problem hiding this comment.
I found why I added this. There are times (when the button is round) when the width and height is undefined but there is padding this way the button is not just the padding because of the text inside of it and we will add extra hitslop for nothing. Instead of just the 10 we decided to add by default.
There was a problem hiding this comment.
Because the width will not be zero in this case (it will have the padding)
There was a problem hiding this comment.
As we've talked I'm reverting the changes I did so we make the isWidthDefined check. I'll change it to isWidthSet as well. I think its more readable. wdyt?
…ve hit slop logic
…nd improve hit slop logic" This reverts commit c1b3ba1.
Description
Added hit slop to the button component based on its size.
This pr fixes the stepper as well.
Changelog
Button - Fixed hit target to be at least of 48x48.
Stepper - Fixed hit target to be at least of 48x48.
Additional info
MADS-4591