Change cards into one link

Nikomus commented 5 years ago

Fixes #159

Description

Makes the whole card a link
Link now only read out once, though description a little long
Requires theme.scss update in ca-hh

@neontribe/contemplating-action

falconx commented 5 years ago

sorry, maybe I wasn't clear :) this wasn't just a recommendation. I've encountered this scenario on several occasions before (on Allegiant) and discussed it with accessibility experts (one of which was Heydon :P)

you are correct in that you should never have a link within a link. the html spec forbids one interactive element inside another.

no aria enhancements needed. the onclick merely provides a larger surface for touch and mouse users. it remains accessible because we have the hyperlink for keyboard users. context is provided by the heading element. I would go further and have the wrapping element for each story teaser be a <section> or even <article> (instead of div)

you may also have to stopPropagation from the nested anchor to avoid multiple change route requests.

Nikomus commented 5 years ago

@falconx Hey! Thank you for the advice - I'm happy to go with it. I think I'll also have to:

Move some hover/focus styling to the card, so sighted pointer users know the whole card does something
Maybe move the h2 before the image so that it titles the section and use CSS to get the same appearance

katjam commented 5 years ago

@Nikomus Do you want to finish this? Or shall we ask @HedgehogHolly ? I have a feeling you may have done it locally already?

neontribe / contemplating-action

Change cards into one link #225

Description