[wp-trac] [WordPress Trac] #42390: TinyMCE + Edge input:focus placeholders disappear

[WordPress Trac]

#42390: TinyMCE + Edge input:focus placeholders disappear
------------------------------+--------------------------------------------
 Reporter:  Cybr              |       Owner:  anevins
     Type:  defect (bug)      |      Status:  assigned
 Priority:  normal            |   Milestone:  5.2
Component:  Administration    |     Version:  4.9
 Severity:  normal            |  Resolution:
 Keywords:  has-patch ui-     |     Focuses:  ui, accessibility, javascript
  feedback                    |
------------------------------+--------------------------------------------
Changes (by afercia):

 * keywords:  has-patch needs-refresh => has-patch ui-feedback


Comment:

 > turns out that quite a few plugins have adopted the *-prompt-text
 approach from core, and rely on the JavaScript for this.

 - considering the above
 - considering the new block editor (Gutenberg) doesn't use this technique
 - considering that [https://codepen.io/afercia/full/oVGXrW in my testing]
 there are still different behaviors across browsers and screen readers
 with regards to the placeholder attribute

 I'd propose to not use a placeholder attribute and keep the prompt text in
 the Classic Editor post title for backwards compatibility. In
 [attachment:"42390.diff"] I've changed and simplified the JavaScript part
 to make the text behave like a real placeholder:
 - focus on the title field: the text is still visible
 - type something: the text disappears
 - clear the field: the text appears again

 Instead, for the Quick Press widget in the Dashboard, I'd propose to make
 the labels visible. I think this is a good balance between keeping a
 friendly language ("What’s on your mind?") and the need to properly label
 these fields.
 - makes the `<label>`s visible
 - removes all the JavaScript
 - the `enter_title_here` filter still works on the title label
 - cleans- up the related CSS

 **Post title:**
 no visible changes, other than the different behavior of the text
 visibility

 **Quick Draft:**
 see screenshot below:

 [[Image(http://cldup.com/8WBB5sEgXR.png)]]

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/42390#comment:27>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform