neontribe / contemplating-action

A single page app for stories leading to info
MIT License
1 stars 0 forks source link

W.I.P for issue 159 Story Card Links #222

Closed HedgehogHolly closed 5 years ago

HedgehogHolly commented 5 years ago

Description

Matt: the div onclick needs to fire a navigtion change. this element does not need to be focusable since we have the nested hyperlink.

@neontribe/contemplating-action

falconx commented 5 years ago

More @Nikomus domain, but I thought we were going for a solution that made screen readers ignore the click function on image and title... but hadn't necessarily worked out how.

Should be achievable with pointer-events: none or by stopping the onclick event propagation.

However, I would argue against this UX. Either having only the hyperlink or the entire teaser area clickable is best practice.

Also - this gives us the issue of having the whol thing clickable which makes it potentially more difficult for the majority of our users on touch screens.

I would argue that it makes it easier. I'm guessing that you're referring to users being able to scroll past the teaser but the browser should be able to behave differently based on the user pressing or swiping/scrolling. :slightly_smiling_face:

Nikomus commented 5 years ago

Some good progress here! We still have the doubled-up text link and arrow at the bottom of the card, and we need to make a decision on whether to link the whole card, or maintain individual links but manipulate the screen reader output. Either way, we should try to keep visual cues like hover and focus states, cursor: pointer etc in line with what is actually interactive.

HedgehogHolly commented 5 years ago

@Nikomus is working off his branch #225 so I am closing this one.