fix(Button): enforce 44px minimum touchable area (WCAG 2.5.5)#1561
Open
AlexandraGallipoliRodrigues wants to merge 1 commit into
Open
fix(Button): enforce 44px minimum touchable area (WCAG 2.5.5)#1561AlexandraGallipoliRodrigues wants to merge 1 commit into
AlexandraGallipoliRodrigues wants to merge 1 commit into
Conversation
|
Size stats
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the Button styling to ensure a minimum interactive/touch target size compliant with WCAG 2.5.5 by enforcing a responsive minimum size (smaller on pointer devices, 44px on touch devices) without breaking existing minimum widths for standard buttons.
Changes:
- Introduces a shared CSS variable (
interactiveAreaSize) to represent the minimum interactive area, switching values viamq.touchableOnly. - Enforces minimum width using
min-width: max(existingMinWidth, interactiveAreaSize)so only undersized link buttons expand. - Enforces minimum height by applying a
min-heightto the internaltextContentcontainer (accounting for button border) to reach the target touch size while keeping content vertically centered.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Deploy preview for mistica-web ready!
Deployed with vercel-action |
|
Accessibility report ℹ️ You can run this locally by executing |
|
Screenshot tests report ✔️ All passing |
… (WCAG 2.5.5) Buttons and button links did not guarantee the minimum touch target size required by WCAG 2.5.5 / ABNT-ANATEL. Short button links (eg. "Fazer recarga" in a card) and small buttons fell below the minimum, failing the Android Accessibility Scanner. Following the chip/switch-component pattern, add a transparent `::after` overlay that enforces a 48px minimum interactive area ONLY on touchable devices. The overlay is absolutely positioned and overflows the button when it's smaller than 48px, so it does NOT affect the layout nor the visible button size (per design spec #2548 / DSNCORE-2286). It self-limits via min(0px, ...), so default buttons (already >=48px) are untouched. Because the overlay must not be clipped, the button's `overflow: hidden` (used to clip the loading animation) is moved to an inner content wrapper. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
AlexandraGallipoliRodrigues
force-pushed
the
fix/button-min-touchable-area-web-2445
branch
from
a291767 to
dc8c85a
Compare
This file contains hidden or 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
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.
ticket: https://jira.tid.es/browse/WEB-2445