Autocomplete search results in an off-canvas form (like a custom block in layout builder) are nearly impossible to read:

Steps to reproduce:
- Install site on 8.6.x or 8.7.x with standard install profile
- Enable layout builder module
- Add several terms to the existing "Tags" vocabulary
- Add a custom block type with a term reference field to the tags vocab
- Enable layout builder for the existing "Basic Page" content type
- Edit layout, and add your custom block to the page
- Search for terms in the autocomplete field, and observe that the results list displays dark gray text on a slightly darker gray background
The reason it happens is a combination of these two rules:
off-canvas.base.css has this:
#drupal-off-canvas *, #drupal-off-canvas *:not(div) {
background: #444;
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
color: #ddd;
}
That sets the background of the autocomplete <li> to that dark color.
Then we have this in off-canvas.form.css:
#drupal-off-canvas .ui-autocomplete li a {
color: #595959 !important;
cursor: pointer;
padding: 5px;
}
Which sets the links to that dark gray.
Comments
Comment #2
bkosborneComment #3
bkosborneComment #4
anybodyCan someone explain why this code is used at all?
#drupal-off-canvas *The ID hard to override in CSS and this selector might badly influence the style of several elements. Of course it's a quick solution, but I'm not sure if it's a good one... and perhaps at least it would have been better to use a class and not an ID?
Comment #6
dave reidI believe this is addressed by #3077300: Entity reference (autocomplete) field widget in Layout builder off canvas form is inaccessible