WordPress.org

Make WordPress Core

Ticket #29958: 29958.5.diff

File 29958.5.diff, 8.6 KB (added by valendesigns, 4 years ago)
  • src/wp-admin/css/admin-menu.css

    diff --git src/wp-admin/css/admin-menu.css src/wp-admin/css/admin-menu.css
    index 2076c5c..ccfc33d 100644
     
    264264.folded #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
    265265.folded #adminmenu a.menu-top:focus + .wp-submenu,
    266266.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 {
    268268        top: 0;
    269269        left: 36px;
    270270}
    div.wp-menu-image:before { 
    383383}
    384384
    385385.folded #adminmenu div.wp-menu-image {
    386         width: 35px;
    387386        height: 30px;
    388387        position: absolute;
    389388        z-index: 25;
    ul#adminmenu > li.current > a.current:after { 
    533532        display: none;
    534533}
    535534
    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;
    541547        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;
    544551}
    545552
    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;
    549556}
    550557
    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;
    553571}
    554572
    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;
    559576}
    560577
    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;
    568582}
    569583
    570 #wpwrap #collapse-button div {
    571         padding: 0;
     584.folded #collapse-button .screen-reader-text {
     585        display: inline;
    572586}
    573587
    574 #collapse-button div:after {
     588#collapse-button .collapse-button-icon:after {
    575589        content: '\f148';
    576590        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;
    586591        position: relative;
     592        top: 7px;
    587593        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;
    591596        -webkit-font-smoothing: antialiased;
    592597        -moz-osx-font-smoothing: grayscale;
    593598}
    594599
    595600/* 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 {
    598603        -webkit-transform: rotate(180deg);
    599604        -ms-transform: rotate(180deg);
    600605        transform: rotate(180deg);
    601606}
    602607
    603 .rtl.folded #collapse-button div:after {
     608.rtl.folded #collapse-button .collapse-button-icon:after {
    604609        -webkit-transform: none;
    605610        -ms-transform: none;
    606611        transform: none;
    607612}
    608613
     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
    609620/**
    610621 * Toolbar menu toggle
    611622 */
    li#wp-admin-bar-menu-toggle { 
    638649        .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
    639650        .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
    640651        .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 {
    642653                top: 0px;
    643654                left: 36px;
    644655        }
    li#wp-admin-bar-menu-toggle { 
    677688
    678689        .auto-fold #adminmenu div.wp-menu-image {
    679690                height: 30px;
    680                 width: 34px;
    681691                position: absolute;
    682692                z-index: 25;
    683693        }
    li#wp-admin-bar-menu-toggle { 
    716726                z-index: 10000;
    717727        }
    718728
    719         .auto-fold #collapse-menu span {
     729        .auto-fold #collapse-menu .collapse-button-label {
    720730                display: none;
    721731        }
    722732
    723         .auto-fold #collapse-button div {
    724                 background: none;
     733        .auto-fold #collapse-button .screen-reader-text {
     734                display: inline;
    725735        }
    726736
    727737        /* rtl:ignore */
    728         .auto-fold #collapse-button div:after {
     738        .auto-fold #collapse-button .collapse-button-icon:after {
    729739                -webkit-transform: rotate(180deg);
    730740                -ms-transform: rotate(180deg);
    731741                transform: rotate(180deg);
    732742        }
    733743
    734         .rtl.auto-fold #collapse-button div:after {
     744        .rtl.auto-fold #collapse-button .collapse-button-icon:after {
    735745                -webkit-transform: none;
    736746                -ms-transform: none;
    737747                transform: none;
  • src/wp-admin/css/colors/_admin.scss

    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 { 
    235235
    236236/* Admin Menu: collapse button */
    237237
    238 #collapse-menu {
    239     color: $menu-collapse-text;
     238#collapse-button {
     239        color: $menu-collapse-text;
    240240}
    241241
    242 #collapse-menu:hover {
    243     color: $menu-collapse-focus-text;
     242#collapse-button:hover,
     243#collapse-button:focus {
     244        color: $menu-collapse-focus-icon;
    244245}
    245246
    246 #collapse-button div:after {
    247     color: $menu-collapse-icon;
     247#collapse-button .collapse-button-icon:after {
     248        color: $menu-collapse-icon;
    248249}
    249250
    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;
    252253}
    253254
    254255
  • src/wp-admin/js/common.js

    diff --git src/wp-admin/js/common.js src/wp-admin/js/common.js
    index dda9247..70a1b4d 100644
    $(document).ready( function() { 
    208208                $(e.target).parent().siblings('a').get(0).click();
    209209        });
    210210
    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();
    213221
    214222                // reset any compensation for submenus near the bottom of the screen
    215223                $('#adminmenu div.wp-submenu').css('margin-top', '');
    $(document).ready( function() { 
    245253                        }
    246254                }
    247255
     256                if ( state == 'folded' ) {
     257                        label.text( expandMenu );
     258                } else {
     259                        label.text( collapseMenu );
     260                }
     261
    248262                $( document ).trigger( 'wp-collapse-menu', { state: state } );
    249263        });
    250264
  • src/wp-admin/menu-header.php

    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 ) { 
    212212                echo "</li>";
    213213        }
    214214
    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>';
    217220        echo '</li>';
    218221}
    219222
  • src/wp-includes/script-loader.php

    diff --git src/wp-includes/script-loader.php src/wp-includes/script-loader.php
    index d304498..732d4dd 100644
    function wp_default_scripts( &$scripts ) { 
    7979
    8080        $scripts->add( 'common', "/wp-admin/js/common$suffix.js", array('jquery', 'hoverIntent', 'utils'), false, 1 );
    8181        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' )
    8385        ) );
    8486
    8587        $scripts->add( 'wp-a11y', "/wp-includes/js/wp-a11y$suffix.js", array( 'jquery' ), false, 1 );