[wp-trac] [WordPress Trac] #15631: Custom fields auto-focus

[WordPress Trac]

#15631: Custom fields auto-focus
---------------------------------------+--------------------------------
 Reporter:  jane                       |       Owner:  (none)
     Type:  enhancement                |      Status:  new
 Priority:  normal                     |   Milestone:  Future Release
Component:  Editor                     |     Version:  3.1
 Severity:  normal                     |  Resolution:
 Keywords:  has-patch has-ux-feedback  |     Focuses:  ui, accessibility
---------------------------------------+--------------------------------
Changes (by sabernhardt):

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


Comment:

 This is feature of the classic editor that the block editor adopted. There
 was some [https://github.com/WordPress/gutenberg/issues/3228 trouble
 creating a custom fields UI element] there in the months before WordPress
 5.0, which could be easier now. Discussion about an element like the block
 editor's link autocomplete would fit better in the Gutenberg repo.

 Yet your suggestion led me to think about the native
 [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
 datalist element]. Firefox still has a bug with the dropdown, but the
 element could be worth considering.

 15631-datalist.diff
 * Replaces `select` with a `datalist` of the same options
 * Uses the "Name" table header as the label for the input field
 * Removes the "Enter New"/"Cancel" toggle link
 * Would need CSS editing for the dropdown triangle position

 I also created 15631.2.diff to follow prior feedback:
 * Ensures that the "Name" table header as the label for the select element
 * Creates a "New custom field name" ARIA label for the input field
 * Converts the toggle link to a button
 * Moves focus to the input after clicking "Enter New", and to the select
 after "Cancel" or "Add Custom Field"
 * Keeps the JS inline (I would have added it to post.js, but the block
 editor apparently does not load it)

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