Focus search

I think @readonly24 means keyboard focus, not the mouse cursor. That is, after the search icon is clicked, the typing cursor should already be inside the search box so you can start typing straight away.

And yes, it should work that way. When a button opens a field, focus belongs in that field. At the moment a keyboard user activates the icon, the panel opens, but focus is still sitting on the icon, so they have to press Tab to get into the box. Someone using a screen reader often does not even realise the box has appeared.

Until the theme does it, you can add this in your child theme functions.php:

add_action( 'wp_footer', function () { ?>
<script>
document.addEventListener('click', function (e) {
    if ( ! e.target.closest('.zak-search-icon, .search-toggle, [class*="search-toggle"]') ) return;
    setTimeout(function () {
        var f = document.querySelector('.search-field:not([hidden]), input[type="search"]:not([hidden])');
        if (f && f.offsetParent !== null) { f.focus(); }
    }, 150);
});
</script>
<?php }, 99 );

If nothing happens, the selector is wrong for your build. Right click the search icon, choose Inspect, copy the class you see there and put it in place of the first one in the list.

Two more things that go with this, if you want the search to be properly usable by keyboard:

The icon should be a real button element with aria-expanded set to false when closed and true when open, so a screen reader announces that something opened.

Pressing Escape while the search is open should close it and put focus back on the icon. Without that, a keyboard user is stranded inside a panel they cannot get out of.

• This reply was modified 4 days, 21 hours ago by Shivaji Mitra.