Increase note actions target size
What does this MR do?
Closes #329380 (closed). Our note action buttons on comments are too small for mouse and mobile users. There have been numerous reports of people accidentally clicking the wrong button within this group of buttons. The recommended target size for passing AAA accessibility success criteria is 44 x 44, and while we don't have to pass at this level, we should be closer to this recommendation than we are.
This change updates the note action buttons to the default 32 x 32 size to ensure inaccurate mouses or touches (on mobile) don't unintentionally click adjacent targets. From the Deque accessibility course the Foundations team has gone through:
The click target size SHOULD be large enough to facilitate easy use with a mouse (including for users with tremors or limited dexterity) without risking activating an adjacent link or button.
There were some style issues on mobile with this chnage, but an adjustment was made, as noted here.
Screenshots (strongly suggested)
| Before | After |
|---|---|
| emoji-buttons-before | emoji-buttons-after |
 |
 |
Additional changes to note
There was also an adjustment to the mobile view. Barring a refactor/redesign, this adds style to adjust for the larger size on mobile. The changes include:
- Reducing avatar to
24pxin height and width onsmbreakpoint - The avatar's right margin to
8pxonsmbreakpoint
Does this MR meet the acceptance criteria?
Conformity
-
📋 Does this MR need a changelog?-
I have included a changelog entry. -
I have not included a changelog entry because _____.
-
-
Documentation (if required) -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Availability and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers -
Informed Infrastructure department of a default or new setting change, if applicable per definition of done
Security
If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:
-
Label as security and @ mention @gitlab-com/gl-security/appsec -
The MR includes necessary changes to maintain consistency between UI, API, email, or other methods -
Security reports checked/validated by a reviewer from the AppSec team