WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#37383 closed defect (bug) (fixed)

Theme browser keyboard traps

Reported by: afercia Owned by: 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 4 years ago.

Download all attachments as: .zip

Change History (9)

#1 @afercia
4 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
4 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
4 years ago

#3 @afercia
4 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.


4 years ago

#5 @ocean90
4 years ago

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

#6 @afercia
4 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
4 years ago

  • Milestone changed from Awaiting Review to 4.6

#8 @afercia
4 years ago

#35663 was marked as a duplicate.

Note: See TracTickets for help on using tickets.