Adminbar: Unnatural focus outline in frontend

[wildworks]

The admin bar menu items are expected to change color when focused. However, on the front end, the browser's default outline is also displayed along with the color change.

To ensure consistency between the frontend and the dashboard, I believe this outline should be removed. This issue does not occur on the dashboard because it has styles that reset the outline.

​https://github.com/WordPress/wordpress-develop/blob/3b11171716f83efa10787a24ef8a9dae53463a61/src/wp-admin/css/common.css#L270

[wildworks]

Differences in focus styles between front-end and back-end

[joedolson]

Are you sure you're not getting a style leak from the theme? It's common for theme styles to apply to the admin bar.

[hbhalodia]

Hi @joedolson, I can confirm the issue shared by @wildworks exists. I can see the styles are being applied and there is no any style leak from theme. The outline style attached to the frontend admin bar is coming from the browser default outline style.

I have worked on it and added the style to remove the outline from here src/wp-includes/css/admin-bar.css particularly targeting the admin bar.

Let me know the fix added is in correct file or it should be moved somewhere else, I would be happy to update the PR as per feedback.

Thanks,

Trac ticket: https://core.trac.wordpress.org/ticket/65177

## Description

• Admin bar on wp-admin page was having outline set as 0, but on frontend the default outline was being shown which was having inconsistency with admin page admin bar.
• PR aims to remove the outline from the frontend admin bar, which mimics exactly the admin bar on wp-admin side.

## Screenshots

Before	After

## Use of AI Tools

• None

Hi @t-hamano, Thanks for the information. I was able to visualize the high constrast mode behavior using dev tools as suggested. Below are the details after applying the fix,

## High Contrast Mode

## No High Contrast Mode

Both shows the intended results, with and without contrast. Making outline transparent naturally and highlighting the options in high contrast using outline.

Thanks,

[wildworks]

The outline style attached to the frontend admin bar is coming from the browser default outline style.

That's right. This issue needs to be fixed at the core.

[wildworks]

In 62459:

Toolbar: Fix unnatural focus outline on frontend.

Make the focus outline transparent to avoid showing an unnatural focus outline on the front end. In Windows high contrast mode, the focus outline is still displayed as before.

Props hbhalodia, joedolson, wildworks.
Fixes #65177.