Divi Ultimate Plugin is displaying a duplicate role="search" field.

I am using SmartCrawl Pro (from WPMUDEV) and it detected Duplicate Aria Landmarks saying "We've detected duplicate aria landmarks on your homepage." for Duplicate Landmarks .. for "search".

After deactivating and activating my plugins back in, I found that this issue was being caused by the Divi Ultimate Plugin.

Here's the portion that is displayed as part of the DIVI (core theme) from Elegant Themes:

<div class="et_search_outer">
<div class="container et_search_form_container">
<form role="search" method="get" class="et-search-form" action="https://www.wpbns.com/">
<input type="search" class="et-search-field" placeholder="Search &hellip;" value="" name="s" title="Search for:" /> </form>
<span class="et_close_search_field"></span>
</div>
</div>

But on my home page (https://www.wpbns.com) when I have Divi Ultimate Plugin activated, it also displays this information in the source code:

<div class="free-search-outer">
<form role="search" method="get" class="et-search-form" action="https://www.wpbns.com/"><input type="search" class="et-search-field" placeholder="Search &hellip;" value="" name="s" title="Search for:" />
</form>
<span class="free-search-close"></span>
</div>

(So when Divi Ultimate Plugin is activated, both sets of code are displayed in the source code.)

And the SmartCrawl Pro plugin indicates that there shouldn't be two different items named the same as role="search". They suggest, to fix this, that the "role="search" should be changed to anything other than just "search" such as role="search-ultimate" or role="search-free-outer" .. just not "search". Or maybe the role for search in the Divi Ultimate Plugin should be removed? What do you think would be the best way to resolve this?

I'm just looking for your thoughts and advice.

WPMUDEV is telling me that this could potentially cause issues and if possible, I should not have more than one role used on a page, that would be named the same.

Please let me know what you think.

Thanks,
Gary

SITE: https://www.wpbns.com/

 

I made this change. The code shows up in my source code for the page. But the lines and 2nd reference to role="search" still appears.

<div class="free-search-outer">
<form role="search" method="get" class="et-search-form" action="https://www.wpbns.com/"><input type="search" class="et-search-field" placeholder="Search &hellip;" value="" name="s" title="Search for:" />
</form>
<span class="free-search-close"></span>
</div>

See: https://www.wpbns.com/

Thoughts?

 

I'm still seeing:

<div class="container et_search_form_container">
<form role="search" method="get" class="et-search-form" action="https://www.wpbns.com/">
<input type="search" class="et-search-field" placeholder="Search &hellip;" value="" name="s" title="Search for:" /> </form>
<span class="et_close_search_field"></span>
</div>


<div class="free-search-outer">
<form role="search" method="get" class="et-search-form" action="https://www.wpbns.com/"><input type="search" class="et-search-field" placeholder="Search &hellip;" value="" name="s" title="Search for:" />
</form>
<span class="free-search-close"></span>
</div>

in the source code on the home page. I checked this in two browsers.



Gary

 

But the code needs to be changed otherwise it will potentially cause issues, which is why it is being flagged. Suggestions? The duplicate role being applied (more than once on a page) is the issue.