Figure out proper way to handle radio groups with a custom text element

[felixarntz]

As previously discussed in #38, we need to figure out a good way to handle radio groups with a custom text element.

There are currently three cases in core settings:

• General > Date Format
• General > Time Format
• Permalinks > Permalink Structure

What makes this even more complex is that all three fields contain an additional component: some kind of example (date format / time format / URL structure respectively). In the case of the Permalink Structure field, the example is even combined with the text field.

Let's think about how we can create clean markup for these fields which is accessible and at the same time visually clear.

[hedgefield]

I'm not that familiar with how wordpress works code-wise, but one thing I noticed is that the custom input field is technically using two radio buttons, one for the explanation and one for the input. Could this be simplified to something like?:

<span class="radio-item">
<input type="radio" id="date_format_custom_radio" name="date_format" class="settings-field-control" value="\c\u\s\t\o\m">
<label for="date_format_custom_radio">Custom: enter a custom date format in the field below</label> 
<br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" id="date_format_custom" name="date_format_custom" class="small-text" value="F j, Y" aria-describedby="date_format_custom_radio-custom-description" style="background-repeat: repeat; background-image: none; background-position: 0% 0%; cursor: auto;">
<span class="description" id="date_format_custom_radio-custom-description">Will show as: <span class="example">16/06/2017</span>
</span>
</span>

Which produces:

(I used   as a quick hack to align the input field, but you get the idea.)

Visually and using a screenreader this seems to function the same as before. It's not a huge improvement, but it does get rid of some of the double explanation.