Nested HTML <ul> Accessibility issue Lighthouse: "Lists do not contain only `<li>`-CodePudding

I am using HTML nested lists to create a Table of Content on my site. Doing Chrome Lighthouse audit, I see problems in Accessibility.

It says "Lists do not contain only <li> elements and script supporting elements"

My list contains another list (nested) so it the cause of problem?

Each of my List Item has <a> in it too, how can I work around with my code to solve the chrome warning.

<div class="TOCContainer Collapsable">
    <ul class="parent start">
        <li><a class="TOCLink" href="#1">Why do Big Companies Die?</a></li>
        <li><a class="TOCLink" href="#2">How did Apple become the Most Innovative Company in the world?</a></li>
        <li><a class="TOCLink" href="#3">What Made Apple So innovative?</a></li>
        <li><a class="TOCLink" href="#4">Is Apple still innovating in 2021?</a></li>
        <ol class="continue">
            <li><a class="TOC-link" href="#5">The Slow Improvement in Existing Products</a></li>                
            <li><a class="TOCLink" href="#6">Lack of Industry Disrupting New Products</a></li>
            <li><a class="TOCLink" href="#7">The perception of Apple Being only concerned of Profits</a></li>
        </ol>
        <li><a href="#8">The Silver Lining</a></li><li><a class="TOCLink" href="#9">Conclusion</a></li>
    </ul>
</div>

CodePudding user response：

So, I found the answer to my own question.

I learnt it the hard way, that only the immediate child of ul should be li

We can have html tags inside li.

So the problem is the nested HTML. The <ol> is nested inside <ul> which is not allowed

Instead <ol> should be wrapped inside <li> to make it work

So it should look in general like this.

<ul>
    <li>
        <ol></ol>
    </li>
</ul>

Basically putting the ol inside the li.

Now the correct code for the question would look like this:

<div class="TOCContainer Collapsable">
    <ul class="parent start">
        <li><a class="TOCLink" href="#1">Why do Big Companies Die?</a></li>
        <li><a class="TOCLink" href="#2">How did Apple become the Most Innovative Company in the world?</a></li>
        <li><a class="TOCLink" href="#3">What Made Apple So innovative?</a></li>
        <li><a class="TOCLink" href="#4">Is Apple still innovating in 2021?</a></li>
        <li>
            <ol class="continue">
                <li><a class="TOC-link" href="#5">The Slow Improvement in Existing Products</a></li>                
                <li><a class="TOCLink" href="#6">Lack of Industry Disrupting New Products</a></li>
                <li><a class="TOCLink" href="#7">The perception of Apple Being only concerned of Profits</a></li>
            </ol>
        </li>
        <li><a href="#8">The Silver Lining</a></li><li><a class="TOCLink" href="#9">Conclusion</a></li>
    </ul>
</div>