Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mobile test should also emulate having a coarse pointer device. #15885

Closed
romainmenke opened this issue Mar 25, 2024 · 6 comments
Closed

Mobile test should also emulate having a coarse pointer device. #15885

romainmenke opened this issue Mar 25, 2024 · 6 comments
Assignees
@adamraine
Labels
bug DevTools P1.5 upstream-action-required

Comments

@romainmenke
Copy link

romainmenke commented Mar 25, 2024 •
edited
Loading

Currently @media (any-pointer: coarse) {} is false when running a mobile test in Lighthouse.

This affects the scoring for things like tap target checks.

see : https://web.dev/articles/accessible-tap-targets

As noted in the article is best to ensure appropriate tab targets when the pointer device is possibly coarse.

Instead of simply testing for viewport dimensions, and then guessing that small dimensions are likely to be phones or tablets, which in turn use a touchscreen, there are now more robust ways to adapt your design based on actual device capabilities.

However when using that approach we still fail the lighthouse test because the styles behind such a media query are never applied during the test.

This contrasts with manually setting a mobile device in dev tools:

Screenshot 2024-03-25 at 18 27 20
@adamraine
Copy link
Member

adamraine commented Mar 27, 2024 •
edited
Loading

During a Lighthouse run with mobile emulation enabled, I am seeing window.matchMedia('(any-pointer: coarse)').matches return true. Can you provide an example page where you are seeing the media query styles not being applied?

@romainmenke
Copy link
Author

romainmenke commented Mar 27, 2024 •
edited
Loading

You can test with this example :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<style>
		a {
			display: block;
			margin: 0;
			padding: 0;
		}

		@media (any-pointer: coarse) {
			body {
				background-color: green;
			}
		}

		@media (any-pointer: coarse) {
			a {
				margin: 50px;
			}
		}

		/* @media (width <= 600px) {
			a {
				margin: 50px;
			}
		} */
	</style>
</head>
<body>
	<a href="#1">One</a>
	<a href="#2">Two</a>
</body>
</html>

I expect to see a green background and a lot of white space around each anchor.

Instead I see a white background and no white space.

I also see this notice:

Tap targets are not sized appropriately 0% appropriately sized tap targets

Screenshot 2024-03-27 at 23 19 05

@adamraine
Copy link
Member

adamraine commented Mar 27, 2024 •
edited
Loading

Ah I see. I can reproduce using Lighthouse in DevTools but I'm not seeing the issue with Lighthouse CLI

@adamraine adamraine assigned adamraine and unassigned connorjclark Mar 27, 2024
@romainmenke
Copy link
Author

Thank you for checking again!
Interesting that it does work as expected in Lighthouse CLI.

@adamraine
Copy link
Member

I made a minimum repro and filed an upstream bug in chrome:
https://issues.chromium.org/u/1/issues/331757596

@romainmenke
Copy link
Author

Thank you for taking the time to make the repro and filing the upstream bug 🙇

It's fine to close this, I can track the upstream issue :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@adamraine adamraine

Labels
bug DevTools P1.5 upstream-action-required
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@connorjclark @adamraine @romainmenke @devtools-bot