WordPress.org

Make WordPress Core

Ticket #23560: 23560.9.diff

File 23560.9.diff, 8.8 KB (added by bramd, 6 years ago)

Refresh of 23560.8.diff

  • 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
     
    674673        user-select:         none;
    675674}
    676675
     676.attachment:focus {
     677        box-shadow: 0px 0px 2pt 2pt #1e8cbe;
     678        outline: none;
     679}
     680
    677681.selected.attachment {
    678682        box-shadow:
    679683                0 0 0 1px #fff,
     
    890894        right: 300px;
    891895        bottom: 0;
    892896        overflow: auto;
     897        outline: none;
    893898}
    894899
    895900.attachments-browser .instructions {
  • src/wp-includes/js/media-views.js

     
    18381838                                                        frame.setState( previous );
    18391839                                                } else {
    18401840                                                        frame.close();
    1841                                                 }
     1841
     1842                                                // Keep focus inside media modal
     1843                                                // after canceling a gallery
     1844                                                new media.view.FocusManager({
     1845                                                        el: this.el
     1846                                                }).focus();
    18421847                                        }
     1848                                        }
    18431849                                },
    18441850                                separateCancel: new media.View({
    18451851                                        className: 'separator',
     
    19621968                                        }) );
    19631969
    19641970                                        this.controller.setState('gallery-edit');
     1971
     1972                                        // Keep focus inside media modal
     1973                                        // after jumping to gallery view
     1974                                        new media.view.FocusManager({
     1975                                                el: this.el
     1976                                        }).focus();
    19651977                                }
    19661978                        });
    19671979                },
     1980                        });
    19681981
    1969                 featuredImageToolbar: function( toolbar ) {
     1982                        this.focusManager = new media.view.FocusManager({
     1983                                el: this.el
     1984                        });
     1985                },
    19701986                        this.createSelectToolbar( toolbar, {
    19711987                                text:  l10n.setFeaturedImage,
    19721988                                state: this.options.state
     
    22952311                                return this;
    22962312                        }
    22972313
    2298                         this.$el.hide();
     2314                        // Hide modal and remove restricted media modal tab focus once it's closed
     2315                        this.$el.hide().undelegate( 'keydown' );
     2316
     2317                        // Put focus back in useful location once modal is closed
     2318                        $('#wpbody-content').focus();
     2319
    22992320                        this.propagate('close');
     2321                        }
    23002322
    2301                         // If the `freeze` option is set, restore the container's scroll position.
     2323                        // Keep focus inside the media modal
     2324                        this.focusManager;
     2325                }
    23022326                        if ( freeze ) {
    23032327                                $( window ).scrollTop( freeze.scrollTop );
    23042328                        }
     
    23752399                },
    23762400
    23772401                focus: function() {
    2378                         if ( _.isUndefined( this.index ) ) {
    2379                                 return;
    2380                         }
    2381 
    2382                         // Update our collection of `$tabbables`.
    2383                         this.$tabbables = this.$(':tabbable');
    2384 
    2385                         // If tab is saved, focus it.
    2386                         this.$tabbables.eq( this.index ).focus();
     2402                        // Reset focus on first left menu item
     2403                        $('.media-menu-item').first().focus();
    23872404                },
    23882405                /**
    23892406                 * @param {Object} event
     
    23932410                        if ( 9 !== event.keyCode ) {
    23942411                                return;
    23952412                        }
    2396 
    2397                         // First try to update the index.
    2398                         if ( _.isUndefined( this.index ) ) {
    2399                                 this.updateIndex( event );
     2413                       
     2414                        // Keep tab focus within media modal while it's open
     2415                        if ( event.target === this.tabbablesLast[0] && !event.shiftKey ) {
     2416                                this.tabbableFirst.focus();
     2417                                return false;
     2418                        } else if ( event.target === this.tabbableFirst[0] && event.shiftKey ) {
     2419                                this.tabbablesLast.focus();
     2420                                return false;
    24002421                        }
    2401 
    2402                         // If we still don't have an index, bail.
    2403                         if ( _.isUndefined( this.index ) ) {
    2404                                 return;
    2405                         }
    2406 
    2407                         var index = this.index + ( event.shiftKey ? -1 : 1 );
    2408 
    2409                         if ( index >= 0 && index < this.$tabbables.length ) {
    2410                                 this.index = index;
    2411                         } else {
    2412                                 delete this.index;
    2413                         }
    24142422                },
    24152423                /**
    24162424                 * @param {Object} event
    24172425                 */
    24182426                updateIndex: function( event ) {
    2419                         this.$tabbables = this.$(':tabbable');
    2420 
    2421                         var index = this.$tabbables.index( event.target );
    2422 
    2423                         if ( -1 === index ) {
    2424                                 delete this.index;
    2425                         } else {
    2426                                 this.index = index;
    2427                         }
     2427                        // Resets tabbable elements
     2428                        this.tabbables = $( ':tabbable', this.$el );
     2429                        this.tabbableFirst = this.tabbables.filter( ':first' );
     2430                        this.tabbablesLast  = this.tabbables.filter( ':last' );
    24282431                }
    24292432        });
    24302433
     
    34253428                className: 'attachment',
    34263429                template:  media.template('attachment'),
    34273430
     3431                attributes: {
     3432                        tabIndex: 0,
     3433                        role: 'checkbox'
     3434                },
     3435
    34283436                events: {
    34293437                        'click .attachment-preview':      'toggleSelectionHandler',
    34303438                        'change [data-setting]':          'updateSetting',
     
    34333441                        'change [data-setting] textarea': 'updateSetting',
    34343442                        'click .close':                   'removeFromLibrary',
    34353443                        'click .check':                   'removeFromSelection',
    3436                         'click a':                        'preventDefault'
     3444                        'click a':                        'preventDefault',
     3445                        'keydown':                                                'toggleSelectionHandler'
    34373446                },
    34383447
    34393448                buttons: {},
     
    34413450                initialize: function() {
    34423451                        var selection = this.options.selection;
    34433452
     3453                        this.$el.attr('aria-label', this.model.attributes.title).attr('aria-checked', false);
    34443454                        this.model.on( 'change:sizes change:uploading', this.render, this );
    34453455                        this.model.on( 'change:title', this._syncTitle, this );
    34463456                        this.model.on( 'change:caption', this._syncCaption, this );
     
    35453555                toggleSelectionHandler: function( event ) {
    35463556                        var method;
    35473557
     3558                        // Catch enter and space events
     3559                        if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
     3560                                return;
     3561                        }
    35483562                        if ( event.shiftKey ) {
    35493563                                method = 'between';
    35503564                        } else if ( event.ctrlKey || event.metaKey ) {
     
    35993613                                return;
    36003614                        }
    36013615
     3616                        // Fixes bug that loses focus when selecting a featured image
     3617                        if ( !method ) {
     3618                                method = 'add';
     3619                        }
    36023620                        if ( method !== 'add' ) {
    36033621                                method = 'reset';
    36043622                        }
     
    36423660                                return;
    36433661                        }
    36443662
    3645                         this.$el.addClass('selected');
     3663                        this.$el.addClass('selected').attr('aria-checked', true);
    36463664                },
    36473665                /**
    36483666                 * @param {Backbone.Model} model
     
    36573675                        if ( ! selection || ( collection && collection !== selection ) ) {
    36583676                                return;
    36593677                        }
    3660                         this.$el.removeClass('selected');
     3678                        this.$el.removeClass('selected').attr('aria-checked', false);
    36613679                },
    36623680                /**
    36633681                 * @param {Backbone.Model} model
     
    38903908                tagName:   'ul',
    38913909                className: 'attachments',
    38923910
     3911                attributes: {
     3912                        tabIndex: -1
     3913                },
     3914
    38933915                cssTemplate: media.template('attachments-css'),
    38943916
    38953917                events: {
     
    45764598                clear: function( event ) {
    45774599                        event.preventDefault();
    45784600                        this.collection.reset();
     4601
     4602                        // Keep focus inside media modal
     4603                        // after clear link is selected
     4604                        new media.view.FocusManager({
     4605                                el: this.el
     4606                        }).focus();
    45794607                }
    45804608        });
    45814609
     
    48864914
    48874915                initialize: function() {
    48884916                        /**
    4889                          * @member {wp.media.view.FocusManager}
    4890                          */
    4891                         this.focusManager = new media.view.FocusManager({
    4892                                 el: this.el
    4893                         });
    4894                         /**
    48954917                         * call 'initialize' directly on the parent class
    48964918                         */
    48974919                        media.view.Attachment.prototype.initialize.apply( this, arguments );
     
    49044926                         * call 'render' directly on the parent class
    49054927                         */
    49064928                        media.view.Attachment.prototype.render.apply( this, arguments );
    4907                         this.focusManager.focus();
    49084929                        return this;
    49094930                },
    49104931                /**
     
    49154936
    49164937                        if ( confirm( l10n.warnDelete ) ) {
    49174938                                this.model.destroy();
     4939                                // Keep focus inside media modal
     4940                                // after image is deleted
     4941                                new media.view.FocusManager({
     4942                                        el: this.el
     4943                                }).focus();
    49184944                        }
    49194945                },
    49204946
     
    49514977                },
    49524978
    49534979                initialize: function() {
    4954                         /**
    4955                          * @member {wp.media.view.FocusManager}
    4956                          */
    4957                         this.focusManager = new media.view.FocusManager({
    4958                                 el: this.el
    4959                         });
    4960 
    49614980                        this.model.on( 'change:compat', this.render, this );
    49624981                },
    49634982                /**
     
    49845003                        this.views.detach();
    49855004                        this.$el.html( compat.item );
    49865005                        this.views.render();
    4987 
    4988                         this.focusManager.focus();
    49895006                        return this;
    49905007                },
    49915008                /**
  • src/wp-includes/media-template.php

     
    1818        if ( $is_IE && strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') !== false )
    1919                $class .= ' ie7';
    2020        ?>
     21        <!--[if lte IE 8]>
     22        <style>
     23                .attachment:focus {
     24                        outline: #1e8cbe solid;
     25                }
     26                .selected.attachment {
     27                        outline: #1e8cbe solid;
     28                }
     29        </style>
     30        <![endif]-->
    2131        <script type="text/html" id="tmpl-media-frame">
    2232                <div class="media-frame-menu"></div>
    2333                <div class="media-frame-title"></div>
     
    142152                        <# } else if ( 'image' === data.type ) { #>
    143153                                <div class="thumbnail">
    144154                                        <div class="centered">
    145                                                 <img src="{{ data.size.url }}" draggable="false" />
     155                                                <img src="{{ data.size.url }}" draggable="false" alt="" />
    146156                                        </div>
    147157                                </div>
    148158                        <# } else { #>
     
    157167                        <# } #>
    158168
    159169                        <# if ( data.buttons.check ) { #>
    160                                 <a class="check" href="#" title="<?php _e('Deselect'); ?>"><div class="media-modal-icon"></div></a>
     170                                <a class="check" href="#" title="<?php _e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
    161171                        <# } #>
    162172                </div>
    163173                <#