Usability Error - Links

[sschmitz1414]

(I am doing this for a College Assignment)

The "Also in" section in the list of Methods in the API Documentation as seen below can be a usability error. It is not clear that they are links due to being grey and not blue, they have no underline even when you hover on them, and it isn't clear where one link ends and another begins (for example Manipulate and Class Attribute are separate links even though the share the same "button" or border.

[mgol]

Thanks for the report. Would you like to propose fixes for those styles?

[sschmitz1414]

For my college assignment I had to read about functional bugs vs usability bugs and then make my own bug report. This case is just a simple usability bug and my course would most likely state that the "Also in:" section just needs to be a little more clear that it is clickable. My ideas would be to make the words blue (as that is the "standard" for links), make them underlined or changed when hovered, and/or make each individual link have it's own box/border so users know that links such as "Manipulation" and "Class Attribute" are separate links and not multiple (this could also be done by having an underline appear under the specific link you hover over).

I don't necessarily feel qualified for these suggestions to actually be implemented and my goal was to just try a "bug report" that my assignment required. I couldn't really find any so I found just a small confusing example to use. Do not feel the need to take my bug report or suggestions into serious considerations considering you are most likely more qualified and experienced than I am.

[aldimar-junior]

Hi @mgol I took a look at the issue above and found out that the CSS applied is comming from /wp-content/themes/jquery/css/base.css since the CSS files used by jQuery on WordPress aren't available publicly (at least I couldn't find them) I can't make a PR with a possible fix, but by changing the following lines:

From:

// base.css

.listing #content .entry-meta .category a {
	color: #888;
	text-decoration: none;
}

To:

// base.css

.listing #content .entry-meta .category a {
	color: #0769ad;
}

It is possible to achieve the following look:

[mgol]

@aldimar-junior Hey! The code is public, it's just in a shared repository for all the content sites: https://github.com/jquery/jquery-wp-content. The themes for various sites are in the themes directory. Each API site has its own subfolder, but base styles are in the jquery one: https://github.com/jquery/jquery-wp-content/blob/main/themes/jquery/css/base.css.

Making links blue is a good idea, but the "Also in:" text should also be a bit darker IMO.

[aldimar-junior]

Done @mgol PR Nº 480 opened at jquery-wp-content

Preview of the changes: