Olivero: Button can't contain div element in it. In the file drupal/core/themes/olivero/templates/block/block--secondary-menu--plugin-id--search-form-block.html.twig div have a parent element button, which is not allowed.
The issue is that a button can contain only Inline Elements, and div is a Block Element.
Proposer resolution: alternative is to use span
<button class="block-search-wide__button" aria-label="{{ 'Toggle Search Form'|t }}" data-drupal-selector="block-search-wide-button">
{% include "@olivero/../images/search.svg" %}
<div class="block-search-wide__button-close"></div>
</button>| Comment | File | Size | Author |
|---|---|---|---|
| #3 | html5validator.png | 49.87 KB | indrajithkb |
| #2 | 3226865-2.patch | 964 bytes | gauravvvv |
Comments
Comment #2
gauravvvv commentedI have attached a patch with proposed solution. Please review.
Comment #3
indrajithkb commentedHi @Gauravmahlawat nice catch and thanks for the patch, I have checked with the html5 validator (through online), yes you are right we need to change the block element (div) to inline element (span).
html5 validation result for ref.
And applied the #2 patch successfully, so changing the status to RTBC
Comment #4
mherchel+1 RTBC. Good catch!
I tested this under FF, Safari, and Chrome. I also double checked that this was the only place we're hard coding a block element within a button.
Comment #6
lauriiiCommitted 5ac0edd and pushed to 9.3.x. Thanks!