Change to how lists of tags are separated

Dev
1

Lists of tags on topics in Discourse are separated by commas by default. This isn’t changing, but how it’s implemented and how you can change it has:

The image offers a text input prompt asking for a favorite TV show scene, accompanied by placeholder tags and a mention of "0 votes." (Captioned by AI)
The image offers a text input prompt asking for a favorite TV show scene, accompanied by placeholder tags and a mention of "0 votes." (Captioned by AI)850×130 7.41 KB

Previously we used a CSS pseudo element to add the commas, which isn’t ideal because the content isn’t technically available as part of the document — screenreaders can’t access it, they’re not selectable, web crawlers can’t see them…

This change merged today moves the tag separators to proper HTML: FEATURE: customizable tag separator with value transformer in proper HTML by awesomerobot · Pull Request #31674 · discourse/discourse · GitHub

For most sites this won’t change anything obvious, but if you previously removed or changed the tag separator you’ll have to use a value transformer instead of CSS.

This is a fairly straightforward process with JS, for example if you want to remove the comma entirely:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.registerValueTransformer("tag-separator", () => "");
});

image
image710×134 6.89 KB

or if you want to use a pipe separator

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.registerValueTransformer("tag-separator", () => "|");
});

coupled with a little CSS:

.discourse-tags__tag-separator {
  margin-inline: 0.25em;
}

The image displays a question "Most inspirational movie you have ever seen?" with tags such as gaming, dev, blog, job-application, and feature beneath it in a minimalist design. (Captioned by AI)
The image displays a question "Most inspirational movie you have ever seen?" with tags such as gaming, dev, blog, job-application, and feature beneath it in a minimalist design. (Captioned by AI)886×126 7.86 KB

Let us know if you encounter any issues with this change!

8 Likes
2

We are seeing duplicate commas:

Probably one comes from the new HTML code and the other comes from the custom theme CSS (old code).

The former (HTML) is indeed selectable, while the latter (CSS) is not.

Following this change, all custom themes should be fixed, apparently?

2 Likes
3

From what I see on your forum, it’s related to Multilingual Plugin 🌐 .

It still uses the old way with CSS pseudo elements.
This CSS could be removed.

2 Likes
4

Wow! Thanks for your quick diagnosis!

1 Like
5

Hi Arkshine,

I wanted to try and installed the Multilingual plugin and when I tried it the double commas came up. When I try to deactivate the plugin my language becomes English (and hence the double commas dissapear). When I activate it again it becomes my language again.

Do you think I should remove the plugin if I don’t really need it for now, and if so why is the language now in English? The ‘default locale’ is blank when deactivating the multilingual plugin.

If the plugin does not effect the website in any way maybe I can keep it and try to remove the double commas.

Best regards
Olle

Edit: I fixed it by removing the plugin