[UX] Give focus to top field when creating content

[laryn]

I think it would be good to automatically give focus to the top field when creating content (nodes, terms, etc.).

I noticed it today when I had to input 10-20 terms in a vocabulary and had to click into title each time before I could type the term. If focus happened automatically it would be simple to type, press enter, pause and then repeat without having to take my hands off the keyboard.

---

PR: backdrop/backdrop#1826 closed in favor of no js solt'n
PR: backdrop/backdrop#1832

[serundeputy]

@laryn good idea!

There is quite a bit of opinion about this in the Drupal queues: https://www.drupal.org/node/1538022

Not the least of which is surrounding accessibility issues. For screen readers the autofocus will cause it to skip to that part of the markup missing content that is above the autofocused element (perhaps form instructions)

In any event you should be able to take this patch and adapt it to either form_alter in a custom module to help your forms or make into a contrib module.

Let's see what others have to say about the accessibility issues, other problems or suggestions.

~Geoff

[laryn]

That was quick!

Would it be better for accessibility if this were targeted just on the admin pages like the create node/term/layout pages, which don't really have any preamble? Site visitors wouldn't then automatically get the first field focused on front-facing site forms.

[klonos]

There's a contrib module in D7 for that already, that we could port if we decide not to include the feature in Backdrop core after all: https://www.drupal.org/project/focus

...and from that project's page, there was a link to this core issue: https://www.drupal.org/node/90324 that has been filed back 2006 and was eventually wontfixed. Turns out that this is a usability+ but an accessibility-. Seems we can't have both in this case 😞

[quicksketch]

Things may have changed a bit since both that project and issue were filed. In HTML5, there is now a simple attribute for autofocus, no JS needed.

Automatically making the first field autofocus in every form seems heavy handed. Especially as we can't even determine if the first field is really that important (e.g. on any settings form that may have lots of options). Imagine doing that on the admin/appearance form, where the first form element is the "Admin theme" select list, at the very bottom of the page! You'd skip all the important content and push the focus down to the bottom.

I think we could make a very tiny step in the right direction by using autofocus attribute only (no JS) and only on forms that we know are going to have the first field be critical. I'd say for starters we should do this only on the node form (when displayed as a stand-alone page) and possibly other types of entities, but keep it out of all config forms entirely.

At the very bottom of the Drupal issue, @Bojhan makes the exact same case (I found after I just typed this):

I think we can make assumptions for a large number of creation screens (terms, content, fields) but probably not any configuration screens. I am on the fence whether it is a good thing to pursue, primary because on the front-end we cant really assume (people customizing and using different parts of the form as - in contact form, starting with name for example) and basically requiring contrib to define which field receives autofocus (question there even if they do, will they do it consistently?).

[serundeputy]

Filed a new PR backdrop/backdrop#1832 to add the autofocus attribute to the title field on the node/add form.

@quicksketch back to NR.

[docwilmot]

@serundeputy as per the original issue, I agree the Add Term form needs this the most. Can we do it there too?
p.s. it works as advertised on the Add Content forms.

[serundeputy]

@docwilmot absolutely we can.
@quicksketch suggested just node form first.

I'd say for starters we should do this only on the node form (when displayed as a stand-alone page) and possibly other types of entities, but keep it out of all config forms entirely.

[docwilmot]

and possibly other types of entities

😏

[serundeputy]

I'll put it in for the add term forms too. Hopefully tomorrow.

[serundeputy]

Updated PR https://github.com/backdrop/backdrop/pull/1832/files to add autofocus to taxonomy term add title as well.

[docwilmot]

RTBC!

[serundeputy]

Thanks @laryn, @docwilmot and @quicksketch this is merged into 1.x and will ship with 1.7. 🎉