Skip to content

Improve the admin bar focus style #12179

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
afercia wants to merge 1 commit into
base: trunk
Choose a base branch
from
+13 −8
Open

Improve the admin bar focus style #12179

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 13 additions & 8 deletions src/wp-includes/css/admin-bar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,10 +77,18 @@ html:lang(he-il) .rtl #wpadminbar * {
box-shadow: none;
}

#wpadminbar a:focus {
#wpadminbar a:focus,
#wpadminbar .ab-item[tabindex="0"]:focus {
outline-offset: -1px;
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
box-shadow: inset 0 -4px 0 0 currentColor;

@sabernhardt sabernhardt Jun 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The currentColor has a conflict on narrower screens for core links with icons attached to .ab-item::before. Removing the old rule should fix it.

mismatched color for focus shadow on some top-level links
  • r26134 added #999 for .ab-item in the 'my-sites' and 'site-name' nodes on small screens.
  • r36587, one of the commits that edited the color value, questioned why the color rule was necessary.
  • The colors.css stylesheets use #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, so plugins such as "View Admin As" would display the correct color even though they have their icon on the ::before pseudo-element.
  • Yoast Duplicate Post defines #999 as the color, and that would need updating.

transition: box-shadow .1s linear;

@sabernhardt sabernhardt Jun 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Core is not perfectly consistent about the leading zero, but it is in the coding standards.

Suggested change
transition: box-shadow .1s linear;
transition: box-shadow 0.1s linear;

}

#wpadminbar .ab-submenu a:focus,
#wpadminbar .ab-submenu .ab-item[tabindex="0"]:focus {
box-shadow: inset 4px 0 0 0 currentColor;
}

#wpadminbar {
Expand Down Expand Up @@ -379,11 +387,6 @@ html:lang(he-il) .rtl #wpadminbar * {
float: right;
}

#wpadminbar ul li:last-child,
#wpadminbar ul li:last-child .ab-item {
box-shadow: none;
}

@afercia afercia Jun 16, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be double checked. I have no idea why the last item in a menu was supposed to not use a box-shadow. Had to remove it otherwise the new focus style wouldn't work.

@joedolson joedolson Jun 25, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did some exploring, but I couldn't see any good reason for it, either. I thought it could be a leftover from some older styles, but couldn't find evidence of that. It's old; been there since at least 3.3.

@sabernhardt sabernhardt Jun 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do not know of a reason to keep it either (otherwise, the specificity could be reduced).

r19328 added the box-shadow rule(s).

  • At that time, admin-bar.dev.css only added a box-shadow for the flyout submenu containers and the shortlink input, neither of which would be an li element or have the .ab-item class.
  • I did not find any mention of this :last-child box-shadow on the six tickets referenced in the commit message. Images below comment 29 on ticket 18197 show a shadow on the W logo, which would not be the last item in a list. The admin-bar-show-right-border-with-custom-menu.diff patch has a :last-child selector, but that relates to the search input.
  • r26072 removed border-right: 0 but kept box-shadow: none.

/**
* Recovery Mode
*/
Expand Down Expand Up @@ -452,20 +455,22 @@ html:lang(he-il) .rtl #wpadminbar * {
#wp-admin-bar-user-info .avatar {
position: absolute;
left: -72px;
top: 4px;
top: 0;
width: 64px;
height: 64px;
}

#wpadminbar #wp-admin-bar-user-info a {
background: none;
height: auto;
position: relative;
top: 4px;
}

#wpadminbar #wp-admin-bar-user-info span {
background: none;
padding: 0;
height: 18px;
line-height: 1.38461538;

@sabernhardt sabernhardt Jun 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changing the line-height is good.

However, the height gave some space between the username and "Edit Profile" (if the username does not match the display name). To preserve that design, the span elements could have a min-height of 18px.

username with minimum height

If the separation is unimportant, at least the small line-height should be removed for narrower screens. The negative margin seems fine with "editor" as the username, but it is probably better to remove that for characters with descenders. (The screenshots below do not include a min-height.)

username with patch, and with other possible changes

}

#wpadminbar #wp-admin-bar-user-info .display-name,
Expand Down
Loading