WordPress.org

Make WordPress Core

Changeset 29602


Ignore:
Timestamp:
08/25/2014 06:22:34 PM (5 years ago)
Author:
wonderboymusic
Message:

Media: cleanup recent changes to media.view.FocusManager.

  • Adjusts the focus method to target the menu for the current modal
  • Refactor the FocusManager so that the method names and the functionality matches more closely with how it currently works. The changes in 4.0 to the FocusManager change the purpose of the focus manager entirely — instead of being a way to save and restore focus state, the new FocusManager is about constraining keyboard navigation via the tab key to inside the modal.

Props gcorne.
See #23560.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/media-views.js

    r29601 r29602  
    24992499                        // Keep focus inside media modal
    25002500                        // after canceling a gallery
    2501                         new media.view.FocusManager({
    2502                             el: this.el
    2503                         }).focus();
     2501                        this.controller.modal.focusManager.focus();
    25042502                    }
    25052503                },
     
    26902688                    // Keep focus inside media modal
    26912689                    // after jumping to gallery view
    2692                     new media.view.FocusManager({
    2693                         el: this.el
    2694                     }).focus();
     2690                    this.controller.modal.focusManager.focus();
    26952691                }
    26962692            });
     
    27222718                    // Keep focus inside media modal
    27232719                    // after jumping to playlist view
    2724                     new media.view.FocusManager({
    2725                         el: this.el
    2726                     }).focus();
     2720                    this.controller.modal.focusManager.focus();
    27272721                }
    27282722            });
     
    27542748                    // Keep focus inside media modal
    27552749                    // after jumping to video playlist view
    2756                     new media.view.FocusManager({
    2757                         el: this.el
    2758                     }).focus();
     2750                    this.controller.modal.focusManager.focus();
    27592751                }
    27602752            });
     
    32543246            }
    32553247
    3256             this.$( '.media-modal-close' ).focus();
     3248            this.$el.focus();
    32573249
    32583250            return this.propagate('open');
     
    33523344     */
    33533345    media.view.FocusManager = media.View.extend({
     3346
    33543347        events: {
    3355             keydown: 'recordTab',
    3356             focusin: 'updateIndex'
    3357         },
    3358 
    3359         focus: function() {
    3360             // Reset focus on first left menu item
    3361             $('.media-menu-item').first().focus();
     3348            'keydown': 'constrainTabbing'
     3349        },
     3350
     3351        focus: function() { // Reset focus on first left menu item
     3352            this.$('.media-menu-item').first().focus();
    33623353        },
    33633354        /**
    33643355         * @param {Object} event
    33653356         */
    3366         recordTab: function( event ) {
     3357        constrainTabbing: function( event ) {
     3358            var tabbables;
     3359
    33673360            // Look for the tab key.
    33683361            if ( 9 !== event.keyCode ) {
     
    33703363            }
    33713364
     3365            tabbables = this.$( ':tabbable' );
     3366
    33723367            // Keep tab focus within media modal while it's open
    3373             if ( event.target === this.tabbableLast[0] && !event.shiftKey ) {
    3374                 this.tabbableFirst.focus();
     3368            if ( tabbables.last()[0] === event.target && ! event.shiftKey ) {
     3369                tabbables.first().focus();
    33753370                return false;
    3376             } else if ( event.target === this.tabbableFirst[0] && event.shiftKey ) {
    3377                 this.tabbableLast.focus();
     3371            } else if ( tabbables.first()[0] === event.target && event.shiftKey ) {
     3372                tabbables.last().focus();
    33783373                return false;
    33793374            }
    3380         },
    3381         /**
    3382          * @param {Object} event
    3383          */
    3384         updateIndex: function() {
    3385             // Resets tabbable elements
    3386             this.tabbables = $( ':tabbable', this.$el );
    3387             this.tabbableFirst = this.tabbables.filter( ':first' );
    3388             this.tabbableLast = this.tabbables.filter( ':last' );
    33893375        }
     3376
    33903377    });
    33913378
     
    61666153            // Keep focus inside media modal
    61676154            // after clear link is selected
    6168             new media.view.FocusManager({
    6169                 el: this.el
    6170             }).focus();
     6155            this.controller.modal.focusManager.focus();
    61716156        }
    61726157    });
     
    65216506                // Keep focus inside media modal
    65226507                // after image is deleted
    6523                 new media.view.FocusManager({
    6524                     el: this.el
    6525                 }).focus();
     6508                this.controller.modal.focusManager.focus();
    65266509            }
    65276510        },
Note: See TracChangeset for help on using the changeset viewer.