Restore two-colour focus indicator

Problem/Motivation

Follow-up to correct a problem introduced in #3023311-68: Modal dialog style update → .

From comment #68 in the earlier issue, discussing the focus style for the close-dialog button:

According to the designs, the while border shouldn't be visible on the focus effect of the close button.

This was a wrong turn. The two-colour focus indicator IS intended. See comment #22 by @modulist in #3028099-22: Element focus: accessibility review → .

It was discussed in an earlier issue about focus styles. The idea is that the focus indicator would have a green line with sufficient contrast against an adjacent white line, so that no matter what the background colour, the two colours of the focus indicator would at least have a reliable contrast against each other. The benefits are:

1. It's easier than having to come up with a single focus colour which works against every background colour variant in Claro, or having to manage different shades of green for each background colour.
2. It's more robust against background colour scenarios that we can't know in advance, such as:
   • Controls positioned over an unpredictable background; notably images in media library, CKEditor, or layout builder with block content previews turned on.
   • Contrib modules which provide a background colour for a new render element in their own UI.
   • Users who employ background colour adjustments (and/or transparent overlays) as reading aids via browser add-ons, or other assistive technology (software, or even plastic monitor overlays).

We're not alone in using this method. Since implementing the two-colour focus style in Claro, the Chrome browser also introduced a two-colour focus outline by default. But Claro got there first :-)

Steps to reproduce

• Install Standard profile, then enable Claro as the admin theme.
• Open a dialog (e.g. media library)
• Press tab until the close-dialog "X" button has focus. The focus indicator is a single-colour green circular outline. This is a mistake.
• Tab until the a blue button in the dialog footer has focus. This shows the focus style which was originally intended. The focus outline has two colours (green and white) against the pale-grey footer background. The difference between the grey background and the white part of the focus ring is slight, so you may need a screen magnifier tool to see it. (You can also see it more clearly by by changing the footer background using browser dev tools.)

Proposed resolution

Restore the two-colour focus outline, to make it consistent with other

Remaining tasks

Important question: have we remove the two-colour outline style anywhere else?

• Controls positioned over image thumbnails in media library. DONE, these are GOOD.
• Other places...?

User interface changes

API changes

Data model changes

Release notes snippet