[wp-trac] [WordPress Trac] #19159: When Inactive Widgets list gets long it is hard to clear

[WordPress Trac]

#19159: When Inactive Widgets list gets long it is hard to clear
-------------------------------------------------+-------------------------
 Reporter:  westi                                |       Owner:  cdog
     Type:  enhancement                          |      Status:  accepted
 Priority:  normal                               |   Milestone:  4.4
Component:  Widgets                              |     Version:  3.3
 Severity:  normal                               |  Resolution:
 Keywords:  ux-feedback dev-feedback has-patch   |     Focuses:  ui
  has-screenshots                                |
-------------------------------------------------+-------------------------

Comment (by afercia):

 Hello. For accessibility, disabling/hiding/removing from the DOM a focused
 element is always problematic: where the focus will land? Browsers behave
 differently, Firefox will try to keep focus "in place" meaning as keyboard
 users will start tabbing again it will focus the closest focusable
 element. Chrome will completely lose focus and users will have to start
 tabbing again from the document root.

 So, while we should prevent multiple AJAX calls, I wouldn't recommend to
 disable the button after it gets activated.

 Instead, when the Inactive Widgets list is initially empty, maybe the
 button shouldn't be displayed at all. It's a bit odd to see an empty list
 and a button to clear the empty list, see screenshot:

 [[Image(https://cldup.com/UsMFFKQc9y.png)]]

 Spinner: the one close to the "Inactive Widgets" title it's used when
 dragging widgets and can't be moved. So maybe the new button should use a
 new spinner placed on the right.

 Some additional considerations so far:

 - not an expert but what about error handling? What happens if clearing
 the list fails and what kind of visual feedback is given to users?
 - together with a visual feedback, I'd consider to add audible
 success/error messages using `wp.a11y.speak`
 - CSS: not sure why the button's container needs to clear previous floats,
 if it's really needed the CSS selector looks a bit overqualified to me and
 maybe could be simplified in just `.remove-inactive-widgets`. Same for the
 selector used to hide it when the wrapper is closed
 - there's a space to remove here: `$( '.spinner', sb ).removeClass(' is-
 active' );`

--
Ticket URL: <https://core.trac.wordpress.org/ticket/19159#comment:23>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform