Changeset 26956
- Timestamp:
- 01/15/2014 08:28:04 AM (11 years ago)
- Location:
- branches/3.8
- Files:
-
- 4 edited
Legend:
- Unmodified
- Added
- Removed
-
branches/3.8
-
branches/3.8/src/wp-admin/css/wp-admin.css
r26954 r26956 6495 6495 transition: opacity 0.1s ease-in-out; 6496 6496 } 6497 .theme-browser .theme:focus { 6498 outline: 1px dotted #222; 6499 } 6500 /* Hide shortcut actions and hover feedback when using tab navigation */ 6501 .theme-browser .theme:focus .theme-actions { 6502 display: none; 6503 } 6504 /* Restore display of theme controls if you hover a focused theme */ 6505 .theme-browser .theme:focus:hover .theme-actions { 6506 display: block; 6507 } 6508 .theme-browser .theme:focus .more-details { 6509 opacity: 1; 6510 } 6511 /* Current theme needs to have its action always on view */ 6512 .theme-browser .theme.active:focus .theme-actions { 6513 display: block; 6514 } 6497 6515 6498 6516 .theme-browser.rendered .theme:hover .more-details { … … 6720 6738 text-align: center; 6721 6739 float: right; 6740 border: 0; 6722 6741 border-left: 1px solid #ddd; 6723 } 6724 6725 .theme-overlay .theme-header .close:hover:before { 6742 background-color: transparent; 6743 } 6744 6745 .theme-overlay .theme-header .close:hover:before, 6746 .theme-overlay .theme-header .close:focus:before { 6726 6747 color: #fff; 6727 6748 } … … 6740 6761 cursor: pointer; 6741 6762 color: #777; 6763 background-color: transparent; 6742 6764 height: 48px; 6743 6765 width: 54px; 6744 6766 float: left; 6745 6767 text-align: center; 6768 border: 0; 6746 6769 border-right: 1px solid #ddd; 6747 -webkit-user-select: none;6748 -moz-user-select: none;6749 -ms-user-select: none;6750 user-select: none;6751 6770 } 6752 6771 6753 6772 .theme-overlay .theme-header .close:hover, 6754 6773 .theme-overlay .theme-header .right:hover, 6755 .theme-overlay .theme-header .left:hover { 6774 .theme-overlay .theme-header .left:hover, 6775 .theme-overlay .theme-header .close:focus, 6776 .theme-overlay .theme-header .right:focus, 6777 .theme-overlay .theme-header .left:focus { 6756 6778 background: #0074a2; 6757 6779 color: #fff; … … 6862 6884 } 6863 6885 6864 .theme-overlay .theme-actions .delete-theme:hover { 6886 .theme-overlay .theme-actions .delete-theme:hover, 6887 .theme-overlay .theme-actions .delete-theme:focus { 6865 6888 background: #d54e21; 6866 6889 color: #fff; -
branches/3.8/src/wp-admin/js/theme.js
r26936 r26956 189 189 events: { 190 190 'click': 'expand', 191 'keydown': 'expand', 191 192 'touchend': 'expand', 192 193 'touchmove': 'preventExpand' … … 198 199 var data = this.model.toJSON(); 199 200 // Render themes using the html template 200 this.$el.html( this.html( data ) ); 201 this.$el.html( this.html( data ) ).attr( 'tabindex', 0 ); 202 201 203 // Renders active theme styles 202 204 this.activeTheme(); … … 220 222 var self = this; 221 223 224 event = event || window.event; 225 226 // 'enter' and 'space' keys expand the details view when a theme is :focused 227 if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) { 228 return; 229 } 230 222 231 // Bail if the user scrolled on a touch device 223 232 if ( this.touchDrag === true ) { 224 233 return this.touchDrag = false; 225 234 } 226 227 event = event || window.event;228 235 229 236 // Prevent the modal from showing when the user clicks … … 232 239 return; 233 240 } 241 242 // Set focused theme to current element 243 themes.focusedTheme = this.$el; 234 244 235 245 this.trigger( 'theme:expand', self.model.cid ); … … 267 277 // Checks screenshot size 268 278 this.screenshotCheck( this.$el ); 279 // Contain "tabbing" inside the overlay 280 this.containFocus( this.$el ); 269 281 }, 270 282 … … 276 288 }, 277 289 290 // Keeps :focus within the theme details elements 291 containFocus: function( $el ) { 292 var $target; 293 294 // Move focus to the primary action 295 _.delay( function() { 296 $( '.theme-wrap a.button-primary:visible' ).focus(); 297 }, 500 ); 298 299 $el.on( 'keydown.wp-themes', function( event ) { 300 301 // Tab key 302 if ( event.which === 9 ) { 303 $target = $( event.target ); 304 305 // Keep focus within the overlay by making the last link on theme actions 306 // switch focus to button.left on tabbing and vice versa 307 if ( $target.is( 'button.left' ) && event.shiftKey ) { 308 $el.find( '.theme-actions a:last-child' ).focus(); 309 event.preventDefault(); 310 } else if ( $target.is( '.theme-actions a:last-child' ) ) { 311 $el.find( 'button.left' ).focus(); 312 event.preventDefault(); 313 } 314 } 315 }); 316 }, 317 278 318 // Single theme overlay screen 279 319 // It's shown when clicking a theme … … 292 332 // and don't close it unless the target was 293 333 // the div.back button 294 if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( ' div.close' ) || event.keyCode === 27 ) {334 if ( $( event.target ).is( '.theme-backdrop' ) || $( event.target ).is( '.close' ) || event.keyCode === 27 ) { 295 335 296 336 // Add a temporary closing class while overlay fades out … … 312 352 // Restore scroll position 313 353 document.body.scrollTop = scroll; 354 355 // Return focus to the theme div 356 if ( themes.focusedTheme ) { 357 themes.focusedTheme.focus(); 358 } 314 359 }); 315 360 } -
branches/3.8/src/wp-admin/themes.php
r26853 r26956 193 193 194 194 foreach ( $themes as $theme ) : ?> 195 <div class="theme<?php if ( $theme['active'] ) echo ' active'; ?>" >195 <div class="theme<?php if ( $theme['active'] ) echo ' active'; ?>" tabindex="0"> 196 196 <?php if ( ! empty( $theme['screenshot'][0] ) ) { ?> 197 197 <div class="theme-screenshot"> … … 310 310 <div class="theme-wrap"> 311 311 <div class="theme-header"> 312 < div alt="<?php _e( 'Close overlay' ); ?>" class="close dashicons dashicons-no"></div>313 < div alt="<?php _e( 'Show previous theme' ); ?>" class="left dashicons dashicons-no"></div>314 < div alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></div>312 <button alt="<?php _e( 'Show previous theme' ); ?>" class="left dashicons dashicons-no"></button> 313 <button alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></button> 314 <button alt="<?php _e( 'Close overlay' ); ?>" class="close dashicons dashicons-no"></button> 315 315 </div> 316 316 <div class="theme-about">
Note: See TracChangeset
for help on using the changeset viewer.