Accessibility Error in Axe DevTool: <ul> and <ol> must only directly contain <li>, <script>, or <template> elements with <uib-tabset> and <uib-tab>

Question

I'm currently working on an AngularJS project using UI Bootstrap's <uib-tabset> and <uib-tab> components. In my implementation, I've noticed a potential accessibility issue flagged by the Axe DevTool.

The error states: "Axe devtool error: <ul> and <ol> must only directly contain: <li>, <script> or <template> elements. It appears that the element, which should have role="tab", is not being generated as a direct child of the role="tablist" as recommended for accessibility.

Here's a simplified version of my code:

<uib-tabset role="tablist">
    <uib-tab role="tab">
        <!-- tab content -->
    </uib-tab>
    <!-- additional tabs... -->
</uib-tabset>

I understand that for proper accessibility, elements should be direct children of , each with a role="tab". However, my current implementation seems to deviate from this.

How can I address this accessibility issue and ensure that elements are correctly generated as direct children of with the appropriate roles?

Any guidance or examples demonstrating the correct structure would be greatly appreciated. Thank you!