[DESIGN] Card hover and link states

[fionamorrison23]

User story

As an anonymous user with impaired vision
I want a clear visual indication that a card is linked, i.e. clear and obvious hover state
So that I can easily identify linked cards on the site

As an anonymous user
When I hover on a card
I want the entire card to be linked
So that I don't need to move around on the card to find the link

Description

Hover state
The hover state on OOTB cards in CivicTheme is not accessible. The current hover state:

• Very light shadow appears under the card (not visually accessible)
• Title colour changes (in the CivicTheme brand colours the contrast between the two colours doesn't pass WCAG)

Card link.
Only the title and the chevron/arrow (when one is present) is clickable, even though the entire card has a hover state. This is confusing as the user thinks they can click anywhere on the card because the hover state is enacted.
Consider making the entire card clickable.

Acceptance criteria

AC 1 - hover
Given I am an anonymous user
When I hover on a card
Then there is a clear visual indication the card is in the hover state
And it complies with WCAG 2.2

AC 2 - link
Given I am an anonymous user
When I click on a card that has a link
Then the entire card is linked