Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add keyboard-accessible means of reordering widgets #21

Merged
merged 11 commits into from Jan 30, 2014

Conversation

@westonruter
Copy link
Contributor

commented Jan 22, 2014

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:

01-enable-accessibility-mode

The inline widget form is disabled and an "Edit" link appears at /wp-admin/widgets.php?widgets-access=on:

02-accessibility-mode-on-edit-link

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:

03-accessible-editing

There has got to be a better way to do this. The menu editor has a better model, I think:

menus__wordpress_develop__wordpress

We could add these links to the widget-control-actions.

Related to #26

@westonruter

This comment has been minimized.

Copy link
Contributor Author

commented Oct 8, 2013

@shaunandrews thoughts on this?

@westonruter

This comment has been minimized.

Copy link
Contributor Author

commented Dec 9, 2013

@MichaelArestad do you have the markup for your accessible widget reordering?

@westonruter

This comment has been minimized.

Copy link
Contributor Author

commented Dec 9, 2013

@westonruter

This comment has been minimized.

Copy link
Contributor Author

commented Dec 17, 2013

I've filed the Trac ticket for adding the hooks to wp_widget_control and a ticket for fixing a keyboard accessibility problem in the customizer:

@westonruter

This comment has been minimized.

Copy link
Contributor Author

commented Dec 23, 2013

Thanks to @shaunandrews for volunteering to take a stab at integrating this:

I can take a stab at @MichaelArestad's accessibility improvements — not sure how far I'll get. Does that help?

We are currently partially blocked by the #26661, the wp_widget_control_before/wp_widget_control_after hooks being added.

@westonruter

This comment has been minimized.

Copy link
Contributor Author

commented Dec 23, 2013

@shaunandrews we now have the temp hooks, as of r26865. I think they should be permanent, however, having their temp_ prefixes removed.

@westonruter

This comment has been minimized.

Copy link
Contributor Author

commented Jan 13, 2014

@ghost ghost assigned westonruter Jan 18, 2014

@westonruter

This comment has been minimized.

Copy link
Contributor Author

commented Jan 20, 2014

@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 .move-widget, .move-widget-down, and .move-widget-up?

/cc @shaunandrews

@MichaelArestad

This comment has been minimized.

Copy link
Contributor

commented Jan 20, 2014

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

Integrate keyboard-accessible widget reordering
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.
@westonruter

This comment has been minimized.

Copy link
Contributor Author

commented Jan 22, 2014

@MichaelArestad I pushed up the initial integration; check out the accessible-widget-reordering branch to see it. It is functional, except for an issue with moving a widget to another sidebar. I've also added the dark color for when the links are focused/hovered. I didn't remove the borders yet.

Some todos before this PR can be merged:

  • the widget control does not get properly reinitialized yet when moved to another sidebar
  • listen for changes to which sidebars are currently rendered, and hide these sidebars from being shown among the .widget-area-select
  • when moving a widget to a new sidebar, expand the section for the new destination sidebar and re-open the widget for customizing.
  • remove borders from buttons in the .widget-reorder-nav
westonruter and others added 7 commits Jan 27, 2014
Prevent widget element lookup race condition when moving widget to an…
…other sidebar

* scope widget element lookups by associated sidebar
* instead of appending to the parent, we should append relative to the first widget found
Improve logic for cleaning up when widget is removed from sidebar
* Remove required preview refresh when widget is moved to another sidebar
* Ensure that widget moved to other sidebar without drag/drop isn’t trashed
Merge pull request #75 from MichaelArestad/accessible-widget-reordering
Add more icon matchers, clean up CSS, improve focus states
Fix live previews for moving widget to another sidebar
* 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
@westonruter

This comment has been minimized.

Copy link
Contributor Author

commented Jan 30, 2014

@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.

westonruter added 2 commits Jan 30, 2014
Focus on newly moved widget control
Focus on first focusable instead of on first visible input
@westonruter

This comment has been minimized.

Copy link
Contributor Author

commented Jan 30, 2014

This feature is ready for review.

westonruter added a commit that referenced this pull request Jan 30, 2014
Merge pull request #21 from x-team/accessible-widget-reordering
Add keyboard-accessible means of reordering widgets

@westonruter westonruter merged commit c6df253 into develop Jan 30, 2014

fnakstad added a commit to knishiura-lab/wp-widget-customizer that referenced this pull request Feb 5, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.