id	summary	reporter	owner	description	type	status	priority	milestone	component	version	severity	resolution	keywords	cc	focuses
65645	Focus indication: Make sure it is always at least 2 CSS pixels	afercia		"Discovered while testing the Reset Password screen for #65630.

Since the Admin Reskin in WordPress 7.0 the CSS values used for the focus indication changed. See [61645] / #64547. I can see two issues with that:

1. In some edge cases, the focus indication is too thin. This is a regression and needs to be fixed.
2. It a few cases, it is inconsistent.

Generally, the focus style for form elements in WordPress is made of two things:
- A 1 pixel border that changes color on focus.
- A box-shadow applied only on focus. In WordPress 6.9 the box shadow width was 1px. Since WordPress 7.0 it uses either 2px or 1.5px for displays with a minimum Device Pixel Ratio (DPR) of 2.

Note: not relevant in this context: for Windows high contrast mode, the focus style uses a transparent outline.

There are exceptions so please take the above as a simplification.

I'm glad to see the new `wp-base-styles` package uses [https://github.com/WordPress/gutenberg/blob/e42aaa2d3ad191e29f3dbc63e350a2ef8cf76b48/packages/base-styles/_mixins.scss#L541-L546 a media query] to distinguish between displayes with a DPR of 1 and displayes with a higher DPR.


{{{
@mixin admin-scheme($color-primary) {
	...
	--wp-admin-border-width-focus: 2px;
	@media ( -webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
		--wp-admin-border-width-focus: 1.5px;
	}

}}}

That's smart and avoids browsers on displays with a DPR of 1 to use rounding or anti-aliasing (sub-pixel rendering) which could potentially impact the rendering or the actual color contrast ratio of the focus indicator.

Basically, it is extremely important to use values that translate to full physical hardware pixels.

== Focus too thin.

I could find at least 3 occurrences of a hardcoded value `0 0 0 0.5px` for the focus indicator box-shadow. The value `0.5px` should be fixed anyways.

1. For `#pass1:focus, #pass1-text:focus`: this is the password field. Originally it used 2px, now decreased to 0.5px.
2. For `.mailserver-pass-wrap .button.wp-hide-pw:focus`. This is the button to reveal the password for the 'Post via email' in the Writing Settings. Probably a leftover because it is overridden by another rule from `wp-base-styles`.
3. Several form elements in the `.media-frame` context. Value decreased from 1px to 0.5px.

All the above cases should be reviewed to use the CSS variable `--wp-admin-border-width-focus`. A value of `0.5px` is only acceptable for non-critical decorative outlines, letting the browser round up or down or use antialiasing. It must not be used for focus indication.


== Inconsistencies

See attached screenshots. All of them were taken from a display with a default Device Pixel Ratio (DPR) of 2.

Some of these inconsistencies come from the point 3 above. They should be reviewed, for example the search field and other form elements in the Media Library an the Media dialog. Also, the focus style on the attachment thumbnails is inconsistent between the Media Library and the Medi adialog.

However, other inconsistencies are more subtle:
- The focus style assumes elements have a 1 pixel border but some don't. See for example the links to switch from 'list view' to 'grid view' in the media library.
- Edge cases, for example a scrollable div that is focusable because it uses `tabindex=""0""` uses an inconsistent focus style.


== Aside

The Web Content Accessibility Guidelines (WCAG 2.2) require focus indicators to be 'at least as large as the area of a 2 CSS pixel thick' for level AAA. WordPress aims for level AA. Still, we should not aim just for _minimum_ accessibility. Rather, WordPress should use best practices wherever possible. 

See WCAG 2.2
2.4.13 Focus Appearance (Level AAA) 
https://www.w3.org/TR/WCAG22/#focus-appearance
"	defect (bug)	new	normal	Awaiting Review	Administration	7.0	normal		has-screenshots		accessibility