Improve and extend focus styles for Windows High Contrast mode

[afercia]

See [44544] and #41286.

[44544] introduced new focus styles for the Windows High Contrast mode only for the main user interface elements like buttons, links, media views elements.

In order to cover all the controls in the admin, there's the need to explore the admin parts that make use of uncommon styles or don't inherit the relevant CSS, for example the Customizer, the themes browser, etc.

Some thorough testing on Windows would be greatly appreciated.

[afercia]

Discussed during today's accessibility bug scrub and agreed to move this ticket to Future Release as it's something to address. Will need research and testing.

[afercia]

See comments 11 and 12 from #47117.

[afercia]

In 48293:

Accessibility: Improve the focus style for Windows High Contrast mode in various parts of the admin interface.

Continues the introduction in core of new focus styles dedicated to Windows High Contrast mode. The new styles use a transparent CSS outline.
This change covers some parts of the interface for the meta boxes, Widgets, and the Customizer.

Props joedolson, kjellr, antpb, mikeschroder, Hareesh Pillai.
See #41286, #45910.
Fixes #47117.

[joedolson]

Work has been done on this, it needs assessment to identify whether more changes are needed.

[joedolson]

Noting that the commit r57553 on #51870 also fixed quite a few instances of missing high contrast focus outlines, reducing the surface of this issue.

[joedolson]

Moving to 6.6. This needs research; it may be a fairly small number of instances still outstanding, but the research is likely to be more time consuming than what we have left this cycle.

[sabernhardt]

I'm moving this to Future Release until more instances are identified.

[jainil07]

On #WCAhmedabad Contributor day Worked with @rcreators and found some issues.

• In post edit screen(gutenberg) - Right side inspector control accordion open close icon missing

• Right side Dimension box missing border

• Dropdown box missing border

• All the radio buttons missing selected state in admin.

• Comment Reply textarea missing top blue focus

• Media Gallery if there is empty cropped image, we cant see it. May be adding border to each image as grid.

• Attachment details popup missing border

• In screen option, clicking on any tab activate it but not removing focus blue border from right side

• When focus removed, it looks perfect, this should be the result in previous step

• Gutengerg - all circular items missing whats selected or what to select. Option should be visible somehow? Also right side box missing border.

[joedolson]

Milestoning this for 7.2. When this last got a lot of attention, not many developers had a Windows set up available for doing testing in Windows High Contrast Mode. However, with Playground, we can test this using a virtual environment like ​https://playground.wordpress.net/?wp=trunk&php=8.3, running WordPress trunk anywhere.

[joedolson]

Core issues:

• Adminbar search input (no focus state in WHCM)
• Select inputs .wp-core-ui select has no outline.
• Adminbar submenu Edit Profile/username combo link (focus state has insufficient height)
• when testing in Playground, .wp-core-ui select:focus-visible has color set to 'transparent', and becomes invisible in WHCM and overrides the outline color. Not clear where this comes from. Observed in bulk actions dropdowns.
• Select input dropdown arrow remains dark in high contrast mode.
• All button focus states are very subtle, and hard to spot.
• Theme browser navigation and close buttons have no :focus state
• Plugin information tabs missing outline

Needs to move upstream to Gutenberg

• Command palette has no boundary outline.
• Editor 'Options' button vertical ellipse is invisible on :hover in high contrast
• Options panel has no visible focus states; impossible to navigate with keyboard.
• There's an invisible tab stop between the block inserter's tabpanel and the search input.

(Testing still in process.)

In progress ticket to fix issues with Windows High Contrast Mode focus styling.

• [ ] Adminbar search input (no focus state in WHCM)
• [ ] Select inputs .wp-core-ui select has no outline.
• [ ] Adminbar submenu Edit Profile/username combo link (focus state has insufficient height)
  • when testing in Playground, .wp-core-ui select:focus-visible has color set to 'transparent', and becomes invisible in WHCM and overrides the outline color. Not clear where this comes from. Observed in bulk actions dropdowns.
• [ ] Select input dropdown arrow remains dark in high contrast mode.
• [ ] All button focus states are very subtle, and hard to spot.
• [ ] Theme browser navigation and close buttons have no :focus state
• [ ] Plugin information tabs missing outline

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

Use of AI Tools

None

[joedolson]

Gutenberg ticket raised at ​https://github.com/WordPress/gutenberg/issues/84044

I'm inclined to handle the adminbar issue separately, as it will require some more significant adjustments, and is a different class of problem than the others.