Change to how lists of tags are separated

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:

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", () => "");
});

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;
}

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

7 Likes