Check tap-targets inside sticky/fixed elements

[castilloandres]

Provide the steps to reproduce

1. Run LH on https://www.prestonfield.com/

What is the current behavior?

prestonfield.com is passing the tap targets audit.

What is the expected behavior?

prestonfield.com should fail the the tap targets audit. Buttons and links inside sticky elements seem to not be considered and analyzed.

For context: Tap targets should be at least 48 x 48 pixels in width and height and 8 pixels between them on all sides.

Overlapping tap targets and too small pair in top sticky bar:

• Phone icon: 38.56 x 40
• Burguer icon: 38.56 x 40

Overlapping tap targets and too small pair in bottom sticky bar:

• "Book a room": 165.59 x 42
• "Book a table": 165.59 x 42

If I am not wrong, looking at the code I think these tap targets get discarded here: https://github.com/GoogleChrome/lighthouse/blob/43896afb37785c9cb9a9a3bd88e8841d8e729d15/lighthouse-core/gather/gatherers/seo/tap-targets.js#L183

Environment Information

• Affected Channels: Extension
• Lighthouse version: 5.1.0.1
• Node.js version:
• Operating System:

[patrickhulce]

Thanks for filing @castilloandres!

A few notes:

1. You are correct that fixed/sticky elements are excluded from consideration. I suppose, as you point out, it's still worth trying to catch issues within the fixed/sticky element.
2. Even if we fixed that, I think these specific elements would still pass. Our implementation is slightly more forgiving than what you've outlined and we only require that a 48x48 finger attempting to tap the center of the tap target does not significantly overlap with any other tap target. In this case, the pair in the bottom sticky bar definitely pass, and the top sticky bar buttons have just a bit of overlap but are within our tolerance threshold.

We'll definitely take the within fixed/sticky elements improvement into consideration for future work though!

[castilloandres]

Thanks for the detailed explanation @patrickhulce !! 👍