Remove the first letter modifier from the tag component

[owenatgov]

What

Removes the first-letter modifier from the tag component, added in the redesign in #3502, and updates the changelog to recommend teams check their content and ensure the first word of their tags are capitalised.

Why

In the tag redesign we added the first-letter selector as a way to get around the risk of teams having tags in older services that secretly have all lowercase content, hidden by the previous tag's text-transform: uppercase. We encountered a bug in firefox when testing this however where the width of the tag was incorrectly extended as if the contents of the entire tag had text-transform: uppercase applied instead of only the first letter. We changed this to text-transform: capitalize to get around this.

Since then, we've encountered further issues in our implementation:

• the firefox bug is still present. If a tag contains several words, the same incorrect width starts to become visible as the size of the "fake" capital letters impact's firefox's width calculation
• there is a kerning issue in firefox and safari when using the first-letter selector where the browsers will treat it as a separate inline element, most easily noticeable in the Turquoise tag example

After an internal discussion, we think that now the clever workaround has become too risky to use over asking teams update their tag content and risking tag capitalisation being inconsistent across GOV.UK for a period.

[36degrees]

The change makes sense to me. I think we might want to look at the changelog entry to try and front-load the 'required action' a little more, but happy that we can do that as part of a wider review of the changelog as we get closer to shipping.

[frankieroberto]

👍 makes sense to me