Alert component - click area size for touch devices

[stevenbriscoeca]

Hello,

I noticed in the alerts component with the "x" you guys put 14px by 24px size.

When the recommend size by Apple’s iPhone Human Interface Guidelines is 44px by 44px for touch interfaces. I know this is not an IOS app, but people will be viewing bootstrap from a web browser on devices.
Source : https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LayoutandAppearance.html#//apple_ref/doc/uid/TP40006556-CH54-SW1

I was wondering why did you not put it 44px by 44px and is this something you plan to change in the future.

Thank you

[patrickhlauke]

why did you not put it 44px by 44px

believe it or not, sometimes things aren't done on purpose ;)

while i believe 44x44px may be a tad on the excessive side in terms of size, i'd agree that the actual active/touch target size could be increased a bit (particularly horizontally)

[patriciamarchand]

What do you have in mind? Enlarge only the target area or enlarge the image?

[LarryAzevedo]

I would suggest changing the output from:

.alert-dismissible .close { color: inherit; position: relative; right: -1rem; top: -0.125rem; }

to:

.alert-dismissible .close { color: inherit; position: relative; right: -2rem; top: -1rem; padding: 1rem; }

Here's a before and after screenshot (see below). The thin red dotted box represents the clickable/touchable area.

[rwaltenberg]

Sent a pull request with @LarryAzevedo's solution (#21112)