Changeset 41803

Timestamp:

10/10/2017 03:33:57 AM (9 years ago)

Author:

westonruter

Message:

Customize: Constrain focus when overlay notification is displayed.

• Restore previously-focused element when overlay notifications are dismissed.
• Allow notifications to be dismissed via keyboard.

Amends [41667].
See #42110, #35210, #39896.

Location:

trunk/src

Files:

• wp-admin/js/customize-controls.js (modified) (5 diffs)
• wp-includes/js/customize-base.js (modified) (1 diff)

trunk/src/wp-admin/js/customize-controls.js

@@ -78 +78 @@
 
                         api.Values.prototype.initialize.call( collection, options );
+
+                        _.bindAll( collection, 'constrainFocus' );
 
                         // Keep track of the order in which the notifications were added for sorting purposes.
@@ -189 +191 @@
                 render: function() {
                         var collection = this,
-                                notifications, hadOverlayNotification = false, hasOverlayNotification,
+                                notifications, hadOverlayNotification = false, hasOverlayNotification, overlayNotifications = [],
                                 previousNotificationsByCode = {},
-                                listElement;
+                                listElement, focusableElements;
 
                         // Short-circuit if there are no container to render into.
@@ -227 +229 @@
                                 }
                                 notificationContainer = $( notification.render() );
+                                notification.container = notificationContainer;
                                 listElement.append( notificationContainer ); // @todo Consider slideDown() as enhancement.
 
-                                // @todo Constraing focus in notificationContainer if notification.extended( api.OverlayNotification ).
-                        });
-
-                        hasOverlayNotification = Boolean( _.find( notifications, function( notification ) {
-                                return notification.extended( api.OverlayNotification );
-                        } ) );
+                                if ( notification.extended( api.OverlayNotification ) ) {
+                                        overlayNotifications.push( notification );
+                                }
+                        });
+                        hasOverlayNotification = Boolean( overlayNotifications.length );
+
                         if ( collection.previousNotifications ) {
                                 hadOverlayNotification = Boolean( _.find( collection.previousNotifications, function( notification ) {
@@ -244 +247 @@
                                 $( document.body ).toggleClass( 'customize-loading', hasOverlayNotification );
                                 collection.container.toggleClass( 'has-overlay-notifications', hasOverlayNotification );
+                                if ( hasOverlayNotification ) {
+                                        collection.previousActiveElement = document.activeElement;
+                                        $( document ).on( 'keydown', collection.constrainFocus );
+                                } else {
+                                        $( document ).off( 'keydown', collection.constrainFocus );
+                                }
+                        }
+
+                        if ( hasOverlayNotification ) {
+                                collection.focusContainer = overlayNotifications[ overlayNotifications.length - 1 ].container;
+                                collection.focusContainer.prop( 'tabIndex', -1 );
+                                focusableElements = collection.focusContainer.find( ':focusable' );
+                                if ( focusableElements.length ) {
+                                        focusableElements.first().focus();
+                                } else {
+                                        collection.focusContainer.focus();
+                                }
+                        } else if ( collection.previousActiveElement ) {
+                                $( collection.previousActiveElement ).focus();
+                                collection.previousActiveElement = null;
                         }
 
@@ -249 +272 @@
                         collection.previousContainer = collection.container;
                         collection.trigger( 'rendered' );
+                },
+
+                /**
+                 * Constrain focus on focus container.
+                 *
+                 * @since 4.9.0
+                 *
+                 * @param {jQuery.Event} event - Event.
+                 * @returns {void}
+                 */
+                constrainFocus: function constrainFocus( event ) {
+                        var collection = this;
+                        if ( ! collection.focusContainer || collection.focusContainer.is( event.target ) || $.contains( collection.focusContainer[0], event.target[0] ) ) {
+                                return;
+                        }
+                        collection.focusContainer.focus();
                 }
         });

trunk/src/wp-includes/js/customize-base.js

@@ -886 +886 @@
 
                         if ( notification.dismissible ) {
-                                container.find( '.notice-dismiss' ).on( 'click', function() {
+                                container.find( '.notice-dismiss' ).on( 'click keydown', function( event ) {
+                                        if ( 'keydown' === event.type && 13 !== event.which ) {
+                                                return;
+                                        }
+
                                         if ( notification.parent ) {
                                                 notification.parent.remove( notification.code );