Theme Install Page is unusable via the keyboard

[jorbin]

While testing wp-admin/theme-install.php, navigating the page via the tab key makes the page completely unusable.

First things noted on initial testing:

.theme-navigation links are not actually links so you cannot focus on them.

When you are focused on a theme (divs with the theme class) and press tab, you are moved to the theme preview screen.

[jorbin]

First pass on this fixes the main issues on the overview page.

• Filters are navigable and selectable via the keyboard
• You can navigate from theme to theme via the keyboard
• Global keyboard shortcuts like CMD-L actually work

@todo the theme detail page doesn't work at all right now.

[jorbin]

I still haven't touched the preview panel, bt the above patch takels much of the issues on the overview panel.

[jorbin]

The above patch ( 27521.8.diff ) corrects all the issues I know about on the theme install screen. It doesn't do anything on the theme install details page.

One change that also affects the theme screen is that the action buttons are now focusable.

[helen]

Replying to jorbin:

One change that also affects the theme screen is that the action buttons are now focusable.

YAY!

[helen]

In 27804:

Bring keyboard accessibility to the theme install screen and theme action buttons. props jorbin. see #27521.

[helen]

27521.9.diff​ brings focus into the overlay and then puts it back on close. It copies some the existing pattern from theme management, but doesn't quite do it all (_.delay() or a separate function for setting/containing focus). Not sure what the preference is here.

[matveb]

Nice — quick mention that if we switch the Preview view back to the Details view we have in themes.php (updating the templates) we should get most of the work that went into keyboard accessibility for themes.php for free. I'll be tackling that soonish after finishing the other priority items if no one gets to that first.

[nacin]

This page is much better now, and we have a plan of action for finishing it off, so I'm turning off the red.

[matveb]

Related to this, some nice things to have:

• Escape to close Preview / go back to sidebar if you are in iframe.
• Disable next/prev buttons when you reach an dead end.
• Contain focus to sidebar + preview.

[adamsilverstein]

Theme install preview - Disable next/prev buttons when you reach an dead end.

[adamsilverstein]

Theme install preview - Disable next/prev buttons when you reach an dead end.

[adamsilverstein]

corrected: Disable next/prev buttons when you reach an dead end.

[adamsilverstein]

Escape to close Preview

[adamsilverstein]

corrected: Escape to close Preview (removed blank line)

[adamsilverstein]

Replying to matveb:

Related to this, some nice things to have:

• Escape to close Preview / go back to sidebar if you are in iframe.
• Disable next/prev buttons when you reach an dead end.
• Contain focus to sidebar + preview.

Adding these incrementally for clarity; I can definitely seeing some code duplication that could be combined.

• 27521.15.diff​: Escape to close Preview
• 27521.13.diff​: Disable next/previous buttons when you reach (or start at) a dead end

[kirasong]

Refreshed, Cleaned up, and Combined 13 & 15.

[kirasong]

Refreshed (since 27521.13.diff​ was no longer applying) and cleaned up 27521.15.diff​ and 27521.13.diff​, and put them into: 27521.16.diff​

Since I was testing them together, right now they're in the same patch. If a committer would rather apply them in separate commits, I can split them out again.

[nacin]

In 28033:

Theme Installer: Disable prev/next buttons on first/last themes, add Esc handling, use IDs.

props adamsilverstein, DH-Shredder.
fixes #27521.

[nacin]

The overlay issue is not new. New ticket for post-3.9: #27705. A simple fix *could* be pulled in post RC for 3.9.

[adamsilverstein]

add left/right arrow key events to install preview mode

[nacin]

In 28036:

Theme Installer: Left/right arrow keys in the overlay.

props adamsilverstein.
see #27521.

[matveb]

typo

[matveb]

Use Backbone events to handle keyups on Preview. Fix bugs with the current model state persisting after you opened-navigate-close the Preview. Also hard prevents previous theme from going into a loop.

$themeInstaller could be preview.$el instead if we were to pass it to the function.

[nacin]

In 28049:

Theme installer keyboard fixes. Updates [28033] and [28036].

props matveb.
see #27521.

[adamsilverstein]

only navigate to previous theme ._once

[adamsilverstein]

Oh, Backbone events - thats how to handle events! :)

I noticed you added ._once around the nextTheme call on key-right, it was left off for previousTheme/key-left; Unless there is a specific reason for leaving off, we may want to add that, see 27521.20.diff​

Replying to matveb:

Use Backbone events to handle keyups on Preview. Fix bugs with the current model state persisting after you opened-navigate-close the Preview. Also hard prevents previous theme from going into a loop.

$themeInstaller could be preview.$el instead if we were to pass it to the function.