Tabs: fix semantic markup

Author: distantnative

assets/css/site/tabs.css

@@ -4,18 +4,18 @@
 	border-radius: var(--rounded);
 }
 
-.tabs menu {
+.tabs nav {
 	display: flex;
 }
 
-.tabs menu button {
+.tabs nav button {
 	position: relative;
 	padding: var(--spacing-2) var(--spacing-3);
 	font-size: var(--text-xs);
 	overflow: visible;
 }
 
-.tabs menu button[aria-current="true"]::after {
+.tabs nav button[aria-selected="true"]::after {
 	position: absolute;
 	content: "";
 	height: 2px;
@@ -24,7 +24,7 @@
 	background: currentColor;
 }
 
-.tabs menu button:not([aria-current="true"]):hover {
+.tabs nav button:not([aria-selected="true"]):hover {
 	opacity: 0.75;
 }
 

site/snippets/kirbytext/tabs.php

@@ -1,16 +1,24 @@
-<menu>
+<nav role="tablist">
 	<?php foreach ($tabs as $key => $tab): ?>
 	<button
-		:aria-current="current === '<?= $key ?>'"
+		:aria-selected="current === '<?= $key ?>'"
+		aria-controls="tabs-<?= $id ?>-<?= $key ?>"
+		id="tabs-<?= $id ?>-<?= $key ?>-label"
+		role="tab"
 		@click="current = '<?= $key ?>'"
 	>
 		<?= $tab['title'] ?>
 	</button>
 	<?php endforeach ?>
-</menu>
+</nav>
 
 <?php foreach ($tabs as $key => $tab): ?>
-<div v-show="current === '<?= $key ?>'">
+<div
+	v-show="current === '<?= $key ?>'"
+	aria-labelledby="tabs-<?= $id ?>-<?= $key ?>-label"
+	id="tabs-<?= $id ?>-<?= $key ?>"
+	role="tabpanel"
+>
 	<?= $tab['content'] ?>
 </div>
 <?php endforeach ?>