Improve iconography usability by adding a legend

Removing from Postponed as the dependency has been committed.

I'm not going to lie the addition of a legend doesn't feel as helpful as a tooltip (title text) on the icon on the card. I know this is being discussed. https://www.drupal.org/project/project_browser/issues/3293909 🐛 Security and maintained icons need to communicate correct information Fixed however, my feeling from a user standpoint is that a legend could easily be ignored or not helpful because it's not on the card itself and viewable all the time.

I disagree that a legend isn't helpful. Accessibility guidelines suggest that icons should be accompanied by visible text descriptions wherever feasible, and tooltips are generally not an option when a user isn't using a pointer device. This makes the alt-vs-title attribute issue 🐛 Security and maintained icons need to communicate correct information Fixed less of a problem because visible text should always be read by screen readers, and it makes icon descriptions available when not using pointer devices. While it'd take some rearranging, I think it'd be more than feasible to include brief text descriptions in the cards. It could even be something like "Covered" and "Maintained" with a more verbose description in the detail view (which is effectively what we're doing already).

More broadly, I feel especially for people new to Drupal that we'd rather make this information readily visible instead of making them go out of their way find out what it means. I feel like "hover over something for a tooltip describing it" is no longer something we can count on people to know to do — if it's even possible on their device.

I'm of the opinion that having a title and alt tag for an icon is more than enough. Adding a legend just clutters the display.

If we wanted to have easily visible text a hover effect where hovering over an icon would reveal text could be an option, but I feel that for now an alt and title are more than enough.

I have added back the wrench icon in this issue. 📌 Replace Wrench icon on project views with Gear icon Postponed .If we don't want to continue with legend then we can either get the remaining work done in the same issue or we can wait for that to merge and then carry on the remaining work on this issue.Marking this needs review for now so that we have next steps clear on this, as this is a beta blocker.

This change seemed to be quite a long way behind, so I rebased to the current 2.0.x branch.

All tests are passing, except the "next minor" Nightwatch test. I think this is because of the change to Nightwatch 3.7.

I carried out some manual testing, and found a few minor issues.

The icons for the keys are not currently appearing. The URL in the <img> tag is undefined/modules/contrib/project_browser/images/blue-security-shield-icon.svg, so something seems to be going wrong with generating the location.

Also, the key elements seem to take a lot of space. I think they could be spread out over a single line, perhaps in a flexbox.

There also are two sets of list/grid buttons. Not sure if that's something I accidentally introduced in the rebase. I'll have to check the current 2.0 branch and make sure it's not in that.

The other thing is this change uses a <style> section in ProjectBrowser.svelte. As far as I know we're not using Svelte styling, and have moved styles into pb.css to be more consistent with Drupal. Is this right?

I don't know if this is correct, but the extra list/grid buttons don't seem relevant to the topic of this change, so I removed them. If we want to make a change to those buttons, we should open a specific issue to deal with that. Tests are passing.

The path to the icons was using a non-existant variable for the site URL, so I removed that as I don't think it's needed, since the icons are on the same server as the page.

That brings back the blue security icon, but not the green wrench, as it's not currently in the images folder.

It's presumably not showing on the module cards, so a decision is needed on whether it should be there. If it's not on the cards, there's no need for it on the key.

Still to do: tidy up the formatting, move the CSS out of the Svelte styling.

lostcarpark → changed the visibility of the branch 3282163-improve-iconography-usability to hidden.

At present the "maintained" icon is not in the repository, but there is an issue open to restore it, 📌 Replace Wrench icon on project views with Gear icon Postponed .

This issue is dependent on that one.

I've unblocked the issue now that the green icon is back. I can see it now when I fire up this MR branch. Still obviously needs some work, though.

I would like to see the legend take up as little vertical space as possible, since the projects themselves are already "below the fold" at times. I wonder if putting the legend underneath the select boxes would be better? So underneath the dropdown for the security coverage we do (kind of like #description would be in the usual Drupal Form API):

[✅] = Covered by the Drupal Security Team

Maybe like this:

I agree with @chrisfromredfin the currently vertically stacked legend takes way too much space. about the idea in #28 ✨ Improve iconography usability by adding a legend Needs work , moving them underneath the select list fields might be an improvement, at least they are taking up only one single row instead of four like in the current state of the MR. but i wonder if it would be possible to somehow integrate them more directly with the select list field or its label so no additional line would be necessary?

one detail about the icons on the module cards (probably out of the scope for this issue), but at the moment all those icons are active buttons (at least they are labeled like that). in addition to that they are redundantly labeled in lack of a context. you only have many "security note button" and "well maintained button" announcements. in regards of the button, to signify that they are not usable in the aural interface the aria-disabled attribute might be added. and a context aka module could be added to each particular icon string.

I've tweaked the layout to put the legend between the number of results and the grid/list buttons:

On mobile devices, it puts each item on its own line:

However, on small tablets, I think it needs some work:

I'll work on it some more, but feedback on work so far would be appreciated.

I did some minor tweaking of the legend, wrapping them in a <div> to group them together.

In desktop view, this groups them together cetnrally, which I think looks better:

In tablet view, the module total is on one line, and the legend on the next:

Finally in mobile view, the the number of modules, and both legend items are each on separate lines:

I think this is ready for review now.

Oops, messed up a screenshot in the above.

I just added a little spacing between the results and the icons when stacked. They looked a little squished.

I have tested that spacing change in v11.0.1 by bhogue and it is good to go. The change added some needed spacing between the # of results text and the legend icons. I did notice that when stacked vertically, the green icon is not aligned properly. I will add a fix for this soon so the icons are aligned.

hm i am still in doubt about this change. visually it looks ok with the recent changes on the MR. but my problem is the spatial separation. within the filter field set you have the select list fields where you are able to set those two filter criterias in question. the labels used in the filter filed set differ from the wording on the legend (for example "security advisory coverage" against "covered by the drupal security team"). and then you have those icons on the module cards without a label. visually the user has to jump inbetween those three positions the first few times. and in the long run that legend becomes obsolete for people familiar with the information the two icons convey. and the browse page is already packed with information.

Updating svg legend icons viewBox values to align images when stacked vertically.

I've reviewed #37 and the alignment of the legends and placement of the icons looks right to me desktop/tablet/mobile views.

Moving to RTBC

A couple of minor issues with the class names and CSS var usage. Otherwise good to go!

hm not sure if this issue is ready for rtbc. i read through the entire issue. the feedback from #6 ✨ Improve iconography usability by adding a legend Needs work in regards of the microcopy for the label by drumm wasnt really addressed , actively maintained is still sort of being used. #29 ✨ Improve iconography usability by adding a legend Needs work i cant recheck right now cuz i am unable to see any search results, but since this issue adds the second icon on the card if it applies i meanwhile think it is not out of the scope for this issue. and #36 ✨ Improve iconography usability by adding a legend Needs work isnt answered yet either about the general question of proximity. and now looking at it i wonder if the labels for those legends should be also hidden from screenreader users? they have the those legends on every card it applies to. in the context of the legend it provides no help in particular because the icons are tagged as decorational?

Next step on this is to please read through all of Ralf's commentary in #41, identify remaining tasks, and put them IN THE ISSUE SUMMARY please!

Tried updating the IS as per #41. Does it make sense to show these icons on source plugins other than contributed projects, such as recipes or core modules?