Improve accessibility of traffic lights: replacing 🟢🟠🔴 with JustTheDoc's labels.

[samcunliffe]

An attempt to solve

• Improving the traffic light system for colour blindness #526

by replacing the emoji (same shape different colours) with a JustTheDocs label UI component.
Unfortunately, the JTD-flavoured markdown syntax for this is

Good
{: .label .label-green}

... that is to say: it needs two lines. And obviously, this doesn't work inside markdown tables.

But once upon a time, I learned some HTML 🙃 so we can also access them as

<span class="foo"></span>

tags.

---

Now! This makes the markdown not look as beautiful/colourful/emojiful when viewed in GitHub...

(though arguably more readable... which is perhaps the accessibility point.)

---

Here's what it looks like on the built pages:

[Copilot]

Copilot reviewed 17 out of 17 changed files in this pull request and generated no comments.

Comments suppressed due to low confidence (1)

docs/pages/templates.md:41

• There is a typo in the description ('templae'). Please correct it to 'template'.

| [Copier](https://github.com/copier-org/copier)                | A tool to create project templates that are highly configurable. Project configuration can be kept in sync with the templae. | <span class="label label-yellow">Good</span> |

[samcunliffe]

Feels like it's a change warranting two reviewers.

[paddyroddy]

This looks like a really nice change 👌

[K-Meech]

This looks great - thanks @samcunliffe ! I just noticed a couple of places where the label had been changed - see below:

[samcunliffe]

This looks great - thanks @samcunliffe ! I just noticed a couple of places where the label had been changed - see below:

😱

I did a find-and-replace. How... 🫠 !?

[paddyroddy]

I did a find-and-replace. How... 🫠 !?

How did you perform this? I've never missed anything in an IDE, but have seen others miss them using grep etc.

[samcunliffe]

I did a find-and-replace. How... 🫠 !?

How did you perform this? I've never missed anything in an IDE, but have seen others miss them using grep etc.

No, it was the VSCode cmd+F. And it takes emoji as a searchable string. I think it must have been leftover from my experiments and I didn't git restore properly.

[K-Meech]

Thanks @samcunliffe - all looks good now!