WordPress.org

Make WordPress Core

Ticket #29958: 29958.diff

File 29958.diff, 12.6 KB (added by afercia, 3 years ago)
  • src/wp-admin/css/admin-menu.css

     
    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}
     
    547547        display: none;
    548548}
    549549
    550 #collapse-menu {
    551         font-size: 13px;
     550#collapse-button {
     551        display: block;
     552        width: 100%;
     553        height: 34px;
     554        margin: 0;
     555        border: none;
     556        padding: 0;
     557        position: relative;
     558        overflow: visible;
    552559        line-height: 34px;
    553         margin-top: 10px;
    554         color: #a0a5aa;
    555         color: rgba(240,245,250,0.6);
    556         -webkit-transition: all .1s ease-in-out;
    557         transition: all .1s ease-in-out;
     560        background: none;
     561        color: #aaa;
     562        cursor: pointer;
     563        outline: 0;
    558564}
    559565
    560 #collapse-menu:hover,
    561 #collapse-menu:hover #collapse-button div:after {
     566#collapse-button:hover,
     567#collapse-button:focus {
    562568        color: #00b9eb;
    563569}
    564570
    565 .folded #collapse-menu span {
    566         display: none;
     571#collapse-button .collapse-button-icon,
     572#collapse-button .collapse-button-label {
     573        /* absolutely positioned to avoid 1px shift in IE when button is pressed */
     574        display: block;
     575        position: absolute;
     576        top: 0;
     577        left: 0;
     578        line-height: 34px;
    567579}
    568580
    569 #collapse-button,
    570 #collapse-button div {
    571         width: 15px;
    572         height: 15px;
     581#collapse-button .collapse-button-icon {
     582        width: 36px;
     583        height: 34px;
    573584}
    574585
    575 #collapse-button {
    576         float: left;
    577         height: 15px;
    578         margin: 10px 8px 10px 11px;
    579         width: 15px;
    580         -webkit-border-radius: 10px;
    581         border-radius: 10px;
     586#collapse-button .collapse-button-label {
     587        padding: 0 0 0 36px;
    582588}
    583589
    584 #wpwrap #collapse-button div {
    585         padding: 0;
     590.folded #collapse-button .collapse-button-label {
     591        display: none;
    586592}
    587593
    588 #collapse-button div:after {
     594#collapse-button .collapse-button-icon:after {
    589595        content: "\f148";
    590596        display: block;
    591         line-height: 15px;
    592         left: -3px;
    593         top: -3px;
    594         color: #a0a5aa;
    595         color: rgba(240,245,250,0.6);
     597        position: relative;
     598        top: 7px;
     599        text-align: center;
    596600        font: normal 20px/1 dashicons !important;
    597601        speak: none;
    598         margin: 0 auto;
    599         padding: 0 !important;
    600         position: relative;
    601         text-align: center;
    602         width: 20px;
    603         -webkit-transition: all .1s ease-in-out;
    604         transition: all .1s ease-in-out;
    605602        -webkit-font-smoothing: antialiased;
    606603        -moz-osx-font-smoothing: grayscale;
    607604}
    608605
    609606/* rtl:ignore */
    610 .folded #collapse-button div:after,
    611 .rtl #collapse-button div:after {
     607.folded #collapse-button .collapse-button-icon:after,
     608.rtl #collapse-button .collapse-button-icon:after {
    612609        -webkit-transform: rotate(180deg);
    613610        -ms-transform: rotate(180deg);
    614611        transform: rotate(180deg);
    615612}
    616613
    617 .rtl.folded #collapse-button div:after {
     614.rtl.folded #collapse-button .collapse-button-icon:after {
    618615        -webkit-transform: none;
    619616        -ms-transform: none;
    620617        transform: none;
    621618}
    622619
     620#collapse-button .collapse-button-icon:after,
     621#collapse-button .collapse-button-label {
     622        -webkit-transition: all .1s ease-in-out;
     623        transition: all .1s ease-in-out;
     624}
     625
    623626/**
    624627 * Toolbar menu toggle
    625628 */
     
    652655        .auto-fold #adminmenu .wp-has-current-submenu .wp-submenu.sub-open,
    653656        .auto-fold #adminmenu .wp-has-current-submenu.opensub .wp-submenu,
    654657        .auto-fold #adminmenu a.menu-top:focus + .wp-submenu,
    655         .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu  {
     658        .auto-fold #adminmenu .wp-has-current-submenu a.menu-top:focus + .wp-submenu {
    656659                top: 0px;
    657660                left: 36px;
    658661        }
     
    731734                z-index: 10000;
    732735        }
    733736
    734         .auto-fold #collapse-menu span {
     737        .auto-fold #collapse-menu .collapse-button-label {
    735738                display: none;
    736739        }
    737740
    738         .auto-fold #collapse-button div {
    739                 background: none;
    740         }
    741 
    742741        /* rtl:ignore */
    743         .auto-fold #collapse-button div:after {
     742        .auto-fold #collapse-button .collapse-button-icon:after {
    744743                -webkit-transform: rotate(180deg);
    745744                -ms-transform: rotate(180deg);
    746745                transform: rotate(180deg);
    747746        }
    748747
    749         .rtl.auto-fold #collapse-button div:after {
     748        .rtl.auto-fold #collapse-button .collapse-button-icon:after {
    750749                -webkit-transform: none;
    751750                -ms-transform: none;
    752751                transform: none;
  • src/wp-admin/css/colors/_admin.scss

     
    227227
    228228/* Admin Menu: collapse button */
    229229
    230 #collapse-menu {
     230#collapse-button {
    231231    color: $menu-collapse-text;
    232232}
    233233
    234 #collapse-menu:hover {
    235     color: $menu-collapse-focus-text;
     234#collapse-button:hover,
     235#collapse-button:focus {
     236    color: $menu-submenu-focus-text;
    236237}
    237238
    238 #collapse-button div:after {
    239     color: $menu-collapse-icon;
    240 }
    241 
    242 #collapse-menu:hover #collapse-button div:after {
    243     color: $menu-collapse-focus-icon;
    244 }
    245 
    246 
    247239/* Admin Bar */
    248240
    249241#wpadminbar {
  • src/wp-admin/js/common.js

     
    196196                pinnedMenuTop = false,
    197197                pinnedMenuBottom = false,
    198198                menuTop = 0,
     199                menuState,
    199200                menuIsPinned = false,
    200201                height = {
    201202                        window: $window.height(),
     
    211212                $(e.target).parent().siblings('a').get(0).click();
    212213        });
    213214
    214         $('#collapse-menu').on('click.collapse-menu', function() {
    215                 var respWidth, state;
     215        $( '#collapse-button' ).on( 'click.collapse-menu', function() {
     216                var viewportWidth = getViewportWidth() || 961;
    216217
    217218                // reset any compensation for submenus near the bottom of the screen
    218219                $('#adminmenu div.wp-submenu').css('margin-top', '');
    219220
    220                 if ( window.innerWidth ) {
    221                         // window.innerWidth is affected by zooming on phones
    222                         respWidth = Math.max( window.innerWidth, document.documentElement.clientWidth );
    223                 } else {
    224                         // IE < 9 doesn't support @media CSS rules
    225                         respWidth = 961;
    226                 }
    227 
    228                 if ( respWidth && respWidth < 960 ) {
     221                if ( viewportWidth < 960 ) {
    229222                        if ( $body.hasClass('auto-fold') ) {
    230223                                $body.removeClass('auto-fold').removeClass('folded');
    231224                                setUserSetting('unfold', 1);
    232225                                setUserSetting('mfold', 'o');
    233                                 state = 'open';
     226                                menuState = 'open';
    234227                        } else {
    235228                                $body.addClass('auto-fold');
    236229                                setUserSetting('unfold', 0);
    237                                 state = 'folded';
     230                                menuState = 'folded';
    238231                        }
    239232                } else {
    240233                        if ( $body.hasClass('folded') ) {
    241234                                $body.removeClass('folded');
    242235                                setUserSetting('mfold', 'o');
    243                                 state = 'open';
     236                                menuState = 'open';
    244237                        } else {
    245238                                $body.addClass('folded');
    246239                                setUserSetting('mfold', 'f');
    247                                 state = 'folded';
     240                                menuState = 'folded';
    248241                        }
    249242                }
    250243
    251                 currentMenuItemHasPopup();
    252                 $document.trigger( 'wp-collapse-menu', { state: state } );
     244                $document.trigger( 'wp-collapse-menu', { state: menuState } );
    253245        });
    254246
    255247        // Handle the `aria-haspopup` attribute on the current menu item when it has a sub-menu.
    256248        function currentMenuItemHasPopup() {
    257                 var respWidth,
    258                         $current = $( 'a.wp-has-current-submenu' );
     249                var $current = $( 'a.wp-has-current-submenu' );
    259250
    260                 if ( window.innerWidth ) {
    261                         respWidth = Math.max( window.innerWidth, document.documentElement.clientWidth );
    262                 } else {
    263                         respWidth = 961;
    264                 }
    265 
    266                 if ( $body.hasClass( 'folded' ) || ( $body.hasClass( 'auto-fold' ) && respWidth && respWidth <= 960 && respWidth > 782 ) ) {
     251                if ( 'folded' === menuState ) {
    267252                        // When folded or auto-folded and not responsive view, the current menu item does have a fly-out sub-menu.
    268253                        $current.attr( 'aria-haspopup', 'true' );
    269254                } else {
     
    272257                }
    273258        }
    274259
    275         $document.on( 'wp-window-resized wp-responsive-activate wp-responsive-deactivate', currentMenuItemHasPopup );
     260        $document.on( 'wp-menu-state-set wp-collapse-menu wp-responsive-activate wp-responsive-deactivate', currentMenuItemHasPopup );
    276261
    277262        /**
    278263         * Ensure an admin submenu is within the visual viewport.
     
    836821                },
    837822
    838823                trigger: function() {
    839                         var width;
     824                        var viewportWidth = getViewportWidth();
    840825
    841                         if ( window.innerWidth ) {
    842                                 // window.innerWidth is affected by zooming on phones
    843                                 width = Math.max( window.innerWidth, document.documentElement.clientWidth );
    844                         } else {
    845                                 // Exclude IE < 9, it doesn't support @media CSS rules
     826                        // Exclude IE < 9, it doesn't support @media CSS rules.
     827                        if ( ! viewportWidth ) {
    846828                                return;
    847829                        }
    848830
    849                         if ( width <= 782 ) {
     831                        if ( viewportWidth <= 782 ) {
    850832                                if ( ! wpResponsiveActive ) {
    851833                                        $document.trigger( 'wp-responsive-activate' );
    852834                                        wpResponsiveActive = true;
     
    858840                                }
    859841                        }
    860842
    861                         if ( width <= 480 ) {
     843                        if ( viewportWidth <= 480 ) {
    862844                                this.enableOverlay();
    863845                        } else {
    864846                                this.disableOverlay();
     
    912894                aria_button_if_js();
    913895        });
    914896
     897        /**
     898         * @summary Get the viewport width.
     899         *
     900         * @since 4.7
     901         *
     902         * @returns {number|boolean} The current viewport width or false if the
     903         *                           browser doesn't support innerWidth (IE < 9).
     904         */
     905        function getViewportWidth() {
     906                var viewportWidth = false;
     907
     908                if ( window.innerWidth ) {
     909                        // On phones, window.innerWidth is affected by zooming.
     910                        viewportWidth = Math.max( window.innerWidth, document.documentElement.clientWidth );
     911                }
     912
     913                return viewportWidth;
     914        }
     915
     916        /**
     917         * @summary Set the admin menu collapsed/expanded state.
     918         *
     919         * Sets the global variable `menuState` and triggers a custom event passing
     920         * the current menu state.
     921         *
     922         * @since 4.7
     923         *
     924         * @returns {void}
     925         */
     926        function setMenuState() {
     927                var viewportWidth = getViewportWidth() || 961;
     928
     929                if ( viewportWidth <= 782  ) {
     930                        menuState = 'responsive';
     931                } else if ( $body.hasClass( 'folded' ) || ( $body.hasClass( 'auto-fold' ) && viewportWidth <= 960 && viewportWidth > 782 ) ) {
     932                        menuState = 'folded';
     933                } else {
     934                        menuState = 'open';
     935                }
     936
     937                $document.trigger( 'wp-menu-state-set', { state: menuState } );
     938        }
     939
     940        // Set the menu state when the window gets resized.
     941        $document.on( 'wp-window-resized.set-menu-state', setMenuState );
     942
     943        /**
     944         * @summary Set ARIA attributes on the collapse/expand menu button.
     945         *
     946         * When the admin menu is open or folded, updates the `aria-expanded` and
     947         * `aria-label` attributes of the button to give feedback to assistive
     948         * technologies. In the responsive view, the button is always hidden.
     949         *
     950         * @since 4.7
     951         *
     952         * @returns {void}
     953         */
     954        $document.on( 'wp-menu-state-set wp-collapse-menu', function( event, eventData ) {
     955                var $collapseButton = $( '#collapse-button' ),
     956                        ariaExpanded = 'true',
     957                        ariaLabelText = commonL10n.collapseMenu;
     958
     959                if ( 'folded' === eventData.state ) {
     960                        ariaExpanded = 'false';
     961                        ariaLabelText = commonL10n.expandMenu;
     962                }
     963
     964                $collapseButton.attr({
     965                        'aria-expanded': ariaExpanded,
     966                        'aria-label': ariaLabelText
     967                });
     968        });
     969
    915970        window.wpResponsive.init();
    916971        setPinMenu();
     972        setMenuState();
    917973        currentMenuItemHasPopup();
    918974        makeNoticesDismissible();
    919975        aria_button_if_js();
  • src/wp-admin/menu-header.php

     
    234234                echo "</li>";
    235235        }
    236236
    237         echo '<li id="collapse-menu" class="hide-if-no-js"><div id="collapse-button"><div></div></div>';
    238         echo '<span>' . esc_html__( 'Collapse menu' ) . '</span>';
    239         echo '</li>';
     237        echo '<li id="collapse-menu" class="hide-if-no-js">' .
     238                '<button type="button" id="collapse-button" aria-label="' . esc_attr__( 'Collapse Main menu' ) . '" aria-expanded="true">' .
     239                '<span class="collapse-button-icon" aria-hidden="true"></span>' .
     240                '<span class="collapse-button-label">' . __( 'Collapse menu' ) . '</span>' .
     241                '</button></li>';
    240242}
    241243
    242244?>
  • src/wp-includes/script-loader.php

     
    7777
    7878        $scripts->add( 'common', "/wp-admin/js/common$suffix.js", array('jquery', 'hoverIntent', 'utils'), false, 1 );
    7979        did_action( 'init' ) && $scripts->localize( 'common', 'commonL10n', array(
    80                 'warnDelete' => __( "You are about to permanently delete these items.\n  'Cancel' to stop, 'OK' to delete." ),
    81                 'dismiss'    => __( 'Dismiss this notice.' ),
     80                'warnDelete'   => __( "You are about to permanently delete these items.\n  'Cancel' to stop, 'OK' to delete." ),
     81                'dismiss'      => __( 'Dismiss this notice.' ),
     82                'collapseMenu' => __( 'Collapse Main menu' ),
     83                'expandMenu'   => __( 'Expand Main menu' ),
    8284        ) );
    8385
    8486        $scripts->add( 'wp-a11y', "/wp-includes/js/wp-a11y$suffix.js", array( 'jquery' ), false, 1 );