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.

This is now ready to be reviewed. A tag wraps around the title and logo image. Tests are properly processing this.

This change causes the Module title to be center aligned to the image on the list view creating white space above and below the title.

Proposed solution is shrinking the image on the list view and sudo-list view, for small screens, so the title has better alignment and it is more consistent with the size used on drupal.org

There is also white space that appears on some screen widths to the left of the image.

The image and title also gets pushed to the left on the sudo-list view on small screens. (happens if you leave the view on "grid" but then shrink the screen)

I'll update this today.

I've updated the code to make the list view function properly.

I'm trying to figure out the best way to handle it changing from grid and then back to list when you change the size of the display. I'll keep working on that issue or make it a separate issue from this one.

I applied this and I can click the icon. I had a look at the failing tests and wasn't able to establish why they are failing, for example this line is failing $this->svelteInitHelper('text', 'Dancing Queen'); which suggests a11y issue in the style/dom?

I'm having issues in Grid View and narrow window.

@Sime the tests for this can be a bit janky. You may have to run it more than once to get it to show up. When I was running these in the past it would sometimes run the tests so fast that not everything had loaded in properly.

I'm going to look at the grid layout issues again this weekend.

+1 for this. Images in the results should be clickable and take the user to the module's detail page.

Addressed #52, please review

Tested MR 468 on Drupal 11
Images in the results should be clickable, and the user should be taken to the module's detail page.
this is +1
Adding Screen recording for reference

but In the issue summary, MR is "Open Failed pipeline"

moving to "needs work"

Is this still relevant? Was trying to test the functionality, but the MR is very outdated, targets 1.0.x and doesn't work locally. How can this be moved forward?

If this is still desired for PB, it needs to be restarted for the 2.x branch

Yes, I would say starting over based on 2.0.x is good.

It's still desirable to be able to click the image or the link. Again, the fundamental issue is being able to wrap those two elements in a single anchor tag in a semantic way, because having two things that click to the same target not good for accessibility.

If there's a way to meet both goals, we go for it. If there's not, then we can abandon and people will just have to click on the title. :)