The table of content component shouldn't need the clean-list class #669
Description
Describe the issue
Trying to use the table of content component in a context where we don't have full control of the markup (markdown conversion), we noticed the example suggests we need to use the clean-list class to remove the list markers. However, this only relies on the fact that the ul has a class whatever its name is.
Now, the clean-list class comes handy when you start dealing with sub-list, e.g.
<nav class="toc" aria-labelledby="toc-label">
<h2 id="toc-label">Page contents</h2>
<ul>
<li><a href="#link-to-anchor-1">First heading</a></li>
<li><a href="#link-to-anchor-2">Second heading</a>
<ul>
<li><a href="#link-to-anchor-2">First subheading</a></li>
<li><a href="#link-to-anchor-2">Second subheading</a></li>
</ul>
</li>
<li><a href="#link-to-anchor-3">Third heading</a></li>
</ul>
</nav>If we don't use that clean-list class, the sub list shows the markers (see screenshot below).
Recommended solution
To simplify the component so we can use it where we cannot add additional classes to the markup, it would be good to remove the dependency to the clean-list class.
Adding a list-style: none to the toc component should solve the issue.
A side effect of removing the class from the ul is that it creates additional top-margin on each item of a list that can be quite long. I'm tempted to also remove the top margin but this may cause other problems.