diff --git src/wp-admin/css/admin-menu.css src/wp-admin/css/admin-menu.css
index 2076c5c..ccfc33d 100644
|
|
|
264 | 264 | .folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu, |
265 | 265 | .folded #adminmenu a.menu-top:focus + .wp-submenu, |
266 | 266 | .folded #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu, |
267 | | .no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu { |
| 267 | .no-js.folded #adminmenu .wp-has-submenu:hover .wp-submenu { |
268 | 268 | top: 0; |
269 | 269 | left: 36px; |
270 | 270 | } |
… |
… |
div.wp-menu-image:before { |
383 | 383 | } |
384 | 384 | |
385 | 385 | .folded #adminmenu div.wp-menu-image { |
386 | | width: 35px; |
387 | 386 | height: 30px; |
388 | 387 | position: absolute; |
389 | 388 | z-index: 25; |
… |
… |
ul#adminmenu > li.current > a.current:after { |
533 | 532 | display: none; |
534 | 533 | } |
535 | 534 | |
536 | | #collapse-menu { |
537 | | font-size: 13px; |
538 | | line-height: 34px; |
539 | | margin-top: 10px; |
540 | | color: #00b9eb; |
| 535 | #collapse-button { |
| 536 | display: block; |
| 537 | width: 100%; |
| 538 | height: 34px; |
| 539 | margin: 0; |
| 540 | border: none; |
| 541 | padding: 0; |
| 542 | position: relative; |
| 543 | overflow: visible; |
| 544 | line-height: 34px; |
| 545 | background: none; |
| 546 | color: #9ba1a6; |
541 | 547 | color: rgba(240,245,250,0.6); |
542 | | -webkit-transition: all .1s ease-in-out; |
543 | | transition: all .1s ease-in-out; |
| 548 | cursor: pointer; |
| 549 | outline: 0; |
| 550 | text-align: center; |
544 | 551 | } |
545 | 552 | |
546 | | #collapse-menu:hover, |
547 | | #collapse-menu:hover #collapse-button div:after { |
548 | | color: #00b9eb; |
| 553 | #collapse-button:hover, |
| 554 | #collapse-button:focus { |
| 555 | color: #00b9eb; |
549 | 556 | } |
550 | 557 | |
551 | | .folded #collapse-menu span { |
552 | | display: none; |
| 558 | #collapse-button .collapse-button-icon, |
| 559 | #collapse-button .collapse-button-label { |
| 560 | /* absolutely positioned to avoid 1px shift in IE when button is pressed */ |
| 561 | display: block; |
| 562 | position: absolute; |
| 563 | top: 0; |
| 564 | left: 0; |
| 565 | } |
| 566 | |
| 567 | #collapse-button .collapse-button-icon { |
| 568 | width: 36px; |
| 569 | height: 34px; |
| 570 | line-height: 34px; |
553 | 571 | } |
554 | 572 | |
555 | | #collapse-button, |
556 | | #collapse-button div { |
557 | | width: 15px; |
558 | | height: 15px; |
| 573 | #collapse-button .collapse-button-label { |
| 574 | padding: 0 0 0 36px; |
| 575 | line-height: 34px; |
559 | 576 | } |
560 | 577 | |
561 | | #collapse-button { |
562 | | float: left; |
563 | | height: 15px; |
564 | | margin: 10px 8px 10px 11px; |
565 | | width: 15px; |
566 | | -webkit-border-radius: 10px; |
567 | | border-radius: 10px; |
| 578 | .folded #collapse-button .collapse-button-label, |
| 579 | #collapse-button .screen-reader-text { |
| 580 | /* screen-reader-text hidden also for screen readers, read out when folded or auto-fold */ |
| 581 | display: none; |
568 | 582 | } |
569 | 583 | |
570 | | #wpwrap #collapse-button div { |
571 | | padding: 0; |
| 584 | .folded #collapse-button .screen-reader-text { |
| 585 | display: inline; |
572 | 586 | } |
573 | 587 | |
574 | | #collapse-button div:after { |
| 588 | #collapse-button .collapse-button-icon:after { |
575 | 589 | content: '\f148'; |
576 | 590 | display: block; |
577 | | line-height: 15px; |
578 | | left: -3px; |
579 | | top: -3px; |
580 | | color: #00b9eb; |
581 | | color: rgba(240,245,250,0.6); |
582 | | font: normal 20px/1 'dashicons' !important; |
583 | | speak: none; |
584 | | margin: 0 auto; |
585 | | padding: 0 !important; |
586 | 591 | position: relative; |
| 592 | top: 7px; |
587 | 593 | text-align: center; |
588 | | width: 20px; |
589 | | -webkit-transition: all .1s ease-in-out; |
590 | | transition: all .1s ease-in-out; |
| 594 | font: normal 20px/1 'dashicons' !important; |
| 595 | speak: none; |
591 | 596 | -webkit-font-smoothing: antialiased; |
592 | 597 | -moz-osx-font-smoothing: grayscale; |
593 | 598 | } |
594 | 599 | |
595 | 600 | /* rtl:ignore */ |
596 | | .folded #collapse-button div:after, |
597 | | .rtl #collapse-button div:after { |
| 601 | .folded #collapse-button .collapse-button-icon:after, |
| 602 | .rtl #collapse-button .collapse-button-icon:after { |
598 | 603 | -webkit-transform: rotate(180deg); |
599 | 604 | -ms-transform: rotate(180deg); |
600 | 605 | transform: rotate(180deg); |
601 | 606 | } |
602 | 607 | |
603 | | .rtl.folded #collapse-button div:after { |
| 608 | .rtl.folded #collapse-button .collapse-button-icon:after { |
604 | 609 | -webkit-transform: none; |
605 | 610 | -ms-transform: none; |
606 | 611 | transform: none; |
607 | 612 | } |
608 | 613 | |
| 614 | #collapse-button .collapse-button-icon:after, |
| 615 | #collapse-button .collapse-button-label { |
| 616 | -webkit-transition: all .1s ease-in-out; |
| 617 | transition: all .1s ease-in-out; |
| 618 | } |
| 619 | |
609 | 620 | /** |
610 | 621 | * Toolbar menu toggle |
611 | 622 | */ |
… |
… |
li#wp-admin-bar-menu-toggle { |
638 | 649 | .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open, |
639 | 650 | .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu, |
640 | 651 | .auto-fold #adminmenu a.menu-top:focus + .wp-submenu, |
641 | | .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu { |
| 652 | .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu { |
642 | 653 | top: 0px; |
643 | 654 | left: 36px; |
644 | 655 | } |
… |
… |
li#wp-admin-bar-menu-toggle { |
677 | 688 | |
678 | 689 | .auto-fold #adminmenu div.wp-menu-image { |
679 | 690 | height: 30px; |
680 | | width: 34px; |
681 | 691 | position: absolute; |
682 | 692 | z-index: 25; |
683 | 693 | } |
… |
… |
li#wp-admin-bar-menu-toggle { |
716 | 726 | z-index: 10000; |
717 | 727 | } |
718 | 728 | |
719 | | .auto-fold #collapse-menu span { |
| 729 | .auto-fold #collapse-menu .collapse-button-label { |
720 | 730 | display: none; |
721 | 731 | } |
722 | 732 | |
723 | | .auto-fold #collapse-button div { |
724 | | background: none; |
| 733 | .auto-fold #collapse-button .screen-reader-text { |
| 734 | display: inline; |
725 | 735 | } |
726 | 736 | |
727 | 737 | /* rtl:ignore */ |
728 | | .auto-fold #collapse-button div:after { |
| 738 | .auto-fold #collapse-button .collapse-button-icon:after { |
729 | 739 | -webkit-transform: rotate(180deg); |
730 | 740 | -ms-transform: rotate(180deg); |
731 | 741 | transform: rotate(180deg); |
732 | 742 | } |
733 | 743 | |
734 | | .rtl.auto-fold #collapse-button div:after { |
| 744 | .rtl.auto-fold #collapse-button .collapse-button-icon:after { |
735 | 745 | -webkit-transform: none; |
736 | 746 | -ms-transform: none; |
737 | 747 | transform: none; |
diff --git src/wp-admin/css/colors/_admin.scss src/wp-admin/css/colors/_admin.scss
index 99e63fb..5d3c65c 100644
|
|
ul#adminmenu > li.current > a.current:after { |
235 | 235 | |
236 | 236 | /* Admin Menu: collapse button */ |
237 | 237 | |
238 | | #collapse-menu { |
239 | | color: $menu-collapse-text; |
| 238 | #collapse-button { |
| 239 | color: $menu-collapse-text; |
240 | 240 | } |
241 | 241 | |
242 | | #collapse-menu:hover { |
243 | | color: $menu-collapse-focus-text; |
| 242 | #collapse-button:hover, |
| 243 | #collapse-button:focus { |
| 244 | color: $menu-collapse-focus-icon; |
244 | 245 | } |
245 | 246 | |
246 | | #collapse-button div:after { |
247 | | color: $menu-collapse-icon; |
| 247 | #collapse-button .collapse-button-icon:after { |
| 248 | color: $menu-collapse-icon; |
248 | 249 | } |
249 | 250 | |
250 | | #collapse-menu:hover #collapse-button div:after { |
251 | | color: $menu-collapse-focus-icon; |
| 251 | #collapse-menu:hover #collapse-button .collapse-button-icon:after { |
| 252 | color: $menu-collapse-focus-icon; |
252 | 253 | } |
253 | 254 | |
254 | 255 | |
diff --git src/wp-admin/js/common.js src/wp-admin/js/common.js
index dda9247..70a1b4d 100644
|
|
$(document).ready( function() { |
208 | 208 | $(e.target).parent().siblings('a').get(0).click(); |
209 | 209 | }); |
210 | 210 | |
211 | | $('#collapse-menu').on('click.collapse-menu', function() { |
212 | | var body = $( document.body ), respWidth, state; |
| 211 | $( '#collapse-button' ).on( 'click.collapse-menu', function() { |
| 212 | var body = $( document.body ), |
| 213 | collapseMenu = commonL10n.collapseMenu || '', |
| 214 | expandMenu = commonL10n.expandMenu || '', |
| 215 | label = $(this).find( '.collapse-button-label' ), |
| 216 | respWidth, |
| 217 | state; |
| 218 | |
| 219 | // Remove focus so the button doesn't remain highlighted |
| 220 | $(this).blur(); |
213 | 221 | |
214 | 222 | // reset any compensation for submenus near the bottom of the screen |
215 | 223 | $('#adminmenu div.wp-submenu').css('margin-top', ''); |
… |
… |
$(document).ready( function() { |
245 | 253 | } |
246 | 254 | } |
247 | 255 | |
| 256 | if ( state == 'folded' ) { |
| 257 | label.text( expandMenu ); |
| 258 | } else { |
| 259 | label.text( collapseMenu ); |
| 260 | } |
| 261 | |
248 | 262 | $( document ).trigger( 'wp-collapse-menu', { state: state } ); |
249 | 263 | }); |
250 | 264 | |
diff --git src/wp-admin/menu-header.php src/wp-admin/menu-header.php
index 8aa81fe..9a04cde 100644
|
|
function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) { |
212 | 212 | echo "</li>"; |
213 | 213 | } |
214 | 214 | |
215 | | echo '<li id="collapse-menu" class="hide-if-no-js"><div id="collapse-button"><div></div></div>'; |
216 | | echo '<span>' . esc_html__( 'Collapse menu' ) . '</span>'; |
| 215 | echo '<li id="collapse-menu" class="hide-if-no-js">'; |
| 216 | echo '<button type="button" id="collapse-button" aria-live="polite" aria-relevant="all" aria-atomic="true">'; |
| 217 | echo '<span class="collapse-button-icon"></span>'; |
| 218 | echo '<span class="collapse-button-label">' . __( 'Collapse menu' ) . '</span>'; |
| 219 | echo '</button>'; |
217 | 220 | echo '</li>'; |
218 | 221 | } |
219 | 222 | |
diff --git src/wp-includes/script-loader.php src/wp-includes/script-loader.php
index d304498..732d4dd 100644
|
|
function wp_default_scripts( &$scripts ) { |
79 | 79 | |
80 | 80 | $scripts->add( 'common', "/wp-admin/js/common$suffix.js", array('jquery', 'hoverIntent', 'utils'), false, 1 ); |
81 | 81 | did_action( 'init' ) && $scripts->localize( 'common', 'commonL10n', array( |
82 | | 'warnDelete' => __("You are about to permanently delete the selected items.\n 'Cancel' to stop, 'OK' to delete.") |
| 82 | 'warnDelete' => __( "You are about to permanently delete the selected items.\n 'Cancel' to stop, 'OK' to delete." ), |
| 83 | 'collapseMenu' => __( 'Collapse menu' ), |
| 84 | 'expandMenu' => __( 'Expand menu' ) |
83 | 85 | ) ); |
84 | 86 | |
85 | 87 | $scripts->add( 'wp-a11y', "/wp-includes/js/wp-a11y$suffix.js", array( 'jquery' ), false, 1 ); |