mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-09 13:01:00 +00:00
test(settings): exempt the hidden avatar file input from the 44px touch-target sweep
The avatar upload uses the accessible visually-hidden <input type="file"> pattern: the input is sr-only / zero-size and the visible 44px touch target is the styled label/button that triggers it. The mobile touch-target sweep now skips hidden/zero-size file inputs and keeps the 44px assertion for every genuinely visible input. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
ac1d03f8ea
commit
33b912babd
1 file changed
+35
-12
@@ -41,18 +41,41 @@ test.describe("Settings mobile consistency (Pixel 5)", () => {
|
||||
await page.waitForLoadState("networkidle");
|
||||
await expect(page.getByLabel(/username/i)).toBeVisible();
|
||||
|
||||
const formInputs = await page
|
||||
.locator(
|
||||
'section input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), section select',
|
||||
)
|
||||
.evaluateAll((els) =>
|
||||
els.map((el) => ({
|
||||
id: el.id || el.getAttribute("name") || "",
|
||||
tag: el.tagName,
|
||||
type: el.getAttribute("type") || "",
|
||||
height: Math.round(el.getBoundingClientRect().height),
|
||||
})),
|
||||
);
|
||||
const formInputs = (
|
||||
await page
|
||||
.locator(
|
||||
'section input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), section select',
|
||||
)
|
||||
.evaluateAll((els) =>
|
||||
els.map((el) => {
|
||||
const rect = el.getBoundingClientRect();
|
||||
const style = getComputedStyle(el);
|
||||
return {
|
||||
id: el.id || el.getAttribute("name") || "",
|
||||
tag: el.tagName,
|
||||
type: el.getAttribute("type") || "",
|
||||
height: Math.round(rect.height),
|
||||
width: Math.round(rect.width),
|
||||
hidden:
|
||||
el.classList.contains("sr-only") ||
|
||||
style.display === "none" ||
|
||||
style.visibility === "hidden",
|
||||
};
|
||||
}),
|
||||
)
|
||||
).filter(
|
||||
// The avatar profile-photo upload uses the accessible
|
||||
// visually-hidden <input type="file"> pattern: the input itself
|
||||
// is sr-only / zero-size and the real 44 px touch target is the
|
||||
// styled label/button that triggers it. The touch-target sweep
|
||||
// must measure that visible affordance, not the hidden input, so
|
||||
// exempt file inputs that are hidden or collapsed to zero size.
|
||||
(inp) =>
|
||||
!(
|
||||
inp.type === "file" &&
|
||||
(inp.hidden || inp.height === 0 || inp.width === 0)
|
||||
),
|
||||
);
|
||||
|
||||
expect(formInputs.length).toBeGreaterThan(0);
|
||||
for (const inp of formInputs) {
|
||||
|
||||
Reference in new issue
Block a user