WordPress.org
Get WordPress

Make WordPress Core

Changeset 63009


Ignore:
Timestamp:
08/04/2026 05:28:48 PM (6 weeks ago)
Author:
afercia
Message:

Toolbar: Improve the focus style indication.

  • Updates the toolbar items styling by adding a more prominent focus indicator.
  • Adjusts label and icon coloring selectors (including mobile-specific focus states).
  • Refines the 'Howdy menu' dropdown layout and focus styles.
  • Tweaks the responsive menu toggle item sizing.

Props afercia, joedolson, sabernhardt, khokansardar, jns141191, iamraju, sukhendu2002, shamimmoeen, ugyensupport.
Fixes #65445.
Fixes #65765.

Location:
trunk/src
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/admin-menu.css

    r62875 r63009  
    801801                padding: 0;
    802802                overflow: hidden;
    803                 outline: none;
    804803                text-decoration: none;
    805                 border: 1px solid transparent;
    806804                background: none;
    807                 height: 44px;
    808                 margin-left: -1px;
     805                height: 46px;
     806                box-sizing: border-box;
    809807        }
    810808
    … …  
    815813        li#wp-admin-bar-menu-toggle {
    816814                display: block;
    817         }
    818 
    819         #wpadminbar #wp-admin-bar-menu-toggle a:hover {
    820                 border: 1px solid transparent;
    821815        }
    822816
    … …  
    825819                display: inline-block;
    826820                float: left;
    827                 font: normal 40px/45px dashicons;
     821                font: normal 40px/46px dashicons;
    828822                vertical-align: middle;
    829                 outline: none;
    830823                margin: 0;
    831824                -webkit-font-smoothing: antialiased;
    832825                -moz-osx-font-smoothing: grayscale;
    833                 height: 44px;
    834                 width: 50px;
     826                height: 46px;
     827                width: 52px;
    835828                padding: 0;
    836829                border: none;

  • trunk/src/wp-admin/css/colors/_admin.scss

    r62959 r63009  
    417417}
    418418
    419 #wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
    420 #wpadminbar:not(.mobile) > #wp-toolbar li.hover span.ab-label,
    421 #wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
     419#wpadminbar > #wp-toolbar li:hover span.ab-label,
     420#wpadminbar > #wp-toolbar li.hover span.ab-label,
     421/* The adminbar menu may output either links or focusable div elements. */
     422/* As such, we target the focus state without specifying the element type. */
     423#wpadminbar > #wp-toolbar :focus span.ab-label {
    422424        color: variables.$menu-submenu-focus-text;
    423425}
    … …  
    450452
    451453#wpadminbar .quicklinks li .blavatar,
    452 #wpadminbar .menupop .menupop > .ab-item:before {
     454#wpadminbar .menupop .menupop > .ab-item:before,
     455#wpadminbar.mobile .quicklinks .ab-icon:before,
     456#wpadminbar.mobile .quicklinks .ab-item:before {
    453457        color: variables.$menu-icon;
    454458}
    … …  
    475479}
    476480
     481// Note that the icon of the site-name item is not wrapped within a span with class ab-icon like other items.
    477482#wpadminbar .quicklinks li a:hover .blavatar,
    478483#wpadminbar .quicklinks li a:focus .blavatar,
    … …  
    480485#wpadminbar .menupop .menupop > .ab-item:hover:before,
    481486#wpadminbar.mobile .quicklinks .hover .ab-icon:before,
    482 #wpadminbar.mobile .quicklinks .hover .ab-item:before {
     487#wpadminbar.mobile .quicklinks .hover .ab-item:before,
     488#wpadminbar.mobile .quicklinks .ab-item:focus:before {
    483489        color: variables.$menu-submenu-focus-text;
    484490}
    485 
    486 #wpadminbar.mobile .quicklinks .ab-icon:before,
    487 #wpadminbar.mobile .quicklinks .ab-item:before {
    488         color: variables.$menu-icon;
    489 }
    490 
    491491
    492492/* Admin Bar: search */
    … …  
    532532}
    533533
    534 #wpadminbar #wp-admin-bar-user-info a:hover .display-name {
    535         color: variables.$menu-submenu-focus-text;
    536 }
    537 
    538534#wpadminbar #wp-admin-bar-user-info .username {
    539535        color: variables.$menu-submenu-text;
    540536}
    541537
     538#wpadminbar #wp-admin-bar-user-info a:hover .display-name,
     539#wpadminbar #wp-admin-bar-user-info a:focus .display-name,
     540#wpadminbar #wp-admin-bar-user-info a:hover .username,
     541#wpadminbar #wp-admin-bar-user-info a:focus .username {
     542        color: variables.$menu-submenu-focus-text;
     543}
    542544
    543545/* Pointers */

  • trunk/src/wp-includes/css/admin-bar.css

    r62625 r63009  
    7878}
    7979
    80 #wpadminbar a:focus {
    81         outline-offset: -1px;
     80#wpadminbar a:focus,
     81#wpadminbar .ab-item[tabindex="0"]:focus {
     82        outline-offset: -2px;
    8283        /* Only visible in Windows High Contrast mode */
    8384        outline: 2px solid transparent;
     85        box-shadow: inset 0 -4px 0 0 currentColor;
     86        transition: box-shadow 0.1s linear;
     87}
     88
     89#wpadminbar .ab-submenu a:focus,
     90#wpadminbar .ab-submenu .ab-item[tabindex="0"]:focus {
     91        box-shadow: inset 4px 0 0 0 currentColor;
    8492}
    8593
    … …  
    226234#wpadminbar:not(.mobile) > #wp-toolbar li:hover span.ab-label,
    227235#wpadminbar > #wp-toolbar li.hover span.ab-label,
    228 #wpadminbar:not(.mobile) > #wp-toolbar a:focus span.ab-label {
     236/* The adminbar menu may output either links or focusable div elements. */
     237/* As such, we target the focus state without specifying the element type. */
     238#wpadminbar > #wp-toolbar :focus span.ab-label {
    229239        color: #72aee6;
    230240}
    … …  
    295305#wpadminbar li.hover .ab-item:before,
    296306#wpadminbar li:hover #adminbarsearch:before,
    297 #wpadminbar li #adminbarsearch.adminbar-focused:before {
     307#wpadminbar li #adminbarsearch.adminbar-focused:before,
     308#wpadminbar.mobile .quicklinks .ab-item:focus:before {
    298309        color: #72aee6;
    299310}
    … …  
    380391}
    381392
    382 #wpadminbar ul li:last-child,
    383 #wpadminbar ul li:last-child .ab-item {
    384         box-shadow: none;
    385 }
    386 
    387393/**
    388394 * Recovery Mode
    … …  
    453459        position: absolute;
    454460        left: -72px;
    455         top: 4px;
     461        top: 0;
    456462        width: 64px;
    457463        height: 64px;
    … …  
    467473        background: none;
    468474        padding: 0;
    469         height: 18px;
     475        line-height: 1.38461538;
    470476}
    471477
    … …  
    476482
    477483#wpadminbar #wp-admin-bar-user-info .username {
    478         color: #a7aaad;
    479484        font-size: 11px;
    480485}
    … …  
    912917                width: 52px;
    913918                padding: 0;
    914                 color: #a7aaad; /* @todo not needed? this text is hidden */
    915919                position: relative;
    916920        }
    … …  
    10321036                font-size: 16px;
    10331037                line-height: 1.5;
    1034                 color: #f0f0f1;
    1035         }
    1036 
    1037         #wpadminbar #wp-admin-bar-user-info a {
    1038                 padding-top: 4px;
    1039         }
    1040 
    1041         #wpadminbar #wp-admin-bar-user-info .username {
    1042                 line-height: 0.8 !important;
    1043                 margin-bottom: -2px;
    10441038        }
    10451039
Note: See TracChangeset for help on using the changeset viewer.