WordPress.org

Make WordPress Core

Ticket #23560: 23560.14.diff

File 23560.14.diff, 6.9 KB (added by celloexpressions, 5 years ago)

Set focus as if a newly uploaded attachment was selected (which it is, automatically), when uploading.

  • src/wp-includes/css/media-views.css

     
    723723                0 0 0 3px #ccc;
    724724}
    725725
     726.selected.attachment:focus {
     727        -webkit-box-shadow: 0 0 0 1px #fff,
     728         0 0 0 5px #1e8cbe;
     729        box-shadow: 0 0 0 1px #fff,
     730         0 0 0 5px #1e8cbe;
     731}
     732
    726733.attachment-preview {
    727734        position: relative;
    728735        width: 199px;
     
    913920}
    914921
    915922.attachment.details .check,
     923.attachment.selected .check:focus,
    916924.media-grid-view .attachment.selected .check {
    917925        background-color: #1e8cbe;
    918926        -webkit-box-shadow: 0 0 0 1px #fff,
     
    935943}
    936944
    937945.attachment.details .check:hover div,
     946.attachment.selected .check:focus div,
    938947.media-grid-view .attachment.selected .check:hover div {
    939948        background-position: -60px 0;
    940949}
     
    14781487        box-shadow: none;
    14791488}
    14801489
     1490.attachment.selection.selected:focus {
     1491        webkit-box-shadow: 0 0 0 1px #5b9dd9,
     1492         0 0 2px 2px #5b9dd9;
     1493        box-shadow: 0 0 0 1px #5b9dd9,
     1494         0 0 2px 2px #5b9dd9;
     1495        outline: none;
     1496}
     1497
    14811498.attachment.selection.details {
    14821499        -webkit-box-shadow:
    14831500                0 0 0 1px #fff,
  • src/wp-includes/js/media-views.js

     
    758758                                this.frame.content.mode('browse');
    759759                        }
    760760                        this.get('selection').add( attachment );
     761
     762                        // Set focus back to where it goes when an attachment is selected.
     763                        $( '.attachments-browser .attachments .attachment' ).first().focus();
    761764                },
    762765
    763766                /**
     
    32213224                                };
    32223225                        }
    32233226
    3224                         $el.show().focus();
     3227                        $el.show().find( '.media-modal-close' ).focus();
    32253228                        return this.propagate('open');
    32263229                },
    32273230
     
    33023305                        if ( 27 === event.which && this.$el.is(':visible') ) {
    33033306                                this.escape();
    33043307                                event.stopImmediatePropagation();
    3305                         } else {
    3306                                 // Keep focus inside the media modal
    3307                                 this.focusManager;
    33083308                        }
    33093309                }
    33103310        });
     
    44044404                        } else {
    44054405                                this.click();
    44064406                        }
     4407
     4408                        // When selecting a tab along the left side,
     4409                        // focus should be transferred into the main panel
     4410                        $('.media-frame-content').find( ':focusable' ).first().focus();
    44074411                },
    44084412
    44094413                click: function() {
     
    47354739                 */
    47364740                toggleSelectionHandler: function( event ) {
    47374741                        var method;
     4742
     4743                        // Catch arrow events
     4744                        if ( 37 === event.keyCode || 38 === event.keyCode || 39 === event.keyCode || 40 === event.keyCode ) {
     4745                                this.arrowEvent(event);
     4746                                return;
     4747                        }
     4748
    47384749                        // Catch enter and space events
    47394750                        if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
    47404751                                return;
     
    47574768                        });
    47584769                },
    47594770                /**
     4771                 * @param {Object} event
     4772                 */
     4773                arrowEvent: function( event ) {
     4774                        var attachment = $('.attachments-browser .attachment'),
     4775                                attachmentsWidth = $('.attachments-browser .attachments').width(),
     4776                                thumbnailWidth = attachment.first().innerWidth() + 16,
     4777                                thumbnailsPerRow = Math.floor(attachmentsWidth/thumbnailWidth),
     4778                                totalThumnails = attachment.length,
     4779                                totalRows = Math.ceil(totalThumnails/thumbnailsPerRow),
     4780                                thisIndex = attachment.filter( ':focus' ).index(),
     4781                                thisIndexAdjusted = thisIndex + 1,
     4782                                thisRow = thisIndexAdjusted <= thumbnailsPerRow ? 1 : Math.ceil(thisIndexAdjusted/thumbnailsPerRow);
     4783
     4784                                // Left arrow
     4785                                if ( 37 === event.keyCode ) {
     4786                                        if ( 0 === thisIndex ) {
     4787                                                return;
     4788                                        }
     4789                                        attachment.eq( thisIndex - 1 ).focus();
     4790                                }
     4791
     4792                                // Up arrow
     4793                                if ( 38 === event.keyCode ) {
     4794                                        if ( 1 === thisRow ) {
     4795                                                return;
     4796                                        }
     4797                                        attachment.eq( thisIndex - thumbnailsPerRow ).focus();
     4798                                }
     4799
     4800                                // Right arrow
     4801                                if ( 39 === event.keyCode ) {
     4802                                        if ( totalThumnails === thisIndex ) {
     4803                                                return;
     4804                                        }
     4805                                        attachment.eq( thisIndex + 1 ).focus();
     4806                                }
     4807
     4808                                // Down arrow
     4809                                if ( 40 === event.keyCode ) {
     4810                                        if ( totalRows === thisRow ) {
     4811                                                return;
     4812                                        }
     4813                                        attachment.eq( thisIndex + thumbnailsPerRow ).focus();
     4814                                }
     4815
     4816                                return false;
     4817                },
     4818                /**
    47604819                 * @param {Object} options
    47614820                 */
    47624821                toggleSelection: function( options ) {
     
    47924851
    47934852                                selection.add( models );
    47944853                                selection.single( model );
     4854
     4855                                // When selecting attachments, focus should be transferred to the right details panel
     4856                                $('.attachment-details').find( ':focusable' ).first().focus();
     4857
    47954858                                return;
    47964859
    47974860                        // If the `method` is set to `toggle`, just flip the selection
     
    47994862                        } else if ( 'toggle' === method ) {
    48004863                                selection[ this.selected() ? 'remove' : 'add' ]( model );
    48014864                                selection.single( model );
     4865
     4866                                if ( this.selected() ) {
     4867                                        // When selecting an attachment, focus should be transferred to the right details panel
     4868                                        $('.attachment-details').find( ':focusable' ).first().focus();
     4869                                }
     4870
    48024871                                return;
    48034872                        }
    48044873
     
    48504919                                return;
    48514920                        }
    48524921
    4853                         this.$el.addClass('selected').attr('aria-checked', true);
     4922                        this.$el.addClass( 'selected' ).attr( 'aria-checked', true )
     4923                                        .find( '.check' ).attr( 'tabindex', '0' );
     4924
     4925                        // When selecting an attachment, focus should be transferred to the right details panel
     4926                        $('.attachment-details').find( ':focusable' ).first().focus();
    48544927                },
    48554928                /**
    48564929                 * @param {Backbone.Model} model
     
    48654938                        if ( ! selection || ( collection && collection !== selection ) ) {
    48664939                                return;
    48674940                        }
    4868                         this.$el.removeClass('selected').attr('aria-checked', false);
     4941                        this.$el.removeClass( 'selected' ).attr( 'aria-checked', false )
     4942                                        .find( '.check' ).attr( 'tabindex', '-1' );
    48694943                },
    48704944                /**
    48714945                 * @param {Backbone.Model} model
     
    50275101                        event.stopPropagation();
    50285102                        if ( selection.where( { id: this.model.get( 'id' ) } ).length ) {
    50295103                                selection.remove( this.model );
     5104                                // Move focus back to the attachment tile (from the check).
     5105                                this.$el.focus();
    50305106                        } else {
    50315107                                selection.add( this.model );
    50325108                        }
     
    62376313                        'click .delete-attachment':       'deleteAttachment',
    62386314                        'click .trash-attachment':        'trashAttachment',
    62396315                        'click .edit-attachment':         'editAttachment',
    6240                         'click .refresh-attachment':      'refreshAttachment'
     6316                        'click .refresh-attachment':      'refreshAttachment',
     6317                        'keydown':                        'toggleSelectionHandler'
    62416318                },
    62426319
    62436320                initialize: function() {
     
    63006377                        this.$el.removeClass('needs-refresh');
    63016378                        event.preventDefault();
    63026379                        this.model.fetch();
     6380                },
     6381                /**
     6382                 * @param {Object} event
     6383                 */
     6384                toggleSelectionHandler: function( event ) {
     6385                        // Reverse tabbing out of the right details panel
     6386                        // should take me back to the item in the list that was being edited.
     6387                        if ( 'keydown' === event.type && 9 === event.keyCode && event.shiftKey && event.target === $( ':tabbable', this.$el ).filter( ':first' )[0] ) {
     6388                                $('.attachments-browser .details').focus();
     6389                                return false;
     6390                        }
    63036391                }
    63046392
    63056393        });