WordPress.org

Make WordPress Core

Opened 7 months ago

Closed 5 weeks ago

Last modified 4 weeks ago

#40187 closed enhancement (fixed)

The tag cloud should output a list

Reported by: afercia Owned by: davidakennedy
Milestone: 4.9 Priority: normal
Severity: normal Version:
Component: Taxonomy Keywords: tag-cloud has-patch
Focuses: ui, accessibility, administration Cc:

Description

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 :)

Attachments (2)

40187.diff (3.9 KB) - added by audrasjb 2 months ago.
Tag cloud list output, #40187
40187.2.diff (5.2 KB) - added by audrasjb 5 weeks ago.
40187-2 : most used tags

Download all attachments as: .zip

Change History (28)

#1 @SergeyBiryukov
7 months ago

  • Component changed from Administration to Taxonomy
  • Focuses administration added

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


7 months ago

#3 @afercia
7 months ago

  • Keywords tag-cloud added
  • Milestone changed from Awaiting Review to 4.8

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


6 months ago

#5 @jbpaul17
5 months ago

  • Keywords needs-patch added

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


5 months ago

#7 @afercia
5 months ago

  • Milestone changed from 4.8 to 4.8.1

This ticket was mentioned in Slack in #accessibility by adamsoucie. View the logs.


5 months ago

#9 @afercia
4 months ago

  • Milestone changed from 4.8.1 to 4.9

#10 @xkon
4 months ago

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?

https://dev.xkon.gr/forum_stuff/tagcloud.png

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 :) .

#11 @afercia
4 months ago

@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.

#12 @xkon
4 months ago

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

Best regards,
Konstantinos

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 months ago

#14 @afercia
3 months ago

  • Owner set to davidakennedy
  • Status changed from new to assigned

#15 @audrasjb
2 months ago

  • Keywords has-patch added; needs-patch removed

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
2 months ago

Tag cloud list output, #40187

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


2 months ago

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


7 weeks ago

#18 @SergeyBiryukov
6 weeks ago

@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.

#19 @audrasjb
6 weeks ago

@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.

#20 @audrasjb
5 weeks ago

Hi,

@SergeyBiryukov @afercia @davidakennedy 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

Last edited 5 weeks ago by audrasjb (previous) (diff)

@audrasjb
5 weeks ago

40187-2 : most used tags

#21 @SergeyBiryukov
5 weeks ago

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?

#22 follow-up: @afercia
5 weeks ago

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:

https://cldup.com/B-VW8YJ_zM.png

https://cldup.com/jXM5fVkuOe.png

https://cldup.com/hSwPGO0zEs.png

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 )

#23 in reply to: ↑ 22 @SergeyBiryukov
5 weeks ago

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.

#24 @afercia
5 weeks ago

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

I meant:

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

#25 @SergeyBiryukov
5 weeks ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


4 weeks ago

Note: See TracTickets for help on using tickets.