<p dir="auto">Try to move keyboard focus to a trace thumbnail while on a trace list page. This is what you'll see in Firefox:<br>
<a href="https://github.com/openstreetmap/openstreetmap-website/assets/4158490/8edcd640-1c5a-4959-b578-03dc8943cc99">image.png (view on web)</a></p>
<p dir="auto">After the fix:<br>
<a href="https://github.com/openstreetmap/openstreetmap-website/assets/4158490/4eef8a52-abef-4669-b831-7fd4ece321bf">image.png (view on web)</a></p>
<p dir="auto"><code class="notranslate"><img></code> is an inline element by default, <code class="notranslate"><a></code> is also an inline element, so a link with a thumbnail inside is as tall as a line of text. And it's shorter than the actual image size. You can see this in browser dev tools, both in Firefox and in Chrome. Chrome still draws the outline around the image but Firefox doesn't.</p>
<hr>
<h4>You can view, comment on, or merge this pull request online at:</h4>
<p> <a href='https://github.com/openstreetmap/openstreetmap-website/pull/4744'>https://github.com/openstreetmap/openstreetmap-website/pull/4744</a></p>
<h4>Commit Summary</h4>
<ul>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4744/commits/dea9c385b3f141bceb12d9cad854f671c20242a4" class="commit-link">dea9c38</a> Set trace thumbnail link display property to inline-block, fixing focus outline</li>
</ul>
<h4 style="display: inline-block">File Changes </h4> <p style="display: inline-block">(<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4744/files">1 file</a>)</p>
<ul>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4744/files#diff-f698347c73e920a2c1e10d03873cedbde14208bd883574b5567748dfd3037594">app/views/traces/_trace.html.erb</a>
(4)
</li>
</ul>
<h4>Patch Links:</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/4744.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/4744.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/4744.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/4744.diff</a></li>
</ul>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/4744">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLL6DURVO6FTKNBZHS3Y76SPDAVCNFSM6AAAAABHAME5JCVHI2DSMVQWIX3LMV43ASLTON2WKOZSGI3TCNRRGM3TANY">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLLIVT6O6NH57BZLQTLY76SPDA5CNFSM6AAAAABHAME5JCWGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHIOZQTBM.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/4744</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/4744",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/4744",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>