WordPress.org

Make WordPress Core

Ticket #23560: 23560.9.2.diff

File 23560.9.2.diff, 9.0 KB (added by bramd, 6 years ago)

Refresh of 23560.8

  • 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

     
    18391839                                                } else {
    18401840                                                        frame.close();
    18411841                                                }
     1842
     1843                                                // Keep focus inside media modal
     1844                                                // after canceling a gallery
     1845                                                new media.view.FocusManager({
     1846                                                        el: this.el
     1847                                                }).focus();
    18421848                                        }
    18431849                                },
    18441850                                separateCancel: new media.View({
     
    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                        });
    1967                 },
    1968 
    1969                 featuredImageToolbar: function( toolbar ) {
    19701979                        this.createSelectToolbar( toolbar, {
    19711980                                text:  l10n.setFeaturedImage,
    19721981                                state: this.options.state
     
    22142223                                propagate: true,
    22152224                                freeze:    true
    22162225                        });
     2226                       
     2227                        this.focusManager = new media.view.FocusManager({
     2228                                el: this.el
     2229                        });
    22172230                },
    22182231                /**
    22192232                 * @returns {Object}
     
    22952308                                return this;
    22962309                        }
    22972310
    2298                         this.$el.hide();
     2311                        // Hide modal and remove restricted media modal tab focus once it's closed
     2312                        this.$el.hide().undelegate( 'keydown' );
     2313
     2314                        // Put focus back in useful location once modal is closed
     2315                        $('#wpbody-content').focus();
     2316
    22992317                        this.propagate('close');
    2300 
    2301                         // If the `freeze` option is set, restore the container's scroll position.
    23022318                        if ( freeze ) {
    23032319                                $( window ).scrollTop( freeze.scrollTop );
    23042320                        }
     
    23562372                        if ( 27 === event.which && this.$el.is(':visible') ) {
    23572373                                this.escape();
    23582374                                event.stopImmediatePropagation();
     2375                        } else {
     2376                                // Keep focus inside the media modal
     2377                                this.focusManager;
    23592378                        }
    23602379                }
    23612380        });
     
    23752394                },
    23762395
    23772396                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();
     2397                        // Reset focus on first left menu item
     2398                        $('.media-menu-item').first().focus();
    23872399                },
    23882400                /**
    23892401                 * @param {Object} event
     
    23932405                        if ( 9 !== event.keyCode ) {
    23942406                                return;
    23952407                        }
    2396 
    2397                         // First try to update the index.
    2398                         if ( _.isUndefined( this.index ) ) {
    2399                                 this.updateIndex( event );
     2408                       
     2409                        // Keep tab focus within media modal while it's open
     2410                        if ( event.target === this.tabbablesLast[0] && !event.shiftKey ) {
     2411                                this.tabbableFirst.focus();
     2412                                return false;
     2413                        } else if ( event.target === this.tabbableFirst[0] && event.shiftKey ) {
     2414                                this.tabbablesLast.focus();
     2415                                return false;
    24002416                        }
    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                         }
    24142417                },
    24152418                /**
    24162419                 * @param {Object} event
    24172420                 */
    24182421                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                         }
     2422                        // Resets tabbable elements
     2423                        this.tabbables = $( ':tabbable', this.$el );
     2424                        this.tabbableFirst = this.tabbables.filter( ':first' );
     2425                        this.tabbablesLast  = this.tabbables.filter( ':last' );
    24282426                }
    24292427        });
    24302428
     
    34253423                className: 'attachment',
    34263424                template:  media.template('attachment'),
    34273425
     3426                attributes: {
     3427                        tabIndex: 0,
     3428                        role: 'checkbox'
     3429                },
     3430
    34283431                events: {
    34293432                        'click .attachment-preview':      'toggleSelectionHandler',
    34303433                        'change [data-setting]':          'updateSetting',
     
    34333436                        'change [data-setting] textarea': 'updateSetting',
    34343437                        'click .close':                   'removeFromLibrary',
    34353438                        'click .check':                   'removeFromSelection',
    3436                         'click a':                        'preventDefault'
     3439                        'click a':                        'preventDefault',
     3440                        'keydown':                                                'toggleSelectionHandler'
    34373441                },
    34383442
    34393443                buttons: {},
     
    34413445                initialize: function() {
    34423446                        var selection = this.options.selection;
    34433447
     3448                        this.$el.attr('aria-label', this.model.attributes.title).attr('aria-checked', false);
    34443449                        this.model.on( 'change:sizes change:uploading', this.render, this );
    34453450                        this.model.on( 'change:title', this._syncTitle, this );
    34463451                        this.model.on( 'change:caption', this._syncCaption, this );
     
    35453550                toggleSelectionHandler: function( event ) {
    35463551                        var method;
    35473552
     3553                        // Catch enter and space events
     3554                        if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
     3555                                return;
     3556                        }
    35483557                        if ( event.shiftKey ) {
    35493558                                method = 'between';
    35503559                        } else if ( event.ctrlKey || event.metaKey ) {
     
    35993608                                return;
    36003609                        }
    36013610
     3611                        // Fixes bug that loses focus when selecting a featured image
     3612                        if ( !method ) {
     3613                                method = 'add';
     3614                        }
    36023615                        if ( method !== 'add' ) {
    36033616                                method = 'reset';
    36043617                        }
     
    36423655                                return;
    36433656                        }
    36443657
    3645                         this.$el.addClass('selected');
     3658                        this.$el.addClass('selected').attr('aria-checked', true);
    36463659                },
    36473660                /**
    36483661                 * @param {Backbone.Model} model
     
    36573670                        if ( ! selection || ( collection && collection !== selection ) ) {
    36583671                                return;
    36593672                        }
    3660                         this.$el.removeClass('selected');
     3673                        this.$el.removeClass('selected').attr('aria-checked', false);
    36613674                },
    36623675                /**
    36633676                 * @param {Backbone.Model} model
     
    38903903                tagName:   'ul',
    38913904                className: 'attachments',
    38923905
     3906                attributes: {
     3907                        tabIndex: -1
     3908                },
     3909
    38933910                cssTemplate: media.template('attachments-css'),
    38943911
    38953912                events: {
     
    45764593                clear: function( event ) {
    45774594                        event.preventDefault();
    45784595                        this.collection.reset();
     4596
     4597                        // Keep focus inside media modal
     4598                        // after clear link is selected
     4599                        new media.view.FocusManager({
     4600                                el: this.el
     4601                        }).focus();
    45794602                }
    45804603        });
    45814604
     
    48864909
    48874910                initialize: function() {
    48884911                        /**
    4889                          * @member {wp.media.view.FocusManager}
    4890                          */
    4891                         this.focusManager = new media.view.FocusManager({
    4892                                 el: this.el
    4893                         });
    4894                         /**
    48954912                         * call 'initialize' directly on the parent class
    48964913                         */
    48974914                        media.view.Attachment.prototype.initialize.apply( this, arguments );
     
    49044921                         * call 'render' directly on the parent class
    49054922                         */
    49064923                        media.view.Attachment.prototype.render.apply( this, arguments );
    4907                         this.focusManager.focus();
    49084924                        return this;
    49094925                },
    49104926                /**
     
    49154931
    49164932                        if ( confirm( l10n.warnDelete ) ) {
    49174933                                this.model.destroy();
     4934                                // Keep focus inside media modal
     4935                                // after image is deleted
     4936                                new media.view.FocusManager({
     4937                                        el: this.el
     4938                                }).focus();
    49184939                        }
    49194940                },
    49204941
     
    49514972                },
    49524973
    49534974                initialize: function() {
    4954                         /**
    4955                          * @member {wp.media.view.FocusManager}
    4956                          */
    4957                         this.focusManager = new media.view.FocusManager({
    4958                                 el: this.el
    4959                         });
    4960 
    49614975                        this.model.on( 'change:compat', this.render, this );
    49624976                },
    49634977                /**
     
    49844998                        this.views.detach();
    49854999                        this.$el.html( compat.item );
    49865000                        this.views.render();
    4987 
    4988                         this.focusManager.focus();
    49895001                        return this;
    49905002                },
    49915003                /**
  • 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                <#