a11y: Table of Contents Block

[tisto]

Describe the bug

ToC block is not a11y compliant (WCAG 2.2 AA)

See:

https://stackoverflow.com/questions/58701499/semantic-markup-and-aria-attributes-for-table-of-contents

VLT (same should apply for Volto core)

URL

https://light-theme.kitconcept.io/block/toc-block

HTML Code

<div class="table-of-contents default"><h2>Inhaltsverzeichnis</h2><ul role="list" class="ui bulleted list"><li role="listitem" class="item headline-2"><a href="/block/toc-block#text-heading-h2">Text Heading H2</a><ul role="list" class="ui bulleted list"><li role="listitem" class="item headline-3"><a href="/block/toc-block#text-heading-h3">Text Heading H3</a></li></ul></li><li role="listitem" class="item headline-2"><a href="/block/toc-block#lists">Lists</a><ul role="list" class="ui bulleted list"><li role="listitem" class="item headline-3"><a href="/block/toc-block#inline-styles">Inline Styles</a></li></ul></li></ul></div>

Cypress a11y test

https://github.com/kitconcept/volto-light-theme/blob/main/acceptance/cypress/tests/a11y/tocBlock.cy.js

[praveen-rikhari]

@tisto I guess this is about using the semantic element nav to be used instead of the div element with which we are wrapping the table of contents.