Add missing label and focus style to the code editor textarea

[afercia]

This PR adds a <label> element to the "Code editor" mode textarea using the same pattern used for the post title. Worth noting this pattern matches the visible placeholder text with the visually hidden label to ensure it works for all users and all assistive technology but it's basically a hack and should be avoided as much as possible. Visible labels are always preferable (and a WCAG requirement) for the reasons explained in #6199 and #6206 (comment)

Also adds a filter, in the same way a filter is used for the post title.

Adds a focus (and hover) style to the content textarea to match the same effects used on the post title (see the code editor polish and focus style #1837 / #4803). The outline-offset property won't work in IE11 that just means on hover and focus the outline will appear externally to the box. I guess we can live with that.

It also adds a small bottom margin to the content textarea, because currently, with long content, the textarea touches the viewport bottom edge. I guess avoiding that is a better option.

To test:

• create a new post
• using a screen reader, focus the content and verify the label is announced correctly
• verify the CSS effects on hover and focus
• try to use the filter to change the label and placeholder

Fixes #6260

Screenshots (normal and hover/focus):

[jasmussen]

Seems to work as advertised, and looks good to me, 👍 👍

Is "Add content" the best we can do? It works for me, and I'm aware that "Write your story" isn't setting hearts on fire. But do we want to consider those two phrases in the same light, or should they be different?

[afercia]

Is "Add content" the best we can do?

Open to any suggestions, just let me know.

[karmatosed]

Text wise lets not have 'add content' as an instruction, we need to be a lot more guiding than that. I think what we had before worked far better for that reason. Is there a need to change the copy? If so, what are the parameters for that change?

[karmatosed]

Changes outlined above, lets fix before we merge this.

[afercia]

what we had before worked far better for that reason. Is there a need to change the copy

@karmatosed there was no copy before. Right now the textarea has no label an no placeholder.

[karmatosed]

@afercia ah sorry I got myself all confused, apologies. Can't we just have "Write your story, edit text?" for cohesiveness first?

[afercia]

Sure, going to change it in Write your story for consistency. Not so great for Custom Post Types (e.g products, testimonials, etc.) but it can be filtered and changed by plugins so 👍

[jasmussen]

Cool — I do think we have a separate ticket to revisit the phrasing "Write your story", but do feel like it would be good to have consistency here. Then we can replace both if/when we decide new phrasing.

[afercia]

Done:

New post in the visual editor:

New post in the code editor:

Feedback addressed