Capture tab events in the Notes submission box on Code Reference pages

[DrewAPicture]

Currently, using the tab key will tab you out of the submission box for User Contributed Notes. It seems like this would be logical usability enhancement for a form where you're expected to submit code.

Can we capture tabs inside this textarea?

[coffee2code]

I have this working, but what keypress should we capture to insert the tab character? A plain tab, or something like shift+tab?

I worry if we simply do the plain tab that we cause issues with keyboard navigation. Granted, pretty much tab + any other key combo will override some sort of browser or OS behavior, but tabbing through a page seems the most common tab action (shift+tab to go in reverse probably being a distant second).

Then again, I don't think we can intercept any other key combination with the tab since the browser (in the case of ctrl when there are multiple tabs) or the OS will take precedence.

[DrewAPicture]

Replying to coffee2code:

I have this working, but what keypress should we capture to insert the tab character? A plain tab, or something like shift+tab?

@afercia might have a suggestion about a standardized way to enter/exit a textarea. In lieu of that, my vote would be on a standard tab within the textarea.

[afercia]

There was a similar issue in the admin Plugin and Theme editors that use the Tab key to insert a tab character. That made impossible for keyboard users to tab out from the textarea :) See ​https://core.trac.wordpress.org/ticket/31415 where the solution implemented was to use Escape and then Tab to exit the textarea. Escape seems the most intuitive key press users would try but worth considering changing native behaviours (the default tab press action) should be avoided.
On other applications I've seen a choice offered to users, for example a checkbox to change the behaviour of the Enter key (Submit or enter a new line). I'm not recommending that, just something worth considering.
The most important thing would be informing users about what the Tab key does and how they can move outside from the textarea. Some descriptive text before the textarea would probably be be a good idea.

Side note: using Escape, screen reader users would probably need to press Escape twice, the first time to exit "forms mode" (a screen reader thing) and the second time to make the Tab key able to exit the textarea.

[DrewAPicture]

Replying to afercia:

Side note: using Escape, screen reader users would probably need to press Escape twice, the first time to exit "forms mode" (a screen reader thing) and the second time to make the Tab key able to exit the textarea.

First: thanks for weighing in. Very helpful :-)

Second: Is there some kind of audible notification for "exiting forms mode" so that screen reader users know they'll need to "escape" twice?

[afercia]

Replying to DrewAPicture:

Second: Is there some kind of audible notification for "exiting forms mode" so that screen reader users know they'll need to "escape" twice?

:) NVDA and JAWS do play a sound (sort of beep) when they switch mode, and they will beep when pressing Escape in the textarea. Worth considering users can always manually switch mode. VoiceOver uses a different interaction model and it doesn't have a clear distinction between "browse mode" and "forms mode".
Testing the WordPress Plugin and Theme editors:

• NVDA and JAWS: pressing Escape twice and then Tab exits the textarea
• VoiceOver: pressing Escape just once and then Tab exits the textarea

[coffee2code]

In 3316:

developer.wordpress.org: In textarea for user notes, make the 'tab' key insert a tab.

Adapts JS code, behavior, and help string from core. It is still possible to navigate out of the field by first pressing escape (sometimes twice), then tab.

Also sets tab-size to match that used on display.

Props afercia for insight.
Fixes #626.

[coffee2code]

In 4340:

developer.wordpress.org: Add -moz-tab-size style rule to support Firefox.

Props afercia.
See #626.
See ​#core38667.