Pre-publish panel panels lack spaces between titles and labels

[sarahmonster]

Issue Overview

There isn't any space between the titles and the labels of panels inside the pre-publish panel:

Steps to Reproduce (for bugs)

1. Create a new post using Gutenberg.
2. Press the "Publish" button.
3. Notice lack of spaces!

Looks as though the translation strings here are written with the intention of there being a single space here (<PanelBody title={ [__( 'Visibility: ' )] }>), but that trailing space is removed when the text string is run through the translation function. Text strings aren't supposed to use trailing whitespace, so a little bit of CSS padding is probably a better solution here.

Sort of related (if pretty tangentially): #7426

[danielbachhuber]

👍 I've been noticing this too but never got around to create a ticket for it.

[chrisvanpatten]

Only concern I have about CSS padding is what happens if you select and copy/paste that text — presumably there's no space being copied? Also, what's the impact on screen readers if the space isn't in the markup?

[tofumatt]

Sounds like, from the issue description, we trim whitespace in the strings so it doesn't matter, but that isn't true. In master, I see:

(Note the space after "Visibility".)

In this case the whitespace is part of the translation and should stay, but we should also have some padding.

[sarahmonster]

These are clickable titles that open up panels, so I'm not sure there'd be a way of copying and pasting the text. (This is me trying!)

The screenreader issue is a valid concern, although I wasn't able to find solid documentation one way or another to indicate how a screenreader would handle a case like this. Would the colon and the span be enough to force a space in the way it's read?

I could leave the whitespace in the title, but that doesn't seem to be best practise. From the i18n documentation:

Do not leave leading or trailing whitespace in a translatable phrase.

I suspect this is because GlotPress may not display leading/trailing whitespace in an obvious way, which means the string would be likely to be translated without the trailing whitespace—which means we'd have the same issue with other languages.