Cards and focus and hover

Card title

This card has no actions. We make the card title a link (a href).

With a mouse: note how the cursor only changes on the link, but the whole card gets hover styles.

With a keyboard: note how the we use focus-within to give the cards styles when the link has focus.

With a screen reader note how the link text is just "Card title" and not the whole card, even though the whole card acts like a link.

Card title

This card has one action. Only the button is interactive.

With a mouse: note how the cursor only changes on the button, but the whole card gets hover styles.

With a keyboard: note how the we use focus-within to give the cards styles when the button has focus.

With a screen reader: note how we use visually hidden text to make the button clearer - "Edit card title"

Card title

This card has three actions. We make the card title a link (a href and the two other actions buttons.

With a mouse: note how the cursor only changes on the link and the buttons, but the whole card gets hover styles.

With a keyboard: note how the we use focus-within to give the cards styles when the link or buttson have focus.

Bad card title

This card is naughty. It's:

1. nesting interactive things;
2. not using semantic HTML and instead creating more work trying to turn a div into a button;
3. wrapping the card in a "button", which makes the button "text" the contents of the card (including the text interative elements inside it!)