Accordion element causes html validation errors

Hello

If we use the accordion content element on a page and check that page with the Nu Html Checker (validator.w3.org), it shows the following errors:

1. An element with role=tab must be contained in, or owned by, an element with role=tablist”
2. The aria-controls attribute must point to an element in the same document.

To fix the first error the attribute “role” with the value “tablist” should be added at line 286 in the file themes/enfold/config-templatebuilder/avia-shortcodes/tabs/tabs.php:
$output = '<div ' . $meta['custom_el_id'] . ' class="tabcontainer '.$av_display_classes.' . '.$position.' '.$boxed.' . '.$meta['el_class'].'"" role="tablist">'."\n";

To fix the second error, the value of the aria-controls attribute at line 367 in the same file should be supplemented with “-container” so that the correct element is referenced:
$output .= ' <div aria-controls="' . $tab_atts['custom_id'] . '-container' role="tab" tabindex="0" data-fake-id="#'.$tab_atts['custom_id'].'"" class="tab '.$titleClass.'"" '.$markup_title.'>'.$icon.$tab_atts['title'].'</div>'."\n";

I ask you to check this. Thanks a lot!

• This topic was modified 5 years ago by blende64.