WordPress.org

Make WordPress Core

#21347 closed defect (bug) (fixed)

There is no way to tab out of the plugins and themes editors textareas

Reported by: azaozz Owned by: azaozz
Milestone: 3.5 Priority: normal
Severity: normal Version:
Component: Accessibility Keywords:
Focuses: Cc:

Description

Currently we are inserting tab characters on pressing the Tab key in both file editors, even if Shift is pressed too. That breaks tabbing on these screens and leaves users stuck in the textarea.

Attachments (2)

21347.patch (4.1 KB) - added by azaozz 21 months ago.
screenshot.png (34.5 KB) - added by azaozz 21 months ago.

Download all attachments as: .zip

Change History (15)

azaozz21 months ago

comment:1 azaozz21 months ago

21347.patch adds checking of modifier keys when inserting a tab char in the file editors textareas, so Shift + Tab will work as expected. It also adds a key combination to be able to tab past the textarea: first press Esc, then press Tab. This behavior is described by aria-describedby elements for the textareas.

Last edited 21 months ago by azaozz (previous) (diff)

comment:2 follow-up: grahamarmfield21 months ago

If the action required to tab beyond the textarea is not a tab button then clear and visible text instructions should be included above the relevant fields.

comment:3 in reply to: ↑ 2 azaozz21 months ago

Replying to grahamarmfield:

It is still a tab keystroke, but to make it go beyond the textarea instead of typing a tab char, you need to press Esc first. That is described in the extended description of the textarea (added with aria-describedby attribute). Will commit the patch so it would be easier to test.

comment:4 azaozz21 months ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In [21310]:

Make it possible to tab out of the plugin and theme editors textareas by pressing Esc followed by Tab, fixes #21347

comment:5 follow-up: azaozz21 months ago

Closed as fixed for now. If this behavior is not acceptable, feel free to reopen with other options.

comment:6 in reply to: ↑ 5 grahamarmfield21 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Replying to azaozz:

Closed as fixed for now. If this behavior is not acceptable, feel free to reopen with other options.

Standard behaviour for a textarea when tab key is pressed is to move to the next item that can receive focus. I'm a little nervous about that behaviour being overridden. How about swapping the solution round to:

  • Tab key pressed - moves out of textarea
  • Esc + Tab - inserts a tab character

Also, using aria-describedby attribute is good for screen reader users, but where non-standard behaviour is present it's important that clear and visible instructions are provided for those who may be using a keyboard but not alongside a screen reader - eg some motor-impaired sighted people.

comment:7 follow-up: dd3221 months ago

Standard behaviour for a textarea when tab key is pressed is to move to the next item that can receive focus.

Standard behaviour for a "Code Editor" (Which the text area is in this case) is to insert a tab character for indention purposes, Shift+Tab would be to un-indent, so to remove the tab before the current position.

The Plugin/Theme editors being Code Editors rather than standard form elements makes me comfortable that the Esc key being added as an escape.. but that's just a Developers opinion, those that would be using the textarea, for the tab key to do anything other than inserting a tab makes muscle memory useless

comment:8 in reply to: ↑ 7 grahamarmfield21 months ago

Replying to dd32:

Fair comment dd32.

It would still be useful to have some visual indication that Esc+Tab is required to move out of the code editor.

comment:9 dd3221 months ago

It would still be useful to have some visual indication that Esc+Tab is required to move out of the code editor.

I don't disagree there, It's not going to be obvious when pressing Esc that anything has changed

azaozz21 months ago

comment:10 azaozz21 months ago

Sounds good. What would be the better place for this: in the Help tab or directly above the textarea?


comment:11 nacin21 months ago

I would rather put this in help, at most. This kind of instruction has very little benefit taking up space on the page.

comment:12 azaozz21 months ago

Yes, think the best place for this is in the Help tab too. Wanted to confirm before moving it.

comment:13 azaozz21 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In [21358]:

Move the description for tabbing out of the plugin and theme editors textareas to the Help tab, fixes #21347

Note: See TracTickets for help on using tickets.