Ticket #23560: 23560.9.2.diff
File 23560.9.2.diff, 9.0 KB (added by , 6 years ago) |
---|
-
src/wp-includes/css/media-views.css
478 478 border-right: 0; 479 479 } 480 480 481 .media-router > a:active, 482 .media-router > a:focus { 481 .media-router > a:active { 483 482 outline: none; 484 483 } 485 484 … … 674 673 user-select: none; 675 674 } 676 675 676 .attachment:focus { 677 box-shadow: 0px 0px 2pt 2pt #1e8cbe; 678 outline: none; 679 } 680 677 681 .selected.attachment { 678 682 box-shadow: 679 683 0 0 0 1px #fff, … … 890 894 right: 300px; 891 895 bottom: 0; 892 896 overflow: auto; 897 outline: none; 893 898 } 894 899 895 900 .attachments-browser .instructions { -
src/wp-includes/js/media-views.js
1839 1839 } else { 1840 1840 frame.close(); 1841 1841 } 1842 1843 // Keep focus inside media modal 1844 // after canceling a gallery 1845 new media.view.FocusManager({ 1846 el: this.el 1847 }).focus(); 1842 1848 } 1843 1849 }, 1844 1850 separateCancel: new media.View({ … … 1962 1968 }) ); 1963 1969 1964 1970 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(); 1965 1977 } 1966 1978 }); 1967 },1968 1969 featuredImageToolbar: function( toolbar ) {1970 1979 this.createSelectToolbar( toolbar, { 1971 1980 text: l10n.setFeaturedImage, 1972 1981 state: this.options.state … … 2214 2223 propagate: true, 2215 2224 freeze: true 2216 2225 }); 2226 2227 this.focusManager = new media.view.FocusManager({ 2228 el: this.el 2229 }); 2217 2230 }, 2218 2231 /** 2219 2232 * @returns {Object} … … 2295 2308 return this; 2296 2309 } 2297 2310 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 2299 2317 this.propagate('close'); 2300 2301 // If the `freeze` option is set, restore the container's scroll position.2302 2318 if ( freeze ) { 2303 2319 $( window ).scrollTop( freeze.scrollTop ); 2304 2320 } … … 2356 2372 if ( 27 === event.which && this.$el.is(':visible') ) { 2357 2373 this.escape(); 2358 2374 event.stopImmediatePropagation(); 2375 } else { 2376 // Keep focus inside the media modal 2377 this.focusManager; 2359 2378 } 2360 2379 } 2361 2380 }); … … 2375 2394 }, 2376 2395 2377 2396 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(); 2387 2399 }, 2388 2400 /** 2389 2401 * @param {Object} event … … 2393 2405 if ( 9 !== event.keyCode ) { 2394 2406 return; 2395 2407 } 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; 2400 2416 } 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 }2414 2417 }, 2415 2418 /** 2416 2419 * @param {Object} event 2417 2420 */ 2418 2421 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' ); 2428 2426 } 2429 2427 }); 2430 2428 … … 3425 3423 className: 'attachment', 3426 3424 template: media.template('attachment'), 3427 3425 3426 attributes: { 3427 tabIndex: 0, 3428 role: 'checkbox' 3429 }, 3430 3428 3431 events: { 3429 3432 'click .attachment-preview': 'toggleSelectionHandler', 3430 3433 'change [data-setting]': 'updateSetting', … … 3433 3436 'change [data-setting] textarea': 'updateSetting', 3434 3437 'click .close': 'removeFromLibrary', 3435 3438 'click .check': 'removeFromSelection', 3436 'click a': 'preventDefault' 3439 'click a': 'preventDefault', 3440 'keydown': 'toggleSelectionHandler' 3437 3441 }, 3438 3442 3439 3443 buttons: {}, … … 3441 3445 initialize: function() { 3442 3446 var selection = this.options.selection; 3443 3447 3448 this.$el.attr('aria-label', this.model.attributes.title).attr('aria-checked', false); 3444 3449 this.model.on( 'change:sizes change:uploading', this.render, this ); 3445 3450 this.model.on( 'change:title', this._syncTitle, this ); 3446 3451 this.model.on( 'change:caption', this._syncCaption, this ); … … 3545 3550 toggleSelectionHandler: function( event ) { 3546 3551 var method; 3547 3552 3553 // Catch enter and space events 3554 if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) { 3555 return; 3556 } 3548 3557 if ( event.shiftKey ) { 3549 3558 method = 'between'; 3550 3559 } else if ( event.ctrlKey || event.metaKey ) { … … 3599 3608 return; 3600 3609 } 3601 3610 3611 // Fixes bug that loses focus when selecting a featured image 3612 if ( !method ) { 3613 method = 'add'; 3614 } 3602 3615 if ( method !== 'add' ) { 3603 3616 method = 'reset'; 3604 3617 } … … 3642 3655 return; 3643 3656 } 3644 3657 3645 this.$el.addClass('selected') ;3658 this.$el.addClass('selected').attr('aria-checked', true); 3646 3659 }, 3647 3660 /** 3648 3661 * @param {Backbone.Model} model … … 3657 3670 if ( ! selection || ( collection && collection !== selection ) ) { 3658 3671 return; 3659 3672 } 3660 this.$el.removeClass('selected') ;3673 this.$el.removeClass('selected').attr('aria-checked', false); 3661 3674 }, 3662 3675 /** 3663 3676 * @param {Backbone.Model} model … … 3890 3903 tagName: 'ul', 3891 3904 className: 'attachments', 3892 3905 3906 attributes: { 3907 tabIndex: -1 3908 }, 3909 3893 3910 cssTemplate: media.template('attachments-css'), 3894 3911 3895 3912 events: { … … 4576 4593 clear: function( event ) { 4577 4594 event.preventDefault(); 4578 4595 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(); 4579 4602 } 4580 4603 }); 4581 4604 … … 4886 4909 4887 4910 initialize: function() { 4888 4911 /** 4889 * @member {wp.media.view.FocusManager}4890 */4891 this.focusManager = new media.view.FocusManager({4892 el: this.el4893 });4894 /**4895 4912 * call 'initialize' directly on the parent class 4896 4913 */ 4897 4914 media.view.Attachment.prototype.initialize.apply( this, arguments ); … … 4904 4921 * call 'render' directly on the parent class 4905 4922 */ 4906 4923 media.view.Attachment.prototype.render.apply( this, arguments ); 4907 this.focusManager.focus();4908 4924 return this; 4909 4925 }, 4910 4926 /** … … 4915 4931 4916 4932 if ( confirm( l10n.warnDelete ) ) { 4917 4933 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(); 4918 4939 } 4919 4940 }, 4920 4941 … … 4951 4972 }, 4952 4973 4953 4974 initialize: function() { 4954 /**4955 * @member {wp.media.view.FocusManager}4956 */4957 this.focusManager = new media.view.FocusManager({4958 el: this.el4959 });4960 4961 4975 this.model.on( 'change:compat', this.render, this ); 4962 4976 }, 4963 4977 /** … … 4984 4998 this.views.detach(); 4985 4999 this.$el.html( compat.item ); 4986 5000 this.views.render(); 4987 4988 this.focusManager.focus();4989 5001 return this; 4990 5002 }, 4991 5003 /** -
src/wp-includes/media-template.php
18 18 if ( $is_IE && strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') !== false ) 19 19 $class .= ' ie7'; 20 20 ?> 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]--> 21 31 <script type="text/html" id="tmpl-media-frame"> 22 32 <div class="media-frame-menu"></div> 23 33 <div class="media-frame-title"></div> … … 142 152 <# } else if ( 'image' === data.type ) { #> 143 153 <div class="thumbnail"> 144 154 <div class="centered"> 145 <img src="{{ data.size.url }}" draggable="false" />155 <img src="{{ data.size.url }}" draggable="false" alt="" /> 146 156 </div> 147 157 </div> 148 158 <# } else { #> … … 157 167 <# } #> 158 168 159 169 <# 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> 161 171 <# } #> 162 172 </div> 163 173 <#