Header Search outputs invalid ARIA markup because aria-labelledby is applied to

The tagDiv Header Search element generates invalid ARIA markup in both desktop and mobile header instances.

The generated HTML is:

<div class=”tdb-drop-down-search”
aria-labelledby=”td-header-search-button”>

The W3C validator reports:

The aria-labelledby attribute must not be specified on any div element unless the element has an appropriate role.

The search itself works correctly. The issue is specifically the generated markup.

I confirmed the source in:

wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_search.php

The original PHP output was:

$buffy .= ‘<div class=”tdb-drop-down-search” aria-labelledby=”td-header-search-button”>’;

I changed it to:

$buffy .= ‘<div class=”tdb-drop-down-search” role=”search” aria-labelledby=”td-header-search-button”>’;

After clearing caches and revalidating, both validator errors disappeared. Desktop and mobile search continued to function normally.

This confirms that the issue is not caused by search placement, template layout, or custom CSS. It is caused by the Header Search element omitting an appropriate role from the .tdb-drop-down-search container.

Please update the plugin output to include:

role=”search”

on that container, or otherwise revise the ARIA structure so aria-labelledby is used on an element with a valid role.

The error appeared twice because the page contains separate desktop and mobile Header Search elements.