-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add missing label and focus style to the code editor textarea #6262
Conversation
Open to any suggestions, just let me know. |
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? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Changes outlined above, lets fix before we merge this.
@karmatosed there was no copy before. Right now the textarea has no label an no placeholder. |
@afercia ah sorry I got myself all confused, apologies. Can't we just have "Write your story, edit text?" for cohesiveness first? |
Sure, going to change it in |
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. |
…ess#6262) * Add label, placeholder, and filter to the content textarea. * Add focus style to the content textarea. * Use Write your story.
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:
Fixes #6260
Screenshots (normal and hover/focus):