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-weight: 700;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
/* 44px: the comfortable touch-target size (WCAG 2.1 AAA 2.5.5 / Apple HIG).
|
/* Desktop density: 40px. WCAG 2.2 AA only asks for 24px, so this is already
|
||||||
WCAG 2.2 AA only asks for 24px, so this is a comfort floor rather than a
|
comfortable for a mouse. The 44px touch-target size (WCAG 2.1 AAA 2.5.5 /
|
||||||
compliance fix, but every button in the system shares this class. */
|
Apple HIG) is applied below only for coarse pointers — growing every
|
||||||
min-height: 44px;
|
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;
|
transition: all 0.18s ease;
|
||||||
background: color-mix(
|
background: color-mix(
|
||||||
in srgb,
|
in srgb,
|
||||||
@@ -1036,6 +1038,15 @@ a:hover {
|
|||||||
color: var(--color-text-readable, var(--color-text));
|
color: var(--color-text-readable, var(--color-text));
|
||||||
text-decoration: none;
|
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 {
|
.btn:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
|||||||
Reference in new issue
Block a user