The tag cloud should output a list

[afercia]

Following the improvements proposed for the tag cloud for themes, see #35566, #40138, and #40184.

Ideally, the tag cloud should be marked up as a list (<ul>) also in the few places where it's used in core. Apart from better semantics, an unordered list would also allow screen reader users to know in advance how many tags are within the list.

The wp_generate_tag_cloud() already has a format argument that can be set to list, this change would require just a few, simple, CSS adjustments.

Places where to look: the editor screen Tags meta box, and Press This.

About the tag cloud used in the Add Plugins > Featured screen, see #40186

Ticket submitted at WordCamp London 2017 :)

[xkon]

Sorry for bumping in, but I've got a bit confused as I saw multiple tickets talking about the tag clouds and I got a bit lost.

To clarify we are talking about an output like this here if I'm not mistaken?

If that's the case I could fix a patch for TwentySeventeen to handle that ( as you can see I've already done it but I can refine it a little bit ).

My question would be this though, what if the tags are kind of many.. The current stacked list supports more tags in less space. A <ul> would require more 'space' in a page and sometimes it will either make it hard to scroll down to find another widget or just for the purpose of having a beautiful site.

Best regards,
Konstantinos

PS. Sorry if I went out of topic somewhere but I'm totally lost on what is to be done with tag clouds :) .

[afercia]

@xkon the proposal is to change just the markup, without any visual change. That is, change the output in order to produce a list and style it to match the current visual. Also, this ticket is about the tag cloud use din the core admin screens. The other tickets are about Themes.

[xkon]

Thank you for clarifying @afercia . Now I have a clear view of what is wanted.

Best regards,
Konstantinos

[audrasjb]

Hello,

I wordked on a fix for this ticket.
Here is a short summary of the changes:

• wp-admin/includes/class-wp-press-this.php & wp-admin/includes/meta-boxes.php

Replace div with unordered list, keeping the same classname.

• wp-admin/js/tags-box.js

Replace span element with list-item element.
Replace "span" variable name with "item" for consistency, in both code and inline documentation

• wp-admin/css/edit.css & wp-admin/css/press-this.css

Add some styles to prevent default css rules for list-items to be applicated
Add some display: inline-block stuff for list items
Replace span with li in both desktop and media-queries CSS's

All is tested in both edit-post' tag metabox and Press this. Seems to be ok.

That was very interesting to work on both PHP, CSS and JS :)
I hope that all is ok with my diff file and that I forgot nothing.

Let me know if anything is wrong, I'll be happy to do better the next time. This is my very first steps on Trac so dont hesitate to tell me if I doing some mistakes in Trac use :)

Best regards,
Jb

[audrasjb]

Tag cloud list output, #40187

[SergeyBiryukov]

@audrasjb Thanks for the patch! Sorry it took a few weeks to get back to you.

40187.diff​ replaces the .tagchecklist div for adding tags to a post with a list, but that's not what this ticket is about.

As far as I can tell, the ticket is about the tag cloud that appears when clicking the Choose from the most used tags link in the same meta box. With the patch, the tag cloud still outputs standalone <a> tags instead of a list.

[audrasjb]

@SergeyBiryukov okay, i'm working on another patch but I think parts of 40187.diff can be easily reused on most used tags as well. Let's try.

[audrasjb]

Hi,

@SergeyBiryukov @afercia Here is a new patch including list output for the most used tags as well.

Short summary of the diff file:

/wp-admin/includes/ajax-actions.php
Output unordered list markup.

/wp-admin/js/tags-box.js
Replace p tag with div tag.

/wp-admin/css/edit.css & /wp-admin/css/press-this.css
Small fixes concerning list-item css styles.

I hope this will be ok now :)

Best regards,
Jb

[audrasjb]

40187-2 : most used tags

[SergeyBiryukov]

40187.2.diff​ does the job, though I'm not sure the .tagchecklist div should be a list, as the ticket was only about the tag cloud.

@afercia Is there any benefit in making .tagchecklist a list as well, or should we leave it as is and only modify the tag cloud here?

[afercia]

While not strictly related to this ticket, I'd say making tagchecklist a list it a nice addition :) The benefit is that a proper semantics gets used by software to announce what actually is a list of selected tags as a list, including the number of items in the list.

Worth noting Safari 10 has a bug: when lists are styled removing the "bullets", it doesn't expose the list as a list to assistive technologies. That's the reason why sometimes we're adding role="list" to a <ul>: it's redundant (and the HTML validator will throw a warning) but makes Safari happy and should be done here as well.

Some screenshots when arrowing through content with Safari and VoiceOver:

The patch looks good to me at a first glance, just a couple things:

• as far as I know, display: inline-block; on a floated element doesn't do anything
• coding standards: please check spaces within parenthesis, e.g. ('filter' => 0, 'format' => 'list') and $('<li />').text( val )

[SergeyBiryukov]

Replying to afercia:

I'd say making tagchecklist a list it a nice addition :) The benefit is that a proper semantics gets used by software to announce what actually is a list of selected tags as a list, including the number of items in the list.

Thanks, that's what I thought, just wanted to confirm :)

• as far as I know, display: inline-block; on a floated element doesn't do anything

In my testing, it aligns the list items horizontally instead of vertically.

[afercia]

In my testing, it aligns the list items horizontally instead of vertically.

I meant:

+.tagchecklist > li {
+	display: inline-block;
 	float: left;

[SergeyBiryukov]

In 41563:

Taxonomy: Convert tag cloud in Tags meta box to a list (<ul>) for better semantics and accessibility.

An unordered list allows screen reader users to know in advance how many tags are within the list.

Props audrasjb, afercia.
Fixes #40187.