What fresh hell is THIS now? - Patrick Lauke
input type="text" placeholder="DD/MM/YYYY"
(i.e. date of birth) or input type="date"
or even a select
with suggestions
<article>
and have links within it, but what about when you want the entire card to be a link. Any thoughts on the best way to mark that up? <a><article></article></a>
, <a role="article">
, or something else?
[dpogue] @mayabenari I was poking around at how the Google Play Store does its cards (since they play very nicely with the VoiceOver screen reader), and they have a unique way of making the whole card a link:
```<div class="card">
<a href="..." aria-hidden="true" tabindex="-1" class="card-link"></a>
<h3><a href="...">Article title</a></h3>
</div>```
.card { position: relative; } .card-link { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
[scottohara] if you go down the CSS only route, make sure you add the following:
.card-link { ...; z-index: 1; } .card a { position: relative; z-index: 2; }
otherwise any secondary links you have within the card and even the hover state for the primary link, won’t be clickable, since the card-link would be ‘blocking’ mouse events
.card *:not(a) { pointer-events: none; }
, if you don’t feel like messing with z-index