Improve the accessibility of focus outlines

Problem/Motivation

Copied from the Gin issue queue, reported by @rkoller.

In general this does apply to Default Admin as of commit 00dfe3f40fe on main, however some of the Gin issue summary is inaccurate for Default Admin (see the notes in #2).

There are several problems in the context of focus outlines in Gin:

• Many visible focus colors don’t meet the minimum color contrast of 3:1 in light and dark mode. See the following Google sheet https://docs.google.com/spreadsheets/d/1won35PxhRFexJYE8FmZ4DCNTo7xEAxC85kpmqc0iqZg/edit?gid=657743239#gid=657743239&range=2:2 or focus_outlines.xlsx.zip for a table.



• The focus outline is defined by box-shadow: 0 0 0 1px var(--gin-color-focus-border),0 0 0 4px var(--gin-color-focus) - in addition to that for some selectors the outline property is set to none (gin.css in line 994 and 3466). Problem is, focus outlines defined by the box-shadow property are not visible in Forced Colors mode (see https://stackoverflow.com/a/52616313 - looks like Claro uses the same approach @andrewmacpherson proposed in the linked post)



• The one pixel wide focus border is barely visible and it looks more like a visual glitch than a stylistic device helping to visually separate the focus outline from the element it highlights. At the moment that focus border only helps to make the focus outline pass formally SC1.4.11 for most of the focus and accent colors in light mode, even though it is barely visible and not the selected focus or accent color but just semi-transparent black in light and dark mode instead.



• There is the problem of simultaneous contrast, at the moment the focus outline is directly "touching" the elements it highlights, while Claro is employing an outline offset. An offset isn’t solving the problem of the simultaneous contrast, but it is at least easing it. To illustrate the problem, if you set for example the focus color to "gin focus color (Default)" and the accent color to “Gin blue” in light mode and you focus the blue Drupal logo in the navigation sidebar or the primary button you have a hard time recognizing that the elements are in focus, since the color of the focus outline and the element in focus are close.

Discussed and iterated on the issue with @mgifford, @the_g_bomb, @katannshaw, and @drupa11y

WCAG SC 1.4.11 Non-text Contrast (Level AA).

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet