Incorporate new widget addition panel

[westonruter]

/cc @shaunandrews

• Add a default icon for widgets if they don't specify one. (See also Trac 25419)

[westonruter]

• When the widget addition panel is open, if you switch to another sidebar, clicking a widget to add should append it to the newly-opened sidebar, not sidebar from which the addition panel was originally opened.

[westonruter]

Latest from @shaunandrews:

[12/7/13, 11:09:14 AM] Shaun: And I do have a patch, let me get that posted.
[12/7/13, 11:13:25 AM] Shaun: https://cloudup.com/cz5cgZ43EzM
...
[12/7/13, 11:14:23 AM] Shaun: Here's the icons: https://cloudup.com/ctebT7SCBHH
[12/7/13, 11:14:57 AM] Shaun: (I included some for Jetpack as well as the default widgets.)

If anyone wants to patch the branch with these changes, feel free!

[shaunandrews]

• It should be possible to navigate and select a new widget using just your keyboard.

[westonruter]

@shaunandrews re: keyboard accessibility, see my most recent commit 3345120. You can now focus on the “Add a Widget” button, and then you select a widget by filtering it down and hitting Enter. The first visible widget is then added. If you hit Escape, then the new panel is removed and the focus is brought back to the original Add a Widget button.

A first stab.

[shaunandrews]

Cool. Good first start. There's a weird bug when tabbing over the add link. Sometimes hitting tab actually triggers the new widgets panel opened/closed.

For the next round, it'd be great to be able to use the up/down arrows to navigation between the list of available widgets. Having Return add the top widget is OK, but often times a search pulls up multiple widgets and its possible I may want the second one in the results.

Here's a quick sketch:

[westonruter]

@shaunandrews re:

There's a weird bug when tabbing over the add link. Sometimes hitting tab actually triggers the new widgets panel opened/closed.

Fixed in 0121381

[westonruter]

@shaunandrews re:

For the next round, it'd be great to be able to use the up/down arrows to navigation between the list of available widgets. Having Return add the top widget is OK, but often times a search pulls up multiple widgets and its possible I may want the second one in the results.

I've added lots of accessibility improvements, including up/down arrow to select a widget, but also the ability to tab through the widgets. The available widgets panel is now self-contained within a the WidgetCustomizer.availableWidgetsPanel object.

I also discovered a problem with the Customizer which prevents keyboard navigation to invoke a click event by hitting Enter, which is the default behavior. I've filed a core patch to correct this: https://core.trac.wordpress.org/ticket/26633

Please review the changes! If good, I'll merge and do the v0.11 release.

[shaunandrews]

@westonruter I think I uncommented that line to see what would happen :)

While I really (really, really, really) hate wide widgets. I'm 90% sure we're going to get pushback from the Core Dev team, as well as lots of plugin/widget developers who rely on the ability to have wide widget panels. #18 is the best place to keep that discussion.

[shaunandrews]

The arrow navigation seems to work, but its a little strange. Is it scrolling the div as well? I think the div should remain stationary until you hit the bottom widget in view. Does that make sense?

Also, there's no way to tab back into the widget filter input.

Is there anyway to tab to the widget-top in the customizer sidebar to expand/contract widget controls?

[westonruter]

@shaunandrews

The arrow navigation seems to work, but its a little strange. Is it scrolling the div as well? I think the div should remain stationary until you hit the bottom widget in view. Does that make sense?

It's not scrolling the container intentionally. When you up/down it just focuses on the adjacent widget template. It seems the browser is automatically doing some scrolling to make sure that it remains in the viewport. By adding focus to the widget template, it allows tab to then be used to navigate as well. I guess the scrolling behavior might be deactivated with preventDefault but then we'd have to make sure that the widget is scrolled into view manually.

Also, there's no way to tab back into the widget filter input.

There is actually. You have to shift+tab back up to the first widget and then once more lands you in the filter input. I suppose it would be better, actually, if the focus landed in the filter input if you down-arrow all the way to the bottom or the top, instead of immediately wrapping around?

Is there anyway to tab to the widget-top in the customizer sidebar to expand/contract widget controls?

Yes, this is what .widget-top .widget-action is for. You can tab among the arrows and should be able to hit Enter to expand/collapse the control. However, there is an issue with hitting Enter on links in the Customizer, which I filed and patched in https://core.trac.wordpress.org/ticket/26633

[westonruter]

@shaunandrews regarding:

I suppose it would be better, actually, if the focus landed in the filter input if you down-arrow all the way to the bottom or the top, instead of immediately wrapping around?

I've implemented that in 727c09c.

I'm going to proceed with merging this PR and doing another release of the plugin, and you can open new issues to address any problems you see (if any).