Changeset 42794
- Timestamp:
- 03/07/2018 10:26:39 PM (7 years ago)
- Location:
- trunk/src
- Files:
-
- 5 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-admin/css/common.css
r42785 r42794 3369 3369 #customize-info.open .accordion-section-title:after, 3370 3370 .nav-menus-php .menu-item-edit-active .item-edit:before, 3371 .widget.open .widget-top .widget-action .toggle-indicator:before { 3371 .widget.open .widget-top .widget-action .toggle-indicator:before, 3372 .widget.widget-in-question .widget-top .widget-action .toggle-indicator:before { 3372 3373 content: "\f142"; 3373 3374 } -
trunk/src/wp-admin/css/widgets.css
r42790 r42794 382 382 } 383 383 384 #available-widgets .widget-action {385 display: none;386 }387 388 384 #available-widgets .widget { 389 385 margin: 0; … … 517 513 518 514 #available-widgets .widget-control-edit .edit, 515 #available-widgets .widget-action .edit, 519 516 #widgets-left .inactive-sidebar .widget-control-edit .add, 520 #widgets-right .widget-control-edit .add { 517 #widgets-left .inactive-sidebar .widget-action .add, 518 #widgets-right .widget-control-edit .add, 519 #widgets-right .widget-action .add { 521 520 display: none; 522 521 } … … 665 664 666 665 .widgets-chooser li { 667 padding: 10px 15px 10px 35px;668 666 border-bottom: 1px solid #ccc; 669 667 background: #fff; 670 668 margin: 0; 669 position: relative; 670 } 671 672 .widgets-chooser .widgets-chooser-button { 673 width: 100%; 674 padding: 10px 15px 10px 35px; 675 background: transparent; 676 border: 0; 677 box-sizing: border-box; 678 text-align: left; 671 679 cursor: pointer; 680 transition: background 0.2s ease-in-out; 681 } 682 683 /* @todo looks like these hover/focus states are overridden by .widgets-chooser-selected */ 684 .widgets-chooser .widgets-chooser-button:hover, 685 .widgets-chooser .widgets-chooser-button:focus { 672 686 outline: none; 673 position: relative; 674 transition: background 0.2s ease-in-out; 675 } 676 677 /* @todo looks like these hover/focus states are overridden by .widgets-chooser-selected */ 678 .widgets-chooser li:hover, 679 .widgets-chooser li:focus { 680 background: rgba(255,255,255,0.7); 681 } 682 683 .widgets-chooser li:focus:before { 684 content: "\f147"; 685 display: block; 686 -webkit-font-smoothing: antialiased; 687 font: normal 26px/1 dashicons; 688 color: #555d66; 689 position: absolute; 690 top: 7px; 691 left: 5px; 687 text-decoration: underline; 692 688 } 693 689 … … 696 692 } 697 693 698 .widgets-chooser li.widgets-chooser-selected{699 background: #00 a0d2;694 .widgets-chooser .widgets-chooser-selected .widgets-chooser-button { 695 background: #0073aa; 700 696 color: #fff; 701 697 } 702 698 703 .widgets-chooser li.widgets-chooser-selected:before, 704 .widgets-chooser li.widgets-chooser-selected:focus:before { 699 .widgets-chooser .widgets-chooser-selected:before { 705 700 content: "\f147"; 706 701 display: block; … … 718 713 } 719 714 720 .widgets-chooser button {721 margin-right: 5px;722 }723 724 715 #available-widgets .widget .widget-top { 725 716 cursor: pointer; -
trunk/src/wp-admin/includes/widgets.php
r42343 r42794 91 91 92 92 if ( $sidebar_name ) { 93 $add_to = sprintf( 94 /* translators: %s: widgets sidebar name. */ 95 __( 'Add to: %s' ), 96 $sidebar_name 97 ); 93 98 ?> 94 <div class="sidebar-name" >99 <div class="sidebar-name" data-add-to="<?php echo esc_attr( $add_to ); ?>"> 95 100 <button type="button" class="handlediv hide-if-no-js" aria-expanded="true"> 96 101 <span class="screen-reader-text"><?php echo esc_html( $sidebar_name ); ?></span> … … 240 245 <div class="widget-title-action"> 241 246 <button type="button" class="widget-action hide-if-no-js" aria-expanded="false"> 242 <span class="screen-reader-text"><?php printf( __( 'Edit widget: %s' ), $widget_title ); ?></span> 247 <span class="screen-reader-text edit"><?php printf( __( 'Edit widget: %s' ), $widget_title ); ?></span> 248 <span class="screen-reader-text add"><?php printf( __( 'Add widget: %s' ), $widget_title ); ?></span> 243 249 <span class="toggle-indicator" aria-hidden="true"></span> 244 250 </button> -
trunk/src/wp-admin/js/widgets.js
r42521 r42794 22 22 save: '{save}', 23 23 saved: '{saved}', 24 saveAlert: '{saveAlert}' 24 saveAlert: '{saveAlert}', 25 widgetAdded: '{widgetAdded}' 25 26 }, 26 27 … … 177 178 }); 178 179 } 179 e.preventDefault();180 180 } else if ( target.hasClass('widget-control-save') ) { 181 181 wpWidgets.save( target.closest('div.widget'), 0, 1, 0 ); … … 183 183 } else if ( target.hasClass('widget-control-remove') ) { 184 184 wpWidgets.save( target.closest('div.widget'), 1, 1, 0 ); 185 e.preventDefault();186 185 } else if ( target.hasClass('widget-control-close') ) { 187 186 widget = target.closest('div.widget'); … … 189 188 toggleBtn.attr( 'aria-expanded', 'false' ); 190 189 wpWidgets.close( widget ); 191 e.preventDefault();192 190 } else if ( target.attr( 'id' ) === 'inactive-widgets-control-remove' ) { 193 191 wpWidgets.removeInactiveWidgets(); … … 434 432 var $element = $( element ), 435 433 name = $element.find( '.sidebar-name h2' ).text(), 434 ariaLabel = $element.find( '.sidebar-name' ).data( 'add-to' ), 436 435 id = $element.find( '.widgets-sortables' ).attr( 'id' ), 437 li = $('<li tabindex="0">').text( $.trim( name ) ); 436 li = $( '<li>' ), 437 button = $( '<button>', { 438 type: 'button', 439 'aria-pressed': 'false', 440 'class': 'widgets-chooser-button', 441 'aria-label': ariaLabel 442 } ).text( $.trim( name ) ); 443 444 li.append( button ); 438 445 439 446 if ( index === 0 ) { 440 447 li.addClass( 'widgets-chooser-selected' ); 448 button.attr( 'aria-pressed', 'true' ); 441 449 } 442 450 … … 445 453 }); 446 454 447 $( '#available-widgets .widget .widget-title' ).on( 'click.widgets-chooser', function() { 448 var $widget = $(this).closest( '.widget' ); 455 $( '#available-widgets .widget .widget-top' ).on( 'click.widgets-chooser', function() { 456 var $widget = $( this ).closest( '.widget' ), 457 toggleButton = $( this ).find( '.widget-action' ), 458 chooserButtons = selectSidebar.find( '.widgets-chooser-button' ); 449 459 450 460 if ( $widget.hasClass( 'widget-in-question' ) || $( '#widgets-left' ).hasClass( 'chooser' ) ) { 461 toggleButton.attr( 'aria-expanded', 'false' ); 451 462 self.closeChooser(); 452 463 } else { … … 454 465 self.clearWidgetSelection(); 455 466 $( '#widgets-left' ).addClass( 'chooser' ); 467 // Add CSS class and insert the chooser after the widget description. 456 468 $widget.addClass( 'widget-in-question' ).children( '.widget-description' ).after( chooser ); 457 469 // Open the chooser with a slide down animation. 458 470 chooser.slideDown( 300, function() { 459 selectSidebar.find('.widgets-chooser-selected').focus(); 471 // Update the toggle button aria-expanded attribute after previous DOM manipulations. 472 toggleButton.attr( 'aria-expanded', 'true' ); 460 473 }); 461 474 462 selectSidebar.find( 'li' ).on( 'focusin.widgets-chooser', function() { 463 selectSidebar.find('.widgets-chooser-selected').removeClass( 'widgets-chooser-selected' ); 464 $(this).addClass( 'widgets-chooser-selected' ); 475 chooserButtons.on( 'click.widgets-chooser', function() { 476 selectSidebar.find( '.widgets-chooser-selected' ).removeClass( 'widgets-chooser-selected' ); 477 chooserButtons.attr( 'aria-pressed', 'false' ); 478 $( this ) 479 .attr( 'aria-pressed', 'true' ) 480 .closest( 'li' ).addClass( 'widgets-chooser-selected' ); 465 481 } ); 466 482 } … … 478 494 } 479 495 }).on( 'keyup.widgets-chooser', function( event ) { 480 if ( event.which === $.ui.keyCode.ENTER ) { 481 if ( $( event.target ).hasClass( 'widgets-chooser-cancel' ) ) { 482 // Close instead of adding when pressing Enter on the Cancel button 483 self.closeChooser(); 484 } else { 485 self.addWidget( chooser ); 486 self.closeChooser(); 487 } 488 } else if ( event.which === $.ui.keyCode.ESCAPE ) { 496 if ( event.which === $.ui.keyCode.ESCAPE ) { 489 497 self.closeChooser(); 490 498 } … … 706 714 // have to queue this "by hand". 707 715 widget.find( '.widget-title' ).trigger('click'); 716 // At the end of the animation, announce the widget has been added. 717 window.wp.a11y.speak( wpWidgets.l10n.widgetAdded, 'assertive' ); 708 718 }, 250 ); 709 719 }, 710 720 711 721 closeChooser: function() { 712 var self = this; 722 var self = this, 723 widgetInQuestion = $( '#available-widgets .widget-in-question' ); 713 724 714 725 $( '.widgets-chooser' ).slideUp( 200, function() { 715 726 $( '#wpbody-content' ).append( this ); 716 727 self.clearWidgetSelection(); 728 // Move focus back to the toggle button. 729 widgetInQuestion.find( '.widget-action' ).attr( 'aria-expanded', 'false' ).focus(); 717 730 }); 718 731 }, -
trunk/src/wp-includes/script-loader.php
r42719 r42794 787 787 $scripts->add( 'admin-gallery', "/wp-admin/js/gallery$suffix.js", array( 'jquery-ui-sortable' ) ); 788 788 789 $scripts->add( 'admin-widgets', "/wp-admin/js/widgets$suffix.js", array( 'jquery-ui-sortable', 'jquery-ui-draggable', 'jquery-ui-droppable' ), false, 1 );789 $scripts->add( 'admin-widgets', "/wp-admin/js/widgets$suffix.js", array( 'jquery-ui-sortable', 'jquery-ui-draggable', 'jquery-ui-droppable', 'wp-a11y' ), false, 1 ); 790 790 did_action( 'init' ) && $scripts->add_inline_script( 791 791 'admin-widgets', sprintf( 792 792 'wpWidgets.l10n = %s;', wp_json_encode( 793 793 array( 794 'save' => __( 'Save' ), 795 'saved' => __( 'Saved' ), 796 'saveAlert' => __( 'The changes you made will be lost if you navigate away from this page.' ), 794 'save' => __( 'Save' ), 795 'saved' => __( 'Saved' ), 796 'saveAlert' => __( 'The changes you made will be lost if you navigate away from this page.' ), 797 'widgetAdded' => __( 'Widget has been added to the selected sidebar' ), 797 798 ) 798 799 )
Note: See TracChangeset
for help on using the changeset viewer.