Accessibility for Details Tabs

public/js/components/Stv/Studentenverwaltung/Details.js

@@ -1,4 +1,9 @@
+import accessibility from "../../../directives/accessibility.js";
+
 export default {
+	directives: {
+		accessibility
+	},
 	props: {
 		student: Object
 	},
@@ -33,11 +38,19 @@ export default {
 	<div class="stv-details h-100 pb-3 d-flex flex-column">
 		<div v-if="hasNoStudent" class="justify-content-center d-flex h-100 align-items-center">Bitte StudentIn auswählen!</div>
 		<template v-else>		
-			<ul class="nav nav-tabs">
-				<li v-for="({title}, key) in tabs" class="nav-item" :key="comp">
-					<a class="nav-link" :class="{active: key == current}" :aria-current="key == current ? 'page' : ''" href="#" @click="current=key">{{title}}</a>
-				</li>
-			</ul>
+			<div class="nav nav-tabs">
+				<div
+					v-for="({title}, key) in tabs"
+					:key="comp"
+					class="nav-item nav-link"
+					:class="{active: key == current}"
+					@click="current=key"
+					:aria-current="key == current ? 'page' : ''"
+					v-accessibility:tab
+					>
+					{{title}}
+				</div>
+			</div>
 			<div style="flex: 1 1 0%; height: 0%" class="border-bottom border-start border-end overflow-auto p-3">
 				<keep-alive>
 					<suspense>

public/js/directives/accessibility.js

@@ -2,7 +2,13 @@ export default {
 	created(el, binding) {
 		switch (binding.arg) {
 			case 'tab':
-				const [prev, next] = binding.modifiers.vertical ? ['ArrowUp', 'ArrowDown'] : ['ArrowRight', 'ArrowLeft'];
+				const [prev, next] = binding.modifiers.vertical ? ['ArrowUp', 'ArrowDown'] : ['ArrowLeft', 'ArrowRight'];
+				el.addEventListener('click', () => {
+					let act = el.parentNode.querySelector('[tabindex="0"]');
+					if (act)
+						act.setAttribute('tabindex', -1);
+					el.setAttribute('tabindex', 0);
+				});
 				el.addEventListener('focus', () => {
 					el.setAttribute('aria-selected', true);
 				});
@@ -36,7 +42,6 @@ export default {
 	mounted(el, binding) {
 		switch (binding.arg) {
 			case 'tab':
-				//const [prev, next] = binding.modifiers.vertical ? ['up', 'down'] : ['right', 'left'];
 				let activetab = -1;
 				Array.from(el.parentNode.children).forEach((node, index) => {
 					node.setAttribute('aria-setsize', el.parentNode.children.length);