Page MenuHomePhabricator

Allow saving edits through keyboard navigation when CodeEditor is active
Open, MediumPublic

Description

For years, I've used the tab key on my keyboard to switch between the textarea and the edit summary input on MediaWiki wikis. Then I usually press the tab key a few more times to select the "save page" or "show preview" buttons.

When CodeEditor is active, the tab key is hijacked, inserting four spaces into the textarea when the tab key is pressed. This is a legitimate hijacking, I think, but it disrupts the (somewhat expected) tab key behavior in a slightly infuriating way.

There's no way to escape the textarea short of using the mouse. This sucks.

I'm not sure how to best handle this. Maybe a double-tap of the tab key could be used? Maybe the escape key could be used? Shift-tab (which may already be taken)?

Outcome criteria

On a page where CodeEditor is active and thus tab produces indentation instead of navigating between form elements, there should be at least one discoverable keyboard-assisted way of moving the focus from the textarea to the edit summary and HTML form buttons.

Details

Reference
bz39649

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 1:09 AM
bzimport added a project: CodeEditor.
bzimport set Reference to bz39649.
bzimport added a subscriber: Unknown Object (MLST).

The tricky thing here of course is that the tab key is expected to do something specific in a code editor, which is to indent (either with literal tabs or spaces).

Double-tap of tab would not work well, as that would behave unexpectedly when hitting tab twice to indent text two levels.

Shift-tab is taken for de-indent, as expected in most code editors.

Unfortunately I'm not sure what a good solution for this is other than "use the mouse" or "use another key combination to jump to another part of the page". :(

(In reply to comment #1)

Unfortunately I'm not sure what a good solution for this is other than "use the
mouse" or "use another key combination to jump to another part of the page". :(

Yeah, it's a nasty usability problem.

Some part of me thinks the escape key isn't too crazy for this. Escaping the textarea --> press the escape key. In this scenario, hitting the escape key would jump the (cursor) focus to the edit summary input field and then from there you can tab to the other page elements such as "save page". Though this would open the door to people requesting that the same functionality exist without CodeEditor and/or questioning why the escape key doesn't attempt to (more obviously) escape/cancel the edit instead.

I like it (esc) -- at least to take the focus out of the textarea so it can be used elsewhere. Strikes me as a nice idea. :)

(In reply to comment #3)

I like it (esc) -- at least to take the focus out of the textarea so it can be
used elsewhere. Strikes me as a nice idea. :)

My only qualm is discoverability: will it be obvious to anyone that this is the workaround? On the other hand, CodeEditor is mostly aimed at nerds, so I'm not sure how discoverable a trick this needs to be.

Copying Brandon, Trevor, Roan, Ryan, and Krinkle on the bug, in case they have any insights into this. I considered a wikitech-l thread, but I'm not sure the world needs another wikitech-l thread from me this month.

I believe in the scope of a code editor (not on the web in general) it is more likely that the user is looking (and expecting) to indent code with Tab, than to transfer the browser focus to the focusable element.

Given that CodeEditor context, I think Esc is just fine without additional discoverability requirements.

I mean, it is more important that we can use tab to indent then to use tab to transfer focus. Having to use Esc is not ideal, but I think it's worth the trade of given these choices (if anyone has another idea, that's always welcome of course).

All right. Well, having the escape key change focus to the edit summary input should be like three lines of code, so I'll mark this as easy.

-easy: the summary doesn't even say what to do exactly.

(In reply to comment #7)

-easy: the summary doesn't even say what to do exactly.

Read comment 6.

Krinkle renamed this task from CodeEditor extension's tab key behavior is slightly infuriating to Allow saving edits through keyboard navigation when CodeEditor is active.Apr 5 2022, 11:14 PM
Krinkle added a project: patch-welcome.
Krinkle updated the task description. (Show Details)
Krinkle removed a subscriber: wikibugs-l-list.