Make WordPress Core

Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#37383 closed defect (bug) (fixed)

Theme browser keyboard traps

Reported by: afercia's profile afercia Owned by: afercia's profile afercia
Milestone: 4.6 Priority: normal
Severity: normal Version: 3.8
Component: Themes Keywords: has-screenshots has-patch commit
Focuses: ui, accessibility, javascript Cc:

Description

In the installed themes screen, clicking on a theme details opens the "theme browser" where users can navigate through all the installed themes, get the detailed information, and perform some actions.

When using the keyboard to navigate through the modal dialog content, keyboard navigation is correctly constrained within the modal but I've noticed there are a couple of issues, not sure when they were introduced but if I remember correctly this was working nicely at some point.

https://cldup.com/dRP85ds70I.png

1
When navigating forwards pressing Tab, it's impossible to reach the "Delete" button

2
When navigating backwards pressing Shift+Tab, at some point you're trapped! Upon each Shift+Tab press, focus will move to the "Delete" button and then to the "Back" button and then to the "Delete" button again, etc. in an infinite loop and ignoring any other focusable control (see screenshot).

Attachments (1)

37383.diff (2.2 KB) - added by afercia 10 years ago.

Download all attachments as: .zip

Change History (9)

#1 @afercia
10 years ago

  • Version set to 3.8

Seems the tabbing backwards issue was there since the beginning, I can reproduce it also on WP 3.8 while the tabbing forwards issue was introduced in 4.3. Setting version to 3.8.

#2 @afercia
10 years ago

Seems the tabbing backwards issue was mentioned also 3 years ago, see this comment

There is an odd occurence when using shift+tab, the only two items in the modal that can get focus are the Delete button and the previous theme link/button.

@afercia
10 years ago

#3 @afercia
10 years ago

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

37383.diff improves the containFocus() function to always get the correct first and last focusable elements, even when the theme browser displays the active theme details (in this case additional links are displayed).

Also, reduces the 500ms delay for setting the initial focus to 100ms. I guess it could be also '0', as far as I see it just needs to guarantee containFocus() runs after the rendering has completed.

Lastly, when on the first and last themes, adds a disabled attribute on the previous and next theme buttons since right now they just look disabled but they're still focusable.

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


10 years ago

#5 @ocean90
10 years ago

@afercia 37383.diff works as expected and fixes the mentioned issues. Feel free to commit.

#6 @afercia
10 years ago

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

In 38084:

Accessibility: Improve keyboard navigation on the themes browser modal window.

Improves the containFocus() function to always get the correct first and last
focusable elements, even when the theme browser shows the active theme details.
Also, when on the first and last theme, adds a disabled attribute on the
previous and next navigation buttons to make them not focusable.

Fixes #37383.

#7 @afercia
10 years ago

  • Milestone changed from Awaiting Review to 4.6

#8 @afercia
10 years ago

#35663 was marked as a duplicate.

Note: See TracTickets for help on using tickets.