On the user interface translation page the outline of all four focusable elements in the filter translatable strings fieldset lacks the left border

This issue appears in Chrome v101 too.

It is caused by a single CSS property located in core/modules/locale/css/locale.admin.css, lines 1 to 3:

.locale-translate-filter-form .details-wrapper {
  overflow: hidden;
}

If you disable line 2, the focus outline works correctly. However, this causes other elements to misbehave: the filter and reset buttons will appear outside of the parent. This is because they have a float applied to them so the parent div does not stretch enough to contain floating child elements (a.k.a. the 'clearfix' problem). I don't understand why the form action buttons need a float to begin with.

Additionally, the overflow: hidden; also disables margin collapse, causing double margins. If you look at the space between Filter translatable strings and the String contains label, and compare it to for example /admin/config/system/site-information, you can see that there is too much margin. Disabling the line mentioned above also fixes this problem.

I can try to cook up a patch to fix this but I will need some more time to examine what is the common way Drupal core handles this part:

If you disable line 2, the focus outline works correctly. However, this causes other elements to misbehave: the filter and reset buttons will appear outside of the parent. This is because they have a float applied to them so the parent div does not stretch enough to contain floating child elements (a.k.a. the 'clearfix' problem).

I'd say there are two options to solve this at the core.locale level:

1. 'clearfix' the parent element
2. replace the child elements floats with a flexbox solution

P.S. Changing the issue component from 'Claro theme' to 'locale.module'.

Here's a patch that seems to solve this issue. Tested this for both Claro and Seven admin themes in Chrome, Firefox, Brave and Safari on Mac OS.

Background info:

The patch basically removes this css:

.locale-translate-filter-form .details-wrapper {
  overflow: hidden;
}

and adds a 'clearfix':

.locale-translate-filter-form .details-wrapper:after {
  display: table;
  clear: both;
  content: "";
}

Adding class clearfix to the .details-wrapper div would render the exact same result, but it seems that the classes for this element are applied at theme level, not by the core.locale module. So, IMO it feels more solid to solve this at the module level, instead of having to alter details.html.twig for each affected theme (i.e. Claro).

If anyone disagrees with this approach, please feel free to chime in.

Adding a screenshot with a before/after comparison for patch in #4 in Claro theme (Chrome v101 on MacOS).

Tested and seemed to work for me.

Unrelated fail

More unrelated fails

If adding the clearfix class resolves this, is there any reason why we can't add it to the details element using '#attributes'?

i.e.

$form['filters'] = [
      '#type' => 'details',
      '#title' => $this->t('Filter translatable strings'),
      '#open' => TRUE,
      '#attributes' => ['class' => ['clearfix']],
    ];

And then we can just remove the offending line of css without adding anything else?

So something like?

Yes, but we still need to remove this bit of css that causes the original issue

.locale-translate-filter-form .details-wrapper {
		- overflow: hidden;
}

If you can do that and verify the original problem is fixed (adding some screenshots would be neat), I think we're golden

No problem

- Followed steps to reproduce and verified issue
- Applied patch in #17, cleared caches, and verified issue is resolved -- all 3 fields in the form now have left border visible after patch applied
- Verified before/after PNGs in #17
- No notes on code (LGTM)

Thanks for the fast turnaround folks.

Committed to 10.1.x, backported to 10.0.x and 9.5.x

Because the risk of regression is low here and this is a user-facing issue, backported to 9.4.x.