Add border to admin sidebar/bar for Windows high contrast mode

[wildworks]

When you enable high contrast mode on Windows, no border is drawn below the admin bar or to the right of the admin sidebar.

This makes the boundary between the content area and the navigation area unclear.

To address this issue in high contrast mode, both core and Gutenberg use an approach that adds styles like this one: outline: 1px solid transparent;

[wildworks]

Current view

[wildworks]

The view I want to look

[joedolson]

Makes sense to me!

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

## Issue

• When you enable high contrast mode on Windows, no border is drawn below the admin bar or to the right of the admin sidebar. This makes the boundary between the content area and the navigation area unclear.

[hbhalodia]

Hi @wildworks @joedolson, I have rasied the PR as per the suggestion - ​https://github.com/WordPress/wordpress-develop/pull/7127

Can you please review the patch and let me know if that needs some more work, I am happy to update the PR with requested changes.

Thank You.

[hbhalodia]

Path for issue - 61616

[hbhalodia]

Updated Patch

[wildworks]

@hbhalodia Thanks for the update. patch-61616-2.patch works fine for me.

[hbhalodia]

Thanks for the confirmation @wildworks.

[rcreators]

Hello @hbhalodia,

Thanks for the PR. It works as expected.

Before Patch: ​https://prnt.sc/7Ne0fZuMhufG

After Patch: ​https://prnt.sc/C6EwzGx9xaaR

This one looks ready to commit @joedolson

[sabernhardt]

the New content link icon is too tall on smaller screens

[sabernhardt]

option: add outlines for submenus

[sabernhardt]

possible outlines for the toolbar submenus

[sabernhardt]

possible outlines/borders for the admin menu's submenus

[sabernhardt]

PR 7163 is a good start but maybe not complete.

1. The toolbar's outline breaks under the New content link icon on smaller screens because the line-height is too tall on #wpadminbar #wp-admin-bar-new-content .ab-icon:before.
2. I would like to consider adding an outline (or border) for submenus. 61616.outline-submenus.diff​ keeps the 5px left border from r49961 and adds 1px for the other three sides, and it makes the current and non-current submenu styles more consistent. In the toolbar, if the incomplete outline around the Network Admin submenu is a significant problem, raising the second submenu's z-index to 100000 might help.

Also, the border around the mobile menu toggle appears when the page loads, and it does not change when focused. (border added in r26134)

[joedolson]

I'm in favor of adding the outline on submenus as well. It's clearly related to this topic, and it would greatly enhance the usability of high contrast mode.

The border on the mobile menu toggle maybe should be an independent ticket; although I could easily be convinced otherwise. Menus and their associated toggles are really just one component, after all.

[joedolson]

Adjusts line height of add new icon

[joedolson]

Updated patch adjusts the line-height on the add new icon to 1.27, which evens out the outlines. It doesn't appear to cause any problems; the visual alignment still works to my eye.

I'm inclined to commit this, even without resolving the multisite menu issue. I don't really see that as a significant problem. When resolving it, it results in a visible overlap between the two outlines, and I'm not sure that's an improvement.

I'm marking this for commit.

[joedolson]

In 59041:

Accessibility: Add border around menus and submenus in high contrast mode.

Add outlines and borders to mark the boundaries between the admin navigation menu and content and around adminbar submenus that are visible when Windows High Contrast Mode is enabled. This clarifies the page structure and makes high contrast mode easier to use.

Props wildworks, hbhalodia, sabernhardt, joedolson, rcreators.
Fixes #61616.