Tap targets sizing and overlap

[brandonpeat]

As a designer and front-end dev, the tap targets rule has long vexed me, since the 8px spacing requirement effectively prevented flush hyperlink elements no matter how large they were. While researching the rule this weekend to better understand it, it seems the requirements have very recently changed. Spacing is no longer a requirement, and now overlap will be the determining factor. Great news for designers!

I tried testing in browser to see at what point my designs would fail the test -- but they never failed. Even when the elements overlapped significantly.

I eventually figured out why:

• If the href is "#" it doesn't seem like the <a> will get tested at all. I had 24x24px buttons and Lighthouse was telling me "100% correctly sized tap targets".
• If the <a> is set to display: flex that also appears to mess with overlap detection. The above screenshot was passing Lighthouse until I changed the <a> to display: block.

Not sure if these are major concerns or just edge cases, but wanted to pass along.