fix: apply the 44px button target only to coarse pointers
Gitea Actions Runner Test / test-job (push) Successful in 2s
CI / check (push) Successful in 27s
CI / tests-integration (push) Successful in 1m35s
CI / tests-unit (push) Successful in 1m38s
CI / tests-ui (push) Successful in 2m20s
CI / preflight (push) Skipped
CI / deploy (push) Failing after 2m55s
Gitea Actions Runner Test / test-job (push) Successful in 2s
CI / check (push) Successful in 27s
CI / tests-integration (push) Successful in 1m35s
CI / tests-unit (push) Successful in 1m38s
CI / tests-ui (push) Successful in 2m20s
CI / preflight (push) Skipped
CI / deploy (push) Failing after 2m55s
The UI screenshot suite caught a regression from the previous commit: the admin article form grew 3px and its baseline no longer matched. The cause was the blanket `.btn` min-height bump from 40px to 44px. That was the wrong way round — 40px already clears WCAG 2.2 AA, which asks for 24px, and 44px is a touch-target guideline. Growing every button for mouse users only made each admin dialog and table 4px taller for no benefit. The 44px floor now sits behind `@media (pointer: coarse)`, so finger input gets the comfortable target and desktop keeps its density. A hybrid laptop still uses the desktop metrics for its trackpad, which is the behaviour the previous attempt got wrong in both directions.
This commit is contained in:
1 parent
5cb42c8dfb
commit
6b34293cd3
1 file changed
+15
-4
+15
-4
@@ -1023,10 +1023,12 @@ a:hover {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
/* 44px: the comfortable touch-target size (WCAG 2.1 AAA 2.5.5 / Apple HIG).
|
||||
WCAG 2.2 AA only asks for 24px, so this is a comfort floor rather than a
|
||||
compliance fix, but every button in the system shares this class. */
|
||||
min-height: 44px;
|
||||
/* Desktop density: 40px. WCAG 2.2 AA only asks for 24px, so this is already
|
||||
comfortable for a mouse. The 44px touch-target size (WCAG 2.1 AAA 2.5.5 /
|
||||
Apple HIG) is applied below only for coarse pointers — growing every
|
||||
button on desktop pushed each admin dialog and table 4px taller for no
|
||||
benefit to mouse users. */
|
||||
min-height: 40px;
|
||||
transition: all 0.18s ease;
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
@@ -1036,6 +1038,15 @@ a:hover {
|
||||
color: var(--color-text-readable, var(--color-text));
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Touch devices get the comfortable target size; desktop keeps the denser
|
||||
layout. `pointer: coarse` matches finger input, so a hybrid laptop still uses
|
||||
the 40px desktop metrics for its trackpad. */
|
||||
@media (pointer: coarse) {
|
||||
.btn {
|
||||
min-height: 44px;
|
||||
}
|
||||
}
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
|
||||
Reference in new issue
Block a user