WordPress.org

Make WordPress Core

Ticket #23560: 23560.8.diff

File 23560.8.diff, 8.5 KB (added by lessbloat, 6 years ago)
  • wp-includes/js/media-views.js

     
    13751375                                                        frame.setState( previous );
    13761376                                                else
    13771377                                                        frame.close();
     1378
     1379                                                // Keep focus inside media modal
     1380                                                // after canceling a gallery
     1381                                                new media.view.FocusManager({
     1382                                                        el: this.el
     1383                                                }).focus();
    13781384                                        }
    13791385                                },
    13801386                                separateCancel: new media.View({
     
    14851491                                        }) );
    14861492
    14871493                                        this.controller.setState('gallery-edit');
     1494
     1495                                        // Keep focus inside media modal
     1496                                        // after jumping to gallery view
     1497                                        new media.view.FocusManager({
     1498                                                el: this.el
     1499                                        }).focus();
    14881500                                }
    14891501                        });
    14901502                },
     
    15771589                                propagate: true,
    15781590                                freeze:    true
    15791591                        });
     1592
     1593                        this.focusManager = new media.view.FocusManager({
     1594                                el: this.el
     1595                        });
    15801596                },
    15811597
    15821598                prepare: function() {
     
    16371653                        if ( ! this.views.attached || ! this.$el.is(':visible') )
    16381654                                return this;
    16391655
    1640                         this.$el.hide();
     1656                        // Hide modal and remove restricted media modal tab focus once it's closed
     1657                        this.$el.hide().undelegate( 'keydown' );
     1658
     1659                        // Put focus back in useful location once modal is closed
     1660                        $('#wpbody-content').focus();
     1661
    16411662                        this.propagate('close');
    16421663
    16431664                        // If the `freeze` option is set, restore the container's scroll position.
     
    16831704                                this.escape();
    16841705                                return;
    16851706                        }
     1707
     1708                        // Keep focus inside the media modal
     1709                        this.focusManager;
    16861710                }
    16871711        });
    16881712
     
    16951719                },
    16961720
    16971721                focus: function() {
    1698                         if ( _.isUndefined( this.index ) )
    1699                                 return;
    1700 
    1701                         // Update our collection of `$tabbables`.
    1702                         this.$tabbables = this.$(':tabbable');
    1703 
    1704                         // If tab is saved, focus it.
    1705                         this.$tabbables.eq( this.index ).focus();
     1722                        // Reset focus on first left menu item
     1723                        $('.media-menu-item').first().focus();
    17061724                },
    17071725
    17081726                recordTab: function( event ) {
     
    17101728                        if ( 9 !== event.keyCode )
    17111729                                return;
    17121730
    1713                         // First try to update the index.
    1714                         if ( _.isUndefined( this.index ) )
    1715                                 this.updateIndex( event );
    1716 
    1717                         // If we still don't have an index, bail.
    1718                         if ( _.isUndefined( this.index ) )
    1719                                 return;
    1720 
    1721                         var index = this.index + ( event.shiftKey ? -1 : 1 );
    1722 
    1723                         if ( index >= 0 && index < this.$tabbables.length )
    1724                                 this.index = index;
    1725                         else
    1726                                 delete this.index;
     1731                        // Keep tab focus within media modal while it's open
     1732                        if ( event.target === this.tabbablesLast[0] && !event.shiftKey ) {
     1733                                this.tabbableFirst.focus();
     1734                                return false;
     1735                        } else if ( event.target === this.tabbableFirst[0] && event.shiftKey ) {
     1736                                this.tabbablesLast.focus();
     1737                                return false;
     1738                        }
    17271739                },
    17281740
    17291741                updateIndex: function( event ) {
    1730                         this.$tabbables = this.$(':tabbable');
    1731 
    1732                         var index = this.$tabbables.index( event.target );
    1733 
    1734                         if ( -1 === index )
    1735                                 delete this.index;
    1736                         else
    1737                                 this.index = index;
     1742                        // Resets tabbable elements
     1743                        this.tabbables = $( ':tabbable', this.$el );
     1744                        this.tabbableFirst = this.tabbables.filter( ':first' );
     1745                        this.tabbablesLast  = this.tabbables.filter( ':last' );
    17381746                }
    17391747        });
    17401748
     
    24932501                className: 'attachment',
    24942502                template:  media.template('attachment'),
    24952503
     2504                attributes: {
     2505                        tabIndex: 0,
     2506                        role: 'checkbox'
     2507                },
     2508
    24962509                events: {
    24972510                        'click .attachment-preview':      'toggleSelectionHandler',
    24982511                        'change [data-setting]':          'updateSetting',
     
    25012514                        'change [data-setting] textarea': 'updateSetting',
    25022515                        'click .close':                   'removeFromLibrary',
    25032516                        'click .check':                   'removeFromSelection',
    2504                         'click a':                        'preventDefault'
     2517                        'click a':                        'preventDefault',
     2518                        'keydown':                                                'toggleSelectionHandler'
    25052519                },
    25062520
    25072521                buttons: {},
     
    25092523                initialize: function() {
    25102524                        var selection = this.options.selection;
    25112525
     2526                        this.$el.attr('aria-label', this.model.attributes.title).attr('aria-checked', false);
    25122527                        this.model.on( 'change:sizes change:uploading', this.render, this );
    25132528                        this.model.on( 'change:title', this._syncTitle, this );
    25142529                        this.model.on( 'change:caption', this._syncCaption, this );
     
    25992614                toggleSelectionHandler: function( event ) {
    26002615                        var method;
    26012616
     2617                        // Catch enter and space events
     2618                        if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode )
     2619                                return;
     2620
    26022621                        if ( event.shiftKey )
    26032622                                method = 'between';
    26042623                        else if ( event.ctrlKey || event.metaKey )
     
    26472666                                return;
    26482667                        }
    26492668
     2669                        // Fixes bug that loses focus when selecting a featured image
     2670                        if ( !method )
     2671                                method = 'add';
     2672
    26502673                        if ( method !== 'add' )
    26512674                                method = 'reset';
    26522675
     
    26822705                        if ( ! selection || ( collection && collection !== selection ) )
    26832706                                return;
    26842707
    2685                         this.$el.addClass('selected');
     2708                        this.$el.addClass('selected').attr('aria-checked', true);
    26862709                },
    26872710
    26882711                deselect: function( model, collection ) {
     
    26942717                        if ( ! selection || ( collection && collection !== selection ) )
    26952718                                return;
    26962719
    2697                         this.$el.removeClass('selected');
     2720                        this.$el.removeClass('selected').attr('aria-checked', false);
    26982721                },
    26992722
    27002723                details: function( model, collection ) {
     
    28762899                tagName:   'ul',
    28772900                className: 'attachments',
    28782901
     2902                attributes: {
     2903                        tabIndex: -1
     2904                },
     2905
    28792906                cssTemplate: media.template('attachments-css'),
    28802907
    28812908                events: {
     
    34883515                clear: function( event ) {
    34893516                        event.preventDefault();
    34903517                        this.collection.reset();
     3518
     3519                        // Keep focus inside media modal
     3520                        // after clear link is selected
     3521                        new media.view.FocusManager({
     3522                                el: this.el
     3523                        }).focus();
    34913524                }
    34923525        });
    34933526
     
    37313764                },
    37323765
    37333766                initialize: function() {
    3734                         this.focusManager = new media.view.FocusManager({
    3735                                 el: this.el
    3736                         });
    3737 
    37383767                        media.view.Attachment.prototype.initialize.apply( this, arguments );
    37393768                },
    37403769
    37413770                render: function() {
    37423771                        media.view.Attachment.prototype.render.apply( this, arguments );
    3743                         this.focusManager.focus();
    37443772                        return this;
    37453773                },
    37463774
     
    37493777
    37503778                        if ( confirm( l10n.warnDelete ) )
    37513779                                this.model.destroy();
     3780
     3781                        // Keep focus inside media modal
     3782                        // after image is deleted
     3783                        new media.view.FocusManager({
     3784                                el: this.el
     3785                        }).focus();
    37523786                },
    37533787
    37543788                editAttachment: function() {
     
    37773811                },
    37783812
    37793813                initialize: function() {
    3780                         this.focusManager = new media.view.FocusManager({
    3781                                 el: this.el
    3782                         });
    3783 
    37843814                        this.model.on( 'change:compat', this.render, this );
    37853815                },
    37863816
     
    37993829                        this.views.detach();
    38003830                        this.$el.html( compat.item );
    38013831                        this.views.render();
    3802 
    3803                         this.focusManager.focus();
    38043832                        return this;
    38053833                },
    38063834
  • 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                <#
  • wp-includes/css/media-views.css

     
    460460        border-right: 0;
    461461}
    462462
    463 .media-router > a:active,
    464 .media-router > a:focus {
     463.media-router > a:active {
    465464        outline: none;
    466465}
    467466
     
    654653        user-select:         none;
    655654}
    656655
     656.attachment:focus {
     657        box-shadow: 0px 0px 2pt 2pt #1e8cbe;
     658        outline: none;
     659}
     660
    657661.selected.attachment {
    658662        box-shadow:
    659663                0 0 0 1px #fff,
     
    855859        right: 300px;
    856860        bottom: 0;
    857861        overflow: auto;
     862        outline: none;
    858863}
    859864
    860865.attachments-browser .instructions {