HTML for list items in search is different when added by JS

[TSP]

I'm moving the search box to be on the same line as the top breadcrumb. When doing so I noticed a difference in the HTML markup between the list items that were already there and added by javascript when you click "More options…"

When you open the search on this community, the first item is:

<li>
  <span class="ipsSideMenu_item ipsSideMenu_itemActive" data-ipsmenuvalue="all">
    <input type="radio" name="type" value="all" checked="" id="elQuickSearchRadio_type_all">
    <label for="elQuickSearchRadio_type_all" id="elQuickSearchRadio_type_all_label">Everywhere</label>
  </span>
</li>

And the Topics-item has the same HTML.

However, when you click "More options" other options become available. Here is the HTML for one of them: 

<li>
  <a href="#" class="ipsSideMenu_item" data-ipsmenuvalue="cms_pages_pageitem">
    <input type="radio" name="type" value="cms_pages_pageitem" id="elQuickSearchRadio_type_cms_pages_pageitem">
    <label for="elQuickSearchRadio_type_cms_pages_pageitem" id="elQuickSearchRadio_type_cms_pages_pageitem_label">Pages</label>
  </a>
</li>

 

The difference to note here is that for the first items there is a <span>-tag wrapping the items, while in the ones added by JS it's a <a>-element. 

I presume this is a bug as I can't think of a reason it would be intentional. 

Edited October 20, 2020 by TSP

[bfarber]

I've added an internal bug report to have this checked on. Thanks.