WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 5 years ago

#31415 closed defect (bug) (fixed)

Plugin and theme editor focus trap

Reported by: afercia Owned by: azaozz
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.1
Component: Plugins Keywords: has-patch commit
Focuses: accessibility, javascript Cc:

Description

Reported by Michelle DeYoung during last accessibility testers group testing session:

"I'm not sure what is causing the tab order to stop at the textarea element and not allow the user to tab to the next form element in IE and Chrome. I tried using 'ESC' then 'Tab' to see if that would allow me to exit the textarea, but that only worked in FF."

Reproduced in Chrome and IE 8:

  • go in plugin-editor.php
  • click or tab inside the textarea
  • type something
  • click or tab outside the textarea (press Escape and then Tab)
  • everything works OK

Refresh and repeat the previous steps and once inside the textarea:

  • insert a tab character (press Tab)
  • click or tab outside the textarea (press Escape and then Tab)
  • the textarea is permanently focused

Keyboard users will be trapped, there's no way to move outside of the textarea using only the keyboard.

In the attached patch, I'd propose to simple remove the "lastkey" related stuff, I guess it was meant for Opera 12 and maybe no more necessary unless I'm missing something. Added also a little fix for Opera 27.

Attachments (2)

31415.patch (1.0 KB) - added by afercia 6 years ago.
31415.2.patch (4.6 KB) - added by afercia 6 years ago.
Help text changes.

Download all attachments as: .zip

Change History (17)

@afercia
6 years ago

#1 @afercia
6 years ago

  • Keywords has-patch added

#2 @SergeyBiryukov
6 years ago

  • Component changed from Administration to Plugins

#3 @DrewAPicture
6 years ago

  • Milestone changed from Awaiting Review to 4.2

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


6 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


6 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


6 years ago

#7 @Cheffheid
6 years ago

a11y tests confirm that the patch fixes the trap. There are some minor quirks with some browser/screen reader combos where the ESC key needs to be pressed twice before the user can continue.

This might need to be reflected in the description.

<p id="newcontent-description">In the editing area the Tab key enters a tab character. To move below this area by pressing Tab, press the Esc key followed by the Tab key. In some cases the Esc key will need to be pressed twice before the Tab key will allow you to continue.</p>

This ticket was mentioned in Slack in #core by drew. View the logs.


6 years ago

#9 @DrewAPicture
6 years ago

  • Keywords needs-patch added; has-patch removed

Sounds like we may just need a new patch that address the help tab string change suggested in comment:7.

In the editing area the Tab key enters a tab character. To move below this area by pressing Tab, press the Esc key followed by the Tab key

#10 @afercia
6 years ago

Refreshed patch with the help tab string changes. FWIW, the need to press Escape twice may depend on the screen reader being in "forms mode" or "browse mode".

@afercia
6 years ago

Help text changes.

#11 @DrewAPicture
6 years ago

  • Keywords has-patch commit added; needs-patch removed

31415.2.patch looks good, thanks @afercia.

#12 @DrewAPicture
6 years ago

  • Owner set to azaozz
  • Status changed from new to reviewing

@azaozz: Would you mind reviewing the JS changes here, see if there are any obvious gotchas?

#13 @azaozz
6 years ago

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

In 31908:

Fix focusing in the plugin and theme editors. Update the help.
Props afercia, Cheffheid. Fixes #31415.

This ticket was mentioned in Slack in #accessibility by cheffheid. View the logs.


6 years ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 years ago

Note: See TracTickets for help on using tickets.