Course card footer should be clickable

[igobranco]

Bug Report

Problematic Behavior
In the past all the course card were clickable.

At least in March 2022 it was clickable on NAU.
https://arquivo.pt/wayback/20220327192638/https://www.nau.edu.pt/en/

Now it is possible to select the course card text without clicking/open the course page, but it isn't easy to the user to understand were he/she should click to view the course.
Probably having a too much larger section on the card to be clickable isn't good. But we don't have an action button on the card...

Expected behavior/code
Make all course card clickable or create and an action button on the card.

Possible Solution

1. Make the course card clickable;
2. Make the footer clickable - because of Change course cards for self pace courses and open for enroll #1970 that replace the footer with Open for enrollment;
3. add a new link on the course card - if the course is open for enroll, in the courses api it has the call_to_action the value of enroll now, in this case show the enroll now otherwise show view.

Additional context/Screenshots
Add any other context about the problem here. If applicable, add screenshots to help explain.

FYI @sandroscosta

[sandroscosta]

Hi @Leimi. Any best practices we should be on the lookout for?

[manuhabitela]

Hey :)

Indeed for a11y's sake a change was made, I think in this commit: 8c702c1

An issue for screen readers is when you have a whole bunch of semantic html tags in a single anchor (<a>).
Before the commit, the anchor content was: course name + organization name + course code + course date. This can become quite hard to get what it is all about with a screen reader, and hard to navigate quickly. Also, some screen readers decide to strip semantics inside of anchors. So some screen readers won't announce that the course name is a heading, or they will announce the whole content at once without any pause.

Another thing to watch out for is duplicated links. This is why in my commit, the anchor on the image is in a aria-hidden="true" div, with an unreachable tabindex, so that keyboard users and screen reader users only get the anchor on the course name.

Note that a downside of making the whole card clickable is you can't select any specific text in it anymore. Not the end of the world, but I guess copy/pasting a course code is something a user might like.

We discussed this in more details in this PR if it can help: #1620

It's totally possible to reproduce the previous behavior for mouse users while still having accessible cards but I think this will require specific JS.