fix(navigation): make vertical navigation more accessible

[mukunku]

Summary

This PR suggests some small but breaking changes to the markup so we can have an accessible vertical navigation component.

Before:

<nav>
	<ul class="s-navigation s-navigation__vertical">
		<li class="s-navigation--title">Resources</li>
		<li><a href="#" class="s-navigation--item is-selected">Icons</a></li>
		<li><a href="#" class="s-navigation--item">Spot illustrations</a></li>
	</ul>
</nav>

After:

<nav>
	<ul class="s-navigation s-navigation__vertical">
		<li>
			<h4 class="s-navigation--title" id="nav-section1">Resources</h4>
			<ul aria-labelledby="nav-section1">
				<li><a href="#" class="s-navigation--item is-selected">Icons</a></li>
				<li><a href="#" class="s-navigation--item">Spot illustrations</a></li>
			</ul>
		</li>
	</ul>
</nav>

Motivation

This PR was created because the current beta Navigation Svelte component, when in vertical mode, has some accessibility issues around its usage of role="separator":

• The different navigation group titles are currently <li> items themselves which causes screen readers to incorrectly count how many navigation items are present.
• There is no semantic markup to represent the implied parent-child relationship between different groups
• When this role is assigned to an element all its children implicitly receive the presentation role which isn't something we necessarily want in our navigation component.

Rationale

This question does a good breakdown of why I went with breaking the different navigation groups into actual separate <ul> elements. This does mean I had to make some assumptions around nested <ul> elements in the .less code but I'm hoping this is an acceptable trade-off to have an accessible component.

Additionally, I used an <h4> (configurable in svelte) element as the group title as that is the recommended approach for screen readers.

How to Test

Stacks Docs

The Titles variant is what has changed.

• Confirm there are no visual differences between the previous version and this PR:
  • Current: https://beta.stackoverflow.design/product/components/navigation/#titles
  • This PR: https://deploy-preview-2181--stacks.netlify.app/product/components/navigation/#titles
• Notice the new markup contains multiple <ul> elements for the different navigation groups and each list contains the various navigation items now.

Stacks Svelte

• Confirm there are no visual differences between the previous version and this PR:
  • Current: https://beta.svelte.stackoverflow.design/?path=/story/components-navigation--titles
  • This PR: https://deploy-preview-2181--stacks-svelte.netlify.app/?path=/story/components-navigation--titles
• Notice that NavigationTitle has been renamed to NavigationGroup and now encapsulates its child NavigationItems.

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	dae3cc8
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/698e65889ee3a90008d8bc29
😎 Deploy Preview	https://deploy-preview-2181--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for stacks-svelte ready!

Name	Link
🔨 Latest commit	dae3cc8
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/698e65881a9ce900084dffa8
😎 Deploy Preview	https://deploy-preview-2181--stacks-svelte.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[changeset-bot]

🦋 Changeset detected

Latest commit: dae3cc8

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR