Add keyboard-accessible means of reordering widgets #21
Conversation
| @shaunandrews thoughts on this? |
| @MichaelArestad do you have the markup for your accessible widget reordering? |
| Markup is located here: http://codepen.io/MichaelArestad/pen/bfaa627a1b011b80c481b9399987ae6d
|
| I've filed the Trac ticket for adding the hooks to |
| Thanks to @shaunandrews for volunteering to take a stab at integrating this:
We are currently partially blocked by the #26661, the |
| @shaunandrews we now have the temp hooks, as of r26865. I think they should be permanent, however, having their |
| @shaunandrews here's my work-in-progress: https://gist.github.com/westonruter/8396525 |
ghost assigned | @MichaelArestad I'm still working on integration of your work. I have the Reorder link now appearing, and when clicking it, the Up/Down/Move links appear with each widget. The Up/Down arrows now reorder widgets as expected. I'm still working on the move widget area. Can you advise on a focus/hover state for /cc @shaunandrews |
| Awesome! Was thinking about this last night. I would do a simple color change for just the icon making it a bit darker. Also, since this is the customizer version and isn't really needed to be mobile friendly, I would remove the dotted borders altogether allowing them to take up less space as a whole and look like they have more room. Maybe something like this: http://codepen.io/MichaelArestad/pen/JbjqA |
Props @MichaelArestad * Adds Reorder link next to Add Widget link * Reorder link causes reorder buttons with each widget to appear * Widgets can be moved up/down via buttons * Widgets can be moved to other sidebars via new subpanel (not yet fully functional) Other changes: * Use Backbone for keeping track of which sidebars are rendered * Add tabIndex to new UI elements for keyboard accessibility * Add methods for obtaining a widget’s sidebar control, and a sidebar’s widget controls * Add widget control methods for moving a widget up/down, and for getting its position in the sidebar.
| @MichaelArestad I pushed up the initial integration; check out the Some todos before this PR can be merged:
|
…other sidebar * scope widget element lookups by associated sidebar * instead of appending to the parent, we should append relative to the first widget found
* Remove required preview refresh when widget is moved to another sidebar * Ensure that widget moved to other sidebar without drag/drop isn’t trashed
Add more icon matchers, clean up CSS, improve focus states
* Send all sidebars_widgets settings, not just the setting for the widget being edited * Let incoming customized POST data completely override sidebars_widgets settings; stop merging * Stop deleting widget instance settings from preview customizer because unnecessary and because of possible race condition when moving widgets across sidebars
| @MichaelArestad with fba1988 I've fixed the architectural problem that was preventing your keyboard-accessible widget ordering from working. Now I just heed to do two more tasks (above) and this PR should be complete, and they're just UI improvements. |
Focus on first focusable instead of on first visible input
| This feature is ready for review. |
Add keyboard-accessible means of reordering widgets
2 participants
Widgets on the admin page have this, and we need it in the customizer as well.
Currently in WordPress, the feature is provided via the "Enable Accessibility" link:
The inline widget form is disabled and an "Edit" link appears at
/wp-admin/widgets.php?widgets-access=on:Then a standalone page (e.g. at
/wp-admin/widgets.php?widgets-access=on&editwidget=categories-2&sidebar=sidebar-1&key=0) appears which contains the widget form, followed by a sidebar selector and a position within each sidebar:There has got to be a better way to do this. The menu editor has a better model, I think:
We could add these links to the
widget-control-actions.Related to #26