WordPress.org

Make WordPress Core

Ticket #23560: 23560.10.diff

File 23560.10.diff, 9.3 KB (added by helen, 6 years ago)
  • src/wp-includes/css/media-views.css

     
    478478        border-right: 0;
    479479}
    480480
    481 .media-router > a:active,
    482 .media-router > a:focus {
     481.media-router > a:active {
    483482        outline: none;
    484483}
    485484
     
    696695        user-select: none;
    697696}
    698697
     698.attachment:focus {
     699        -webkit-box-shadow: 0 0 2px 2px #5b9dd9;
     700        box-shadow: 0 0 2px 2px #5b9dd9;
     701        outline: none;
     702}
     703
    699704.selected.attachment {
    700705        -webkit-box-shadow:
    701706                0 0 0 1px #fff,
     
    925930        right: 300px;
    926931        bottom: 0;
    927932        overflow: auto;
     933        outline: none;
    928934}
    929935
    930936.attachments-browser .instructions {
  • src/wp-includes/js/media-views.js

     
    23132313                                                } else {
    23142314                                                        frame.close();
    23152315                                                }
     2316
     2317                                                // Keep focus inside media modal
     2318                                                // after canceling a gallery
     2319                                                new media.view.FocusManager({
     2320                                                        el: this.el
     2321                                                }).focus();
    23162322                                        }
    23172323                                },
    23182324                                separateCancel: new media.View({
     
    24952501                                        }) );
    24962502
    24972503                                        this.controller.setState('gallery-edit');
     2504
     2505                                        // Keep focus inside media modal
     2506                                        // after jumping to gallery view
     2507                                        new media.view.FocusManager({
     2508                                                el: this.el
     2509                                        }).focus();
    24982510                                }
    24992511                        });
    25002512                },
     
    25212533                                        }) );
    25222534
    25232535                                        this.controller.setState('playlist-edit');
     2536
     2537                                        // Keep focus inside media modal
     2538                                        // after jumping to playlist view
     2539                                        new media.view.FocusManager({
     2540                                                el: this.el
     2541                                        }).focus();
    25242542                                }
    25252543                        });
    25262544                },
     
    25472565                                        }) );
    25482566
    25492567                                        this.controller.setState('video-playlist-edit');
     2568
     2569                                        // Keep focus inside media modal
     2570                                        // after jumping to video playlist view
     2571                                        new media.view.FocusManager({
     2572                                                el: this.el
     2573                                        }).focus();
    25502574                                }
    25512575                        });
    25522576                },
     
    29562980                                propagate: true,
    29572981                                freeze:    true
    29582982                        });
     2983
     2984                        this.focusManager = new media.view.FocusManager({
     2985                                el: this.el
     2986                        });
    29592987                },
    29602988                /**
    29612989                 * @returns {Object}
     
    30373065                                return this;
    30383066                        }
    30393067
    3040                         this.$el.hide();
     3068                        // Hide modal and remove restricted media modal tab focus once it's closed
     3069                        this.$el.hide().undelegate( 'keydown' );
     3070
     3071                        // Put focus back in useful location once modal is closed
     3072                        $('#wpbody-content').focus();
     3073
    30413074                        this.propagate('close');
    30423075
    30433076                        // If the `freeze` option is set, restore the container's scroll position.
     
    30983131                        if ( 27 === event.which && this.$el.is(':visible') ) {
    30993132                                this.escape();
    31003133                                event.stopImmediatePropagation();
     3134                        } else {
     3135                                // Keep focus inside the media modal
     3136                                this.focusManager;
    31013137                        }
    31023138                }
    31033139        });
     
    31173153                },
    31183154
    31193155                focus: function() {
    3120                         if ( _.isUndefined( this.index ) ) {
    3121                                 return;
    3122                         }
    3123 
    3124                         // Update our collection of `$tabbables`.
    3125                         this.$tabbables = this.$(':tabbable');
    3126 
    3127                         // If tab is saved, focus it.
    3128                         this.$tabbables.eq( this.index ).focus();
     3156                        // Reset focus on first left menu item
     3157                        $('.media-menu-item').first().focus();
    31293158                },
    31303159                /**
    31313160                 * @param {Object} event
     
    31363165                                return;
    31373166                        }
    31383167
    3139                         // First try to update the index.
    3140                         if ( _.isUndefined( this.index ) ) {
    3141                                 this.updateIndex( event );
     3168                        // Keep tab focus within media modal while it's open
     3169                        if ( event.target === this.tabbableLast[0] && !event.shiftKey ) {
     3170                                this.tabbableFirst.focus();
     3171                                return false;
     3172                        } else if ( event.target === this.tabbableFirst[0] && event.shiftKey ) {
     3173                                this.tabbableLast.focus();
     3174                                return false;
    31423175                        }
    3143 
    3144                         // If we still don't have an index, bail.
    3145                         if ( _.isUndefined( this.index ) ) {
    3146                                 return;
    3147                         }
    3148 
    3149                         var index = this.index + ( event.shiftKey ? -1 : 1 );
    3150 
    3151                         if ( index >= 0 && index < this.$tabbables.length ) {
    3152                                 this.index = index;
    3153                         } else {
    3154                                 delete this.index;
    3155                         }
    31563176                },
    31573177                /**
    31583178                 * @param {Object} event
    31593179                 */
    31603180                updateIndex: function( event ) {
    3161                         this.$tabbables = this.$(':tabbable');
    3162 
    3163                         var index = this.$tabbables.index( event.target );
    3164 
    3165                         if ( -1 === index ) {
    3166                                 delete this.index;
    3167                         } else {
    3168                                 this.index = index;
    3169                         }
     3181                        // Resets tabbable elements
     3182                        this.tabbables = $( ':tabbable', this.$el );
     3183                        this.tabbableFirst = this.tabbables.filter( ':first' );
     3184                        this.tabbableLast = this.tabbables.filter( ':last' );
    31703185                }
    31713186        });
    31723187
     
    43974412                className: 'attachment',
    43984413                template:  media.template('attachment'),
    43994414
     4415                attributes: {
     4416                        tabIndex: 0,
     4417                        role: 'checkbox'
     4418                },
     4419
    44004420                events: {
    44014421                        'click .attachment-preview':      'toggleSelectionHandler',
    44024422                        'change [data-setting]':          'updateSetting',
     
    44054425                        'change [data-setting] textarea': 'updateSetting',
    44064426                        'click .close':                   'removeFromLibrary',
    44074427                        'click .check':                   'removeFromSelection',
    4408                         'click a':                        'preventDefault'
     4428                        'click a':                        'preventDefault',
     4429                        'keydown':                        'toggleSelectionHandler'
    44094430                },
    44104431
    44114432                buttons: {},
     
    44134434                initialize: function() {
    44144435                        var selection = this.options.selection;
    44154436
     4437                        this.$el.attr('aria-label', this.model.attributes.title).attr('aria-checked', false);
    44164438                        this.model.on( 'change:sizes change:uploading', this.render, this );
    44174439                        this.model.on( 'change:title', this._syncTitle, this );
    44184440                        this.model.on( 'change:caption', this._syncCaption, this );
     
    45174539                toggleSelectionHandler: function( event ) {
    45184540                        var method;
    45194541
     4542                        // Catch enter and space events
     4543                        if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
     4544                                return;
     4545                        }
    45204546                        if ( event.shiftKey ) {
    45214547                                method = 'between';
    45224548                        } else if ( event.ctrlKey || event.metaKey ) {
     
    45734599                                return;
    45744600                        }
    45754601
     4602                        // Fixes bug that loses focus when selecting a featured image
     4603                        if ( !method ) {
     4604                                method = 'add';
     4605                        }
    45764606                        if ( method !== 'add' ) {
    45774607                                method = 'reset';
    45784608                        }
     
    46174647                                return;
    46184648                        }
    46194649
    4620                         this.$el.addClass('selected');
     4650                        this.$el.addClass('selected').attr('aria-checked', true);
    46214651                },
    46224652                /**
    46234653                 * @param {Backbone.Model} model
     
    46324662                        if ( ! selection || ( collection && collection !== selection ) ) {
    46334663                                return;
    46344664                        }
    4635                         this.$el.removeClass('selected');
     4665                        this.$el.removeClass('selected').attr('aria-checked', false);
    46364666                },
    46374667                /**
    46384668                 * @param {Backbone.Model} model
     
    48654895                tagName:   'ul',
    48664896                className: 'attachments',
    48674897
     4898                attributes: {
     4899                        tabIndex: -1
     4900                },
     4901
    48684902                cssTemplate: media.template('attachments-css'),
    48694903
    48704904                events: {
     
    55795613                clear: function( event ) {
    55805614                        event.preventDefault();
    55815615                        this.collection.reset();
     5616
     5617                        // Keep focus inside media modal
     5618                        // after clear link is selected
     5619                        new media.view.FocusManager({
     5620                                el: this.el
     5621                        }).focus();
    55825622                }
    55835623        });
    55845624
     
    59045944
    59055945                initialize: function() {
    59065946                        /**
    5907                          * @member {wp.media.view.FocusManager}
    5908                          */
    5909                         this.focusManager = new media.view.FocusManager({
    5910                                 el: this.el
    5911                         });
    5912                         /**
    59135947                         * call 'initialize' directly on the parent class
    59145948                         */
    59155949                        media.view.Attachment.prototype.initialize.apply( this, arguments );
     
    59225956                         * call 'render' directly on the parent class
    59235957                         */
    59245958                        media.view.Attachment.prototype.render.apply( this, arguments );
    5925                         this.focusManager.focus();
    59265959                        return this;
    59275960                },
    59285961                /**
     
    59335966
    59345967                        if ( confirm( l10n.warnDelete ) ) {
    59355968                                this.model.destroy();
     5969                                // Keep focus inside media modal
     5970                                // after image is deleted
     5971                                new media.view.FocusManager({
     5972                                        el: this.el
     5973                                }).focus();
    59365974                        }
    59375975                },
    59385976                /**
     
    59886026                },
    59896027
    59906028                initialize: function() {
    5991                         /**
    5992                          * @member {wp.media.view.FocusManager}
    5993                          */
    5994                         this.focusManager = new media.view.FocusManager({
    5995                                 el: this.el
    5996                         });
    5997 
    59986029                        this.model.on( 'change:compat', this.render, this );
    59996030                },
    60006031                /**
     
    60216052                        this.views.detach();
    60226053                        this.$el.html( compat.item );
    60236054                        this.views.render();
    6024 
    6025                         this.focusManager.focus();
    60266055                        return this;
    60276056                },
    60286057                /**
  • src/wp-includes/media-template.php

     
    119119        if ( $is_IE && strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') !== false )
    120120                $class .= ' ie7';
    121121        ?>
     122        <!--[if lte IE 8]>
     123        <style>
     124                .attachment:focus {
     125                        outline: #1e8cbe solid;
     126                }
     127                .selected.attachment {
     128                        outline: #1e8cbe solid;
     129                }
     130        </style>
     131        <![endif]-->
    122132        <script type="text/html" id="tmpl-media-frame">
    123133                <div class="media-frame-menu"></div>
    124134                <div class="media-frame-title"></div>
     
    238248                        <# } else if ( 'image' === data.type ) { #>
    239249                                <div class="thumbnail">
    240250                                        <div class="centered">
    241                                                 <img src="{{ data.size.url }}" draggable="false" />
     251                                                <img src="{{ data.size.url }}" draggable="false" alt="" />
    242252                                        </div>
    243253                                </div>
    244254                        <# } else { #>
     
    253263                        <# } #>
    254264
    255265                        <# if ( data.buttons.check ) { #>
    256                                 <a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>"><div class="media-modal-icon"></div></a>
     266                                <a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
    257267                        <# } #>
    258268                </div>
    259269                <#