Improve the accessibility of focus outlines

There are a number of places where I think we should be setting an outline where it isn't right now. I've included a patch and an interdiff. All AI generated.

The Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

Met with @mgifford @jurgenhaas @boromor to discuss and refactor the issue summary on this issue, since it's copied verbatim from the Gin issue queue and is out of date.

With the conflict here https://git.drupalcode.org/project/drupal/-/merge_requests/16774/conflicts

I think we want the new variable names (not gin) but to remove the opacity. So something like:

[data-admin-focus="green"] {
  --admin-color-focus: light-dark(#067a6c, #22b8a5);
}

Fixed the performance test now we are all green

Issue summary called for removing the box shadow which was not entirely removed yet. Also @mgifford raised in #12 the situation of the non-default accents also not meeting accessibility guidelines. So looked at these with LLM guidance.

In accent.pcss.css the four non-default presets now use solid light and dark pairs. Green uses the values @mgifford proposed in #12. The other two pairs are derived the same way, a darker tone for light mode and a lighter one for dark mode, and all meet 3:1 on the theme's lightest and darkest surfaces. The accent preset simply uses the primary colour itself. These are design choices, so need to be reviewed for that.

Also, the media library preview wrapper, the dropbutton item at the old line 636, and the checkbox and radio rings for the checked, error, and error-checked-radio states now rely on the outline only. The two box-shadow variables are removed. The remaining offset variable is renamed to --outline-offset so it sits next to --outline-size instead of using the old box-shadow name; it is used in the same four places as before.

Could we get updated screenshots?

Taking a look around, it looks like some focus states are still set to box shadow:

• core/themes/default_admin/css/components/form--checkbox-toggle.pcss.css:71
• core/themes/default_admin/css/components/icon-link.pcss.css:33 and 47
• core/themes/default_admin/css/components/node-preview.pcss.css:113
• core/themes/default_admin/css/components/views-ui.pcss.css:1228

I had Claude scan and it found these

&amp;></td>
      <td><code>0 0 0 1px --admin-color-focus-border, 0 0 0 4px --admin-color-focus

0 0 0 1.5px --admin-color-bg-surface, 0 0 0 3code></td>
      <td>none set</td>
    </tr>
    <tr>
      <td>5</td>
      <td><code>components/icon-link.pcss.css:45

Everything else looks good besides 👆

Asked my agent to help with screenshots because this would have taken hours :) It could not screenshot inside the media dialog, had issues opening it. Otherwise here are the before/afters.

Default outline

Button

Text input

Theme settings pill radio

Box shadows replaced by outlines

Checked checkbox

Unchecked checkbox

Radio

Toggle switch

Dropbutton item

Views UI add display link

Media library item

Media library remove icon link

Focus colour presets

Green

Orange

Accent

Green, dark mode

The views add button screenshot was showing an issue :) The Views tabs block in views-ui.pcss.css had an a:focus { outline: none; } covering every tab link. On main the Add link was the only one with a visible focus state, through its own box-shadow ring. The earlier change removed that ring and assumed the theme's default outline would take over, but this rule kept suppressing it, so the Add link ended up with nothing. Not this rule is removed. The default outline now reaches the Add link, as the new screenshots show, and as a side effect the display tabs themselves, such as "Page", also get a focus outline when tabbed to, which they never had before.

So a positive side effect as that these DID NOT have focus states before but now they do:

Views UI display tab, non-active

Views UI display tab, active

This was done again with LLM assistance.

In #22 I mentioned my LLM had issues with the media dialog, figured that out and also filling in the missing screenshot for the node preview bar. I personally think these look good :)

Media library dialog, select checkbox

Node preview bar, back link

Node preview bar, view mode select

@gabor you rock with the perfect screenshots! That made reviewing so much easier. This looks good

Never feel confident when I open a CSS MR whether I'm going to feel competent enough to commit it or not, but this is another one where the resulting CSS is simpler than what it's replacing, and the screenshots and manual testing done on the issue make it clear it's doing what it's supposed to.

Committed/pushed to main, thanks!

Got slightly over-excited here we need an 11.x backport MR.

Backported! Had to update StylesheetBytes in core/profiles/demo_umami/tests/src/FunctionalJavascript/MultipleRequestsPerformanceTestAssertions/umamiNodeAddEditor.yml