Increase menu button touch area on small screens #4503
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
javierm
force-pushed
the
menu_button
branch
3 times, most recently
from
c6eb39b
to
dab2e80
Compare
Using `currentcolor` and `color: inherit` is IMHO more expressive (we're saying we want to use the same color as the text) and makes it easier to customize these colors in other CONSUL installations. We also remove duplication as we can use the same styles for both the admin and the public layouts.
Some users might not be able to touch the icon due to a motor disability. Other users might think the "Menu" text is part of the button and try to touch it instead. Making the "Menu" text part of the button makes it easier to show/hide this menu. Besides, it lets screen reader users with a small screen hear the word "Menu" associated to the button. We could simplify the HTML a bit more but Foundation's `hamburger` mixin uses the `::after` element with `position: absolute`, so we can't apply it directly to the button without making the CSS more complex.
This way we make it more obvious that it's clickable and, since adding a border requires adding padding, we increase the touch area, making it easier to use and more accessible for users with motor disabilities. Since now the button looks like a button, we don't need the pointer cursor Foundation adds to hamburger icons and can use the default cursor browsers provide for buttons.
Senen
approved these changes
Jun 2, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Objectives
Visual changes
Before these changes
Note the "menu" text is not clickable.
After these changes
Note the "menu" text and everything between the text and the border is clickable.