mi6
[ic-card-vertical] Clickable card link styling doesn't match link in Safari
Summary of the bug
When you hover over a link in Safari it expands the underline to be taller, but when you hover a clickable card, the card title link only moves the underline on hover.
📸 Screenshots or code
Link on hover:
Card title on hover:
🧐 Expected behaviour
The card title should look like an ic-link
Confirm with design if we should have a thick underline or not for accessibility reasons, even though that does not match current Figma behaviour
We discussed this a while back during backlog grooming.
Cards in Figma:
Cards do not use Link component for the title of the card as you cannot utilise a property to populate the title text - you can't do this in Link component (in Figma).
The header text style in Card is using H4 (size:20, weight:semiBold, lineHeight:32) whereas Link uses LinkDefault (size:16, weight:SemiBold, lineHeight:24)...so there's a difference here if we start using Link instead of H4.
Cards using heading property to set the text in a card heading = Figma matches Dev Link does not have such a property = Figma matches Dev
As such, although the title in a clickable card looks a little like a link, it is merely indicating to the user that the whole card is clickable in addition to the whole card's hover and pressed states.
We could attempt to add a thick underline under the label on hover but it;
- would not match Link
- would not automatically duck lower ligature letters and
- would not work with wrapped text
Therefore, from a design perspective there's nothing else to do here.
Cards in Dev: From a design perspective, if the title in a clickable card has been implemented as a Link, then that is fine. The thick underline on the title gives additional feedback to the user that they're hovering over something that could be clicked on (in addition to the background shading of the card changing too). Ideally the Figma and Dev would have perfect alignment.
If we wanted to align them, we would need to;
- introduce a property on Link to specify the text which is being linked (not the url)
- introduce different sizing variants for Link, so that it could line up with the H4 text style of a card heading
TL;DR: The scope of this ticket is to align Safari with the other browsers - make the underline thick.
