WordPress.org

Make WordPress Core

Ticket #22502: 22502.6.diff

File 22502.6.diff, 6.7 KB (added by koopersmith, 17 months ago)
  • wp-includes/css/media-views.css

     
    366366        user-select: none; 
    367367} 
    368368 
    369 .media-menu li { 
     369.media-menu .media-menu-item { 
     370        display: block; 
    370371        position: relative; 
    371372        padding: 4px 20px; 
    372373        margin: 0; 
    373374        line-height: 18px; 
    374375        font-size: 14px; 
    375         color: #21759B; 
    376376        text-shadow: 0 1px 0 #fff; 
     377        text-decoration: none; 
    377378} 
    378379 
    379 .media-menu-item { 
    380         cursor: pointer; 
    381 } 
    382  
    383 .media-menu li:hover { 
     380.media-menu .media-menu-item:hover, 
     381.media-menu .media-menu-item:focus { 
     382        color: #21759B; 
     383        background: #f1f1f1; 
    384384        background: rgba( 0, 0, 0, 0.04 ); 
     385        outline: none; 
    385386} 
    386387 
    387 .media-menu .active, 
    388 .media-menu .active:hover { 
     388.media-menu .media-menu-item.active, 
     389.media-menu .media-menu-item.active:hover { 
    389390        color: #333; 
    390391        font-weight: bold; 
    391392} 
     
    506507                0 0 0 5px #1e8cbe; 
    507508} 
    508509 
     510.attachment:focus { 
     511        outline: 1px solid #999; 
     512        outline-offset: 1px; 
     513} 
     514 
     515.attachment:active { 
     516        outline: none; 
     517} 
     518 
     519.selected.attachment:focus { 
     520        outline-offset: 3px; 
     521} 
     522 
     523.details.attachment:focus { 
     524        outline: 1px solid #333; 
     525        outline-offset: 4px; 
     526} 
     527 
    509528.attachment-preview { 
    510529        position: relative; 
    511530        width: 199px; 
     
    683702        background-position: -60px 0; 
    684703} 
    685704 
    686 .media-frame .describe { 
     705.media-frame input.describe { 
    687706        position: relative; 
    688707        display: block; 
    689708        width: 100%; 
     
    10701089                0 0 0 3px #1e8cbe; 
    10711090} 
    10721091 
     1092.attachment.selection:focus { 
     1093        outline: 1px solid #999; 
     1094        outline-offset: 1px; 
     1095} 
     1096 
     1097.attachment.selection.details:focus { 
     1098        outline: 1px solid #333; 
     1099        outline-offset: 3px; 
     1100} 
     1101 
    10731102.media-selection:after { 
    10741103        content: ''; 
    10751104        display: block; 
     
    13591388                width: 119px; 
    13601389        } 
    13611390 
    1362         .media-menu li { 
     1391        .media-menu .media-menu-item { 
    13631392                padding: 4px 10px; 
    13641393        } 
    13651394 
  • wp-includes/js/media-editor.js

     
    548548                                workflow.open(); 
    549549                        else 
    550550                                workflow = wp.media.editor.add( id ); 
    551  
     551                         
     552                        // Add focus to modal 
     553                        $( '.media-menu .active' ).focus(); 
     554                         
    552555                        return workflow; 
    553556                } 
    554557        }; 
  • wp-includes/js/media-views.js

     
    16471647                tagName:  'div', 
    16481648                template: media.template('media-modal'), 
    16491649 
     1650                attributes: { 
     1651                        tabindex: 0 
     1652                }, 
     1653 
    16501654                events: { 
    1651                         'click .media-modal-backdrop, .media-modal-close' : 'closeHandler' 
     1655                        'click .media-modal-backdrop, .media-modal-close': 'closeHandler', 
     1656                        'keydown': 'keydown' 
    16521657                }, 
    16531658 
    16541659                initialize: function() { 
     
    16591664                                title:     '', 
    16601665                                propagate: true 
    16611666                        }); 
     1667 
     1668                        _.bindAll( this, '_captureBodyKeydown' ); 
    16621669                }, 
    16631670 
    16641671                render: function() { 
     
    16891696                }, 
    16901697 
    16911698                open: function() { 
     1699                        document.addEventListener( 'keydown', this._captureBodyKeydown, true ); 
    16921700                        this.$el.show(); 
    16931701                        return this.propagate('open'); 
    16941702                }, 
    16951703 
    16961704                close: function() { 
     1705                        document.removeEventListener( 'keydown', this._captureBodyKeydown, true ); 
    16971706                        this.$el.hide(); 
    16981707                        return this.propagate('close'); 
    16991708                }, 
     
    17221731                                this.controller.trigger( id ); 
    17231732 
    17241733                        return this; 
     1734                }, 
     1735 
     1736                // Thanks to jQuery UI dialog, which also limits tabbing to a modal 
     1737                // window. The `:tabbable` expression, `$.ui.keyCode` object, and 
     1738                // the overloaded `$.fn.focus( delay )` signature are all from the 
     1739                // jQuery UI core. 
     1740                keydown: function( event ) { 
     1741                        var tabbables, first, last; 
     1742 
     1743                        // Close the modal when escape is pressed. 
     1744                        if ( $.ui.keyCode.ESCAPE === event.which ) { 
     1745                                event.preventDefault(); 
     1746                                this.close(); 
     1747                                return; 
     1748                        } 
     1749 
     1750                        // Prevent tabbing outside of the modal. 
     1751                        if ( event.keyCode !== $.ui.keyCode.TAB ) 
     1752                                return; 
     1753 
     1754                        tabbables = this.$(':tabbable'); 
     1755                        first     = tabbables.filter(':first'); 
     1756                        last      = tabbables.filter(':last'); 
     1757 
     1758                        // If we attempt to tab past the last tabbable element, skip 
     1759                        // straight to the first tabbable element (and vice versa). 
     1760                        if ( event.target === last[0] && ! event.shiftKey ) { 
     1761                                first.focus( 1 ); 
     1762                                return false; 
     1763                        } else if ( event.target === first[0] && event.shiftKey ) { 
     1764                                last.focus( 1 ); 
     1765                                return false; 
     1766                        } 
     1767                }, 
     1768 
     1769                // If the focus somehow escapes the modal, restores focus to the 
     1770                // first focusable element inside the modal. 
     1771                // 
     1772                // Captures the document's keydown event when the modal is open. 
     1773                _captureBodyKeydown: function() { 
     1774                        if ( event.keyCode !== $.ui.keyCode.TAB ) 
     1775                                return; 
     1776 
     1777                        if ( ! $.contains( this.el, document.activeElement ) ) 
     1778                                this.$(':tabbable').first().focus( 1 ); 
    17251779                } 
    17261780        }); 
    17271781 
     
    23542408         * wp.media.view.Menu 
    23552409         */ 
    23562410        media.view.Menu = media.view.PriorityList.extend({ 
    2357                 tagName:   'ul', 
    23582411                className: 'media-menu', 
    23592412 
    23602413                toView: function( options, state ) { 
     
    23792432        }); 
    23802433 
    23812434        media.view.MenuItem = media.View.extend({ 
    2382                 tagName:   'li', 
     2435                tagName:   'a', 
    23832436                className: 'media-menu-item', 
    23842437 
     2438                attributes: { 
     2439                        href: '#' 
     2440                }, 
     2441 
    23852442                events: { 
    23862443                        'click': 'click' 
    23872444                }, 
    23882445 
    2389                 click: function() { 
     2446                click: function( event ) { 
    23902447                        var options = this.options; 
    23912448 
     2449                        event.preventDefault(); 
     2450 
    23922451                        if ( options.click ) 
    23932452                                options.click.call( this ); 
    23942453                        else if ( options.state ) 
     
    24222481                className: 'attachment', 
    24232482                template:  media.template('attachment'), 
    24242483 
     2484                attributes: { 
     2485                        tabindex: 0 
     2486                }, 
     2487 
    24252488                events: { 
    24262489                        'click .attachment-preview':      'toggleSelection', 
     2490                        'keydown .attachment-preview':    'keydown', 
    24272491                        'change [data-setting]':          'updateSetting', 
    24282492                        'change [data-setting] input':    'updateSetting', 
    24292493                        'change [data-setting] select':   'updateSetting', 
     
    25002564                                this.$bar.width( this.model.get('percent') + '%' ); 
    25012565                }, 
    25022566 
    2503                 toggleSelection: function( event ) { 
     2567                keydown: function( event ) { 
     2568                        if ( $.ui.keyCode.ENTER === event.keyCode ) 
     2569                                this.toggleSelection(); 
     2570                }, 
     2571 
     2572                toggleSelection: function() { 
    25042573                        var selection = this.options.selection, 
    25052574                                model = this.model; 
    25062575 
  • wp-includes/media.php

     
    16241624                        <# } #> 
    16251625 
    16261626                        <# if ( data.buttons.check ) { #> 
    1627                                 <a class="check" href="#" title="<?php _e('Deselect'); ?>"><div class="media-modal-icon"></div></a> 
     1627                                <a class="check" href="#" title="<?php _e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a> 
    16281628                        <# } #> 
    16291629                </div> 
    16301630                <# if ( data.describe ) { #>