Custom fields auto-focus

[jane]

When you are on the post editor (page editor, whatever), if you want to create a new custom field and click on Create New, it should auto-focus on the text input field that appears.

[batmoo]

Moved inline javascript to post.dev.js and set the field to auto-focus.

Should the input be reverted back to the select once a new custom field is added? It just seems weird (possibly confusing) because of the "cancel" link.

[karmatosed]

I agree that the input should revert once custom field is added, without cancel link. If this is still an issue it will need a patch check due to age.

I am tackling this during weekly ux-feedback triage.

[sabernhardt]

Changing the focus behavior might help, yet I'm more concerned about the lack of a label on the meta key input field. So even if you think to use Shift + Tab to go back to the meta key input, a screen reader cannot say what you are editing.

[franrosa]

Maybe I am missing something here, but would not adding a text input on the list of options to either search existing fields or writing the name of a new one to add eliminate the need to have that dual UI with that confusing New/Cancel pattern?

It would be similar to the existing UI for links, with the added option to 'Create new' when no result is found. (Quick mockup for clarity: ​https://drive.google.com/file/d/1VvPlU_j5aXDTN445CkeMmGNpBk2dVko8/view?usp=sharing)

[sabernhardt]

datalist concept

[sabernhardt]

updating focus and labels in current interface

[sabernhardt]

This is a feature of the classic editor that the block editor adopted. There was some ​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 ​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)

[ryokuhi]

We reviewed this ticket today during the Accessibility Team's bug scrub.
The ticket needs testing to check if patch 15631.2.diff still applies clearly or if a refresh is needed.

[annashopina]

Test Report
This report validates that the issue is still reproduced.
Patch tested: https://core.trac.wordpress.org/ticket/15631
Environment
OS: macOS 13.1
Web Server: Nginx
PHP: 8.0
WordPress: 6.3
Browser: Chrome 111.0.5563.146
Active Plugins:
Classic Editor
Actual Results
The issue was not resolved with a patch.
Additional Notes
Steps to reproduce:
Install and activate Classic Editor
Open any post/page
Open 'Screen options
Enable 'Custom fields'
Add custom field
Observe where is the focus
Add Inline:
Actual result: It's not auto-focused on the text input field that appears.

Expected result: It should auto-focus on the text input field that appears.

[joedolson]

Note: the test by @annashopina looks like it was testing whether focus was moved when using the 'Add Custom Field' button, but this ticket is about moving focus to the text field when 'Enter New' is chosen to define a new custom field name. So that test isn't valid.

I just tested, and the patch tests fine. I'm uploading two patches; 15631.3.diff is a refresh of the previous patch, 15631.4.diff changes the 'Enter new' button to use the button-small appearance (matching the delete/update buttons on existing fields & avoiding the semantic confusion of something that is a button but looks like a link) and moves the 'Add Custom Field' button out of the table, because the semantics don't make sense.

[joedolson]

Refreshed patch

[joedolson]

Use button appearance & move add custom field out of table