- Timestamp:
- 04/19/2017 09:13:53 PM (8 years ago)
- Location:
- trunk/src
- Files:
-
- 8 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-admin/css/common.css
r40059 r40480 866 866 } 867 867 868 .widget-control-remove,869 .widget-control-remove:focus,870 868 .row-actions span.delete a, 871 869 .row-actions span.trash a, … … 894 892 #media-items a.delete-permanently:hover, 895 893 #nav-menu-footer .menu-delete:hover { 896 color: # f00;894 color: #dc3232; 897 895 border: none; 898 }899 900 .widget-control-remove:hover {901 color: #f00;902 896 } 903 897 … … 3245 3239 /* @todo: can we use a common class for these? */ 3246 3240 .nav-menus-php .item-edit:before, 3247 .widget-top a.widget-action:after,3241 .widget-top .widget-action .toggle-indicator:before, 3248 3242 .control-section .accordion-section-title:after, 3249 3243 .accordion-section-title:after { 3250 right: 0;3251 3244 content: "\f140"; 3252 border: none;3253 background: none;3254 3245 font: normal 20px/1 dashicons; 3255 3246 speak: none; 3256 3247 display: block; 3257 padding: 0;3258 text-indent: 0;3259 text-align: center;3260 position: relative;3261 3248 -webkit-font-smoothing: antialiased; 3262 3249 -moz-osx-font-smoothing: grayscale; 3263 3250 text-decoration: none !important; 3251 } 3252 3253 .widget-top .widget-action .toggle-indicator:before { 3254 padding: 1px 2px 1px 0px; 3255 -webkit-border-radius: 50%; 3256 border-radius: 50%; 3264 3257 } 3265 3258 … … 3289 3282 } 3290 3283 3291 .widget-top a.widget-action:after { 3292 padding: 1px 2px 1px 0px; 3293 margin-top: 10px; 3294 margin-right: 10px; 3295 -webkit-border-radius: 50%; 3296 border-radius: 50%; 3297 } 3298 3299 .widget-top a.widget-action:focus:after { 3284 .widget-top .widget-action:focus .toggle-indicator:before { 3300 3285 -webkit-box-shadow: 3301 3286 0 0 0 1px #5b9dd9, … … 3316 3301 #customize-info.open .accordion-section-title:after, 3317 3302 .nav-menus-php .menu-item-edit-active .item-edit:before, 3318 .widget.open .widget-top a.widget-action:after{3303 .widget.open .widget-top .widget-action .toggle-indicator:before { 3319 3304 content: "\f142"; 3320 3305 } … … 3595 3580 .curtime #timestamp, 3596 3581 #screen-meta-links a.show-settings, 3597 .widget-top a.widget-action,3598 .widget-top a.widget-action:hover,3582 .widget-top .widget-action, 3583 .widget-top .widget-action:hover, 3599 3584 .sidebar-name-arrow, 3600 3585 .sidebar-name:hover .sidebar-name-arrow, -
trunk/src/wp-admin/css/customize-nav-menus.css
r40358 r40480 154 154 } 155 155 156 .wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator: after{156 .wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:before { 157 157 content: "\f142"; 158 158 } … … 272 272 font-size: 20px; 273 273 line-height: 1; 274 text-indent: -1px; /* account for the dashicon alignment */275 274 } 276 275 … … 279 278 } 280 279 281 .wp-customizer .toggle-indicator:after { 280 .wp-customizer .menu-item .item-edit .toggle-indicator:before, 281 #available-menu-items .accordion-section-title .toggle-indicator:before { 282 282 content: "\f140"; 283 display: block; 284 padding: 1px 2px 1px 0px; 283 285 speak: none; 284 vertical-align: top;285 286 -webkit-border-radius: 50%; 286 287 border-radius: 50%; … … 495 496 } 496 497 497 #available-menu-items .accordion-section-title:hover .toggle-indicator: after,498 #available-menu-items .button-link:hover .toggle-indicator: after,499 #available-menu-items .button-link:focus .toggle-indicator: after{498 #available-menu-items .accordion-section-title:hover .toggle-indicator:before, 499 #available-menu-items .button-link:hover .toggle-indicator:before, 500 #available-menu-items .button-link:focus .toggle-indicator:before { 500 501 color: #23282d; 501 502 } 502 503 503 #available-menu-items .open .accordion-section-title .toggle-indicator: after{504 #available-menu-items .open .accordion-section-title .toggle-indicator:before { 504 505 content: "\f142"; 505 506 color: #23282d; … … 838 839 .customize-screen-options-toggle:focus:before, 839 840 #customize-controls .customize-info .customize-help-toggle:focus:before, 840 .wp-customizer button:focus .toggle-indicator: after,841 .wp-customizer button:focus .toggle-indicator:before, 841 842 .menu-delete:focus, 842 843 .menu-item-bar .item-delete:focus:before, -
trunk/src/wp-admin/css/customize-widgets.css
r39249 r40480 90 90 } 91 91 92 .customize-control-widget_form.expanded a.widget-action:after{92 .customize-control-widget_form.expanded .widget-action .toggle-indicator:before { 93 93 content: "\f142"; 94 94 } 95 95 96 .customize-control-widget_form.wide-widget-control a.widget-action:after{96 .customize-control-widget_form.wide-widget-control .widget-action .toggle-indicator:before { 97 97 content: "\f139"; 98 98 } 99 99 100 .customize-control-widget_form.wide-widget-control.expanded a.widget-action:after{100 .customize-control-widget_form.wide-widget-control.expanded .widget-action .toggle-indicator:before { 101 101 content: "\f141"; 102 102 } … … 439 439 margin-bottom: 15px; 440 440 } 441 /* This rule reduces the widgets titles height. */ 441 442 .widget-title h3 { 442 443 padding: 13px 15px; 443 444 } 445 .widget-top .widget-action { 446 padding-bottom: 8px; 447 } 444 448 .widget-reorder-nav span { 445 449 height: 39px; -
trunk/src/wp-admin/css/widgets.css
r37740 r40480 15 15 } 16 16 17 .widget-top a.widget-action, 18 .widget-top a.widget-action:hover { 19 -webkit-box-shadow: none; 20 box-shadow: none; 17 .widget-top .widget-action { 18 border: 0; 19 margin: 0; 20 padding: 10px; 21 background: none; 22 cursor: pointer; 21 23 outline: none; 22 text-decoration: none;23 24 } 24 25 … … 51 52 52 53 .deleting .widget-title, 53 .deleting .widget-top a.widget-action:after{54 .deleting .widget-top .widget-action .toggle-indicator:before { 54 55 color: #a0a5aa; 55 56 } -
trunk/src/wp-admin/includes/widgets.php
r38672 r40480 220 220 <div class="widget-top"> 221 221 <div class="widget-title-action"> 222 <a class="widget-action hide-if-no-js" href="#available-widgets"></a> 222 <button type="button" class="widget-action hide-if-no-js" aria-expanded="false"> 223 <span class="screen-reader-text"><?php printf( __( 'Edit widget: %s' ), $widget_title ); ?></span> 224 <span class="toggle-indicator" aria-hidden="true"></span> 225 </button> 223 226 <a class="widget-control-edit hide-if-js" href="<?php echo esc_url( add_query_arg( $query_arg ) ); ?>"> 224 227 <span class="edit"><?php _ex( 'Edit', 'widget' ); ?></span> … … 251 254 <div class="widget-control-actions"> 252 255 <div class="alignleft"> 253 <a class="widget-control-remove" href="#remove"><?php _e('Delete'); ?></a> |254 <a class="widget-control-close" href="#close"><?php _e('Close'); ?></a>256 <button type="button" class="button-link button-link-delete widget-control-remove"><?php _e( 'Delete' ); ?></button> | 257 <button type="button" class="button-link widget-control-close"><?php _e( 'Close' ); ?></button> 255 258 </div> 256 259 <div class="alignright<?php if ( 'noform' === $has_form ) echo ' widget-control-noform'; ?>"> -
trunk/src/wp-admin/js/customize-widgets.js
r40330 r40480 953 953 954 954 // Configure remove button 955 $removeBtn = this.container.find( ' a.widget-control-remove' );955 $removeBtn = this.container.find( '.widget-control-remove' ); 956 956 $removeBtn.on( 'click', function( e ) { 957 957 e.preventDefault(); … … 989 989 990 990 replaceDeleteWithRemove = function() { 991 $removeBtn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the linkas "Delete"991 $removeBtn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the button as "Delete" 992 992 $removeBtn.attr( 'title', l10n.removeBtnTooltip ); 993 993 }; … … 1368 1368 */ 1369 1369 onChangeExpanded: function ( expanded, args ) { 1370 var self = this, $widget, $inside, complete, prevComplete, expandControl ;1370 var self = this, $widget, $inside, complete, prevComplete, expandControl, $toggleBtn; 1371 1371 1372 1372 self.embedWidgetControl(); // Make sure the outer form is embedded so that the expanded state can be set in the UI. … … 1387 1387 $widget = this.container.find( 'div.widget:first' ); 1388 1388 $inside = $widget.find( '.widget-inside:first' ); 1389 $toggleBtn = this.container.find( '.widget-top button.widget-action' ); 1389 1390 1390 1391 expandControl = function() { … … 1400 1401 self.container.removeClass( 'expanding' ); 1401 1402 self.container.addClass( 'expanded' ); 1403 $toggleBtn.attr( 'aria-expanded', 'true' ); 1402 1404 self.container.trigger( 'expanded' ); 1403 1405 }; … … 1429 1431 } 1430 1432 } else { 1431 1432 1433 complete = function() { 1433 1434 self.container.removeClass( 'collapsing' ); 1434 1435 self.container.removeClass( 'expanded' ); 1436 $toggleBtn.attr( 'aria-expanded', 'false' ); 1435 1437 self.container.trigger( 'collapsed' ); 1436 1438 }; -
trunk/src/wp-admin/js/widgets.js
r38672 r40480 42 42 var target = $(e.target), 43 43 css = { 'z-index': 100 }, 44 widget, inside, targetWidth, widgetWidth, margin; 44 widget, inside, targetWidth, widgetWidth, margin, 45 toggleBtn = target.closest( '.widget' ).find( '.widget-top button.widget-action' ); 45 46 46 47 if ( target.parents('.widget-top').length && ! target.parents('#available-widgets').length ) { … … 61 62 widget.css( css ); 62 63 } 63 widget.addClass( 'open' ); 64 inside.slideDown('fast'); 64 /* 65 * Don't change the order of attributes changes and animation: 66 * it's important for screen readers, see ticket #31476. 67 */ 68 toggleBtn.attr( 'aria-expanded', 'true' ); 69 inside.slideDown( 'fast', function() { 70 widget.addClass( 'open' ); 71 }); 65 72 } else { 66 inside.slideUp('fast', function() { 73 /* 74 * Don't change the order of attributes changes and animation: 75 * it's important for screen readers, see ticket #31476. 76 */ 77 toggleBtn.attr( 'aria-expanded', 'false' ); 78 inside.slideUp( 'fast', function() { 67 79 widget.attr( 'style', '' ); 68 80 widget.removeClass( 'open' ); … … 79 91 widget = target.closest('div.widget'); 80 92 widget.removeClass( 'open' ); 93 toggleBtn.attr( 'aria-expanded', 'false' ); 81 94 wpWidgets.close( widget ); 82 95 e.preventDefault(); … … 93 106 94 107 if ( $this.find( 'p.widget-error' ).length ) { 95 $this.find( ' a.widget-action' ).trigger('click');108 $this.find( '.widget-action' ).trigger( 'click' ).attr( 'aria-expanded', 'true' ); 96 109 } 97 110 }); … … 183 196 if ( inside.css('display') === 'block' ) { 184 197 ui.item.removeClass('open'); 198 ui.item.find( '.widget-top button.widget-action' ).attr( 'aria-expanded', 'false' ); 185 199 inside.hide(); 186 200 $(this).sortable('refreshPositions'); … … 255 269 256 270 if ( addNew ) { 257 $widget.find( ' a.widget-action' ).trigger('click');271 $widget.find( '.widget-action' ).trigger( 'click' ); 258 272 } else { 259 273 wpWidgets.saveOrder( $sidebar.attr('id') ); … … 493 507 close : function(widget) { 494 508 widget.children('.widget-inside').slideUp('fast', function() { 495 widget.attr( 'style', '' ); 509 widget.attr( 'style', '' ) 510 .find( '.widget-top button.widget-action' ) 511 .attr( 'aria-expanded', 'false' ) 512 .focus(); 496 513 }); 497 514 }, -
trunk/src/wp-includes/css/buttons.css
r40428 r40480 243 243 .wp-core-ui .button-link-delete:hover, 244 244 .wp-core-ui .button-link-delete:focus { 245 color: # f00;245 color: #dc3232; 246 246 } 247 247
Note: See TracChangeset
for help on using the changeset viewer.