Card a11y issues

[PahaN47]

During our a11y testing we have found out that the way cards provided by the library work is not the way they are expected to behave in relation to links.
The current implementation is flawed since when a card is supposed to be a clickable link it is wrapped in an <a> tag which makes sense for a typical user, but for a visually impaired person this adds an unnecessary wrapper before accessing the card's contents. This problem is amplified by the fact that this link wrapper currently also receives aria-labelledby and aria-describedby attributes from card's title and text respectively. This makes the card's description partially inaccessible as element's aria descriptions are not read out loud by default in some screen reader programs. Furthermore, adding a label to the link completely removes any indication that the user is in fact currently focusing on a card and not a simple link making the description even less accessible as there is no way for the user to know it's somewhere in there at all.
The way a card should work is allow the user to go through it's contents sequentially without any wrappers around them. If a card is a link then the link should be exposed to the user through the title element.
There are several ways to achieve this that may be suggested:

• Leaving the cards as they are now, but changing the element's aria roles in such a way that they behave as expected:

<a class="card" href="..." role="group">
    <h1 class="title" role="link">Title</h1>
    <div class="description">Description</div>
</a>

• Removing the link wrapper and creating a link overlay on top of the card:

<div class="card" style="position: relative;">
    <a href="...">
        <h1 class="title">Title</h1>
    </a>
    <div class="description">Description</div>
    <a href="..." style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;" aria-hidden="true"></a>
<div>

• Removing the link wrapper and adding a JavaScript redirect handler to the card element.

These changes would affect the BasicCard, BackgroundCard and potentially other components that use CardBase. It should also be noted that in any of the above solutions the card title's link should not be different from the link on the card itself.

I also suggest that images and icons inside cards should have aria-hidden applied to them by default unless they are provided an aria-label. Currently these images simply clutter the screen and provide nothing to the user