add basic a11y
MODIFY
src/components/docs/mobile-menu/sub-menu.svelte
src/components/docs/mobile-menu/sub-menu.svelte
<button
class="toggle-button w-full"
type="button"
+ aria-controls="sub-menu"
+ aria-expanded={$subMenuState}
on:click={() => ($subMenuState = !$subMenuState)}
>
<div class="toggle-button__label">{currentSection.title}</div>
</div>
</button>
- {#if $subMenuState}
- <ul class="sub-menu px-4">
+ <nav class={`px-4 ${$subMenuState ? "block" : "hidden"}`} id="sub-menu">
+ <ul>
{#each currentSection.subMenu as sub}
<MenuItem href={sub.path} onClick={() => ($subMenuState = false)}>
{sub.title}
</MenuItem>
{/each}
</ul>
- {/if}
+ </nav>
</div>
{/if}

MODIFY
src/components/docs/mobile-menu/topics.svelte
src/components/docs/mobile-menu/topics.svelte
export let MENU;
</script>
+<nav>
<ul>
{#each MENU as menuItem}
<MenuItem href={menuItem.path} onClick={() => ($topicsState = false)}>
</MenuItem>
{/each}
</ul>
+</nav>

add basic a11y