Make image clickable

Added some suggestions

Changes looks good to me.

Screenreaders/rotors/other assistive tech will interpret these as a bunch of empty links. The logo images are marked as decorative (no alt text) because they're pulled from an external source where alt data is not reliable. Adding links where the only content is a decorative image is a problem as there's no non-sighted way to identify that link.

Referring to the earlier discussions on making the project tile more accessible we should make the complete region having the logo and the title clickable.

Left a comment for the same in the MR.

The new MR looks good! Just the focus on the bottom needs to be fixed. It is currently overlapped by another element:

i've applied the latest state of the merge request. at least in my environment i was unable to reproduce the outline issue described in #17. i've tested on macos 12.6.1 in the latest versions of safari, firefox and edge. for me all browsers looked like in the screenshot here in safari:

in regards rotor as mentioned in #8 i've quickly tested in macos voiceover:

currently in both sections (links and form elements) it is impossible to distinguish between the listed elements for a screenreader users. you either have modules or installed button repeated in a redundant way. each of the entries is missing a context.

additionally in the rotors headings section there is no heading for any of the card components listed. the only way that one heading is listed is if you get one card heading into focus by tabbing into it, then start voiceover, and open the rotor. then you are able to see the card heading in focus in the rotors heading section as well. the rest of the modules is still not available in the rotors headings section.

and one detail i've notice i am not sure if it is related with the current issue. but if you tab through one card the first tab you get headline and logo into focus, on the next tab the focus disappears and on the last tab inside the card the button in the bottom right corner gets into focus.

uploaded the image that i've added to the previous comment in my edit.

I am working on this issue as part of DrupalCon Pittsburgh

Added Merge Request. Solution is to just wrap the Image element with anchor tag linking to project page.
@earthday47 is willing to add tests as needed.

Changes committed to branch 3311992-make-image-clickable-pittsburgh2023

Thanks @fjgarlin for re-pushing commits and running tests.

Hi all! Catching up on this issue's history, I do see that we wanted to have the top region clickable for accessibility reasons. I didn't want our work from yesterday to invalidate all of this useful work, so I rebased the 2nd-to-last MR/branch.

So we have a couple options... the a wrapping the Image element, which would create two anchors to tab through, or the original approach creating a click event/action on the wrapping div.

I definitely prefer "the original approach creating a click event/action on the wrapping div." 2 click targets makes less sense especially for a non-sighted user.

It'd also be great to close the MRs that are no longer used.

Rebased

Tests are not passing. Back to NW.