BC-7624 - Skip links broken (#3317)

* Add skipToContent function to SkipLinks.vue

* Add test for function skipToContent

* Refactor skip link functionality in SkipLinks unit
test

* Refactor SkipLinks component

* move SkipLink to new structure

* add space key handler

* add data-testid & adjust tests


---------

Co-authored-by: Odalys Adam <odalys.adam@dataport.de>

src/layouts/legacyLoggedIn.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<skip-links />
+		<SkipLink />
 		<div class="page" :style="style" :class="{ inline: isInline }">
 			<div class="topbar">
 				<the-top-bar
@@ -42,15 +42,15 @@ import getSidebarItems, {
 } from "@/utils/sidebar-base-items";
 import { computed, defineComponent, ref } from "vue";
 import { useRoute } from "vue-router";
-import SkipLinks from "../components/molecules/SkipLinks.vue";
+import { SkipLink } from "@ui-skip-link";
 
 export default defineComponent({
 	components: {
 		TheTopBar,
 		TheSidebar,
 		TheFooter,
 		autoLogoutWarning,
-		SkipLinks,
+		SkipLink,
 	},
 	mixins: [toastsFromQueryString],
 	setup() {

src/layouts/newLoggedIn.layout.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<SkipLinks />
+		<SkipLink />
 		<Sidebar v-model="sidebarExpanded" />
 		<Topbar
 			:sidebar-expanded="sidebarExpanded"
@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import { useDisplay } from "vuetify";
-import SkipLinks from "@/components/molecules/SkipLinks.vue";
+import { SkipLink } from "@ui-skip-link";
 import { Sidebar, Topbar } from "@ui-layout";
 import AlertContainer from "@/components/molecules/AlertContainer.vue";
 import LoadingStateDialog from "@/components/molecules/LoadingStateDialog.vue";

src/layouts/newLoggedIn.unit.ts

@@ -57,7 +57,7 @@ const setup = () => {
 				},
 			},
 			stubs: {
-				SkipLinks: { template: "<div></div>" },
+				SkipLink: { template: "<div></div>" },
 				"application-error-wrapper": { template: "<div></div>" },
 				snackbar: { template: "<div></div>" },
 				"router-view": { template: "<div></div>" },

src/modules/ui/skip-link/SkipLink.unit.ts

@@ -0,0 +1,37 @@
+import { createTestingI18n } from "@@/tests/test-utils/setup";
+import { mount } from "@vue/test-utils";
+import SkipLink from "./SkipLink.vue";
+
+jest.mock("vue-router", () => ({
+	useRoute: () => ({ hash: "#" }),
+}));
+
+describe("@ui-skip-link", () => {
+	const setup = () => {
+		const wrapper = mount(SkipLink, {
+			global: {
+				plugins: [createTestingI18n()],
+			},
+		});
+
+		return { wrapper };
+	};
+
+	it("should render its skip link", async () => {
+		const { wrapper } = setup();
+
+		expect(wrapper.find("[data-testid=skip-link]").exists()).toBe(true);
+	});
+
+	it("should skip to main content area", async () => {
+		const { wrapper } = setup();
+
+		const mainContentElement = window.document.createElement("div");
+		mainContentElement.id = "main-content";
+		window.document.body.appendChild(mainContentElement);
+
+		await wrapper.findComponent({ name: "SkipLink" }).trigger("keydown.enter");
+
+		expect(window.document.activeElement).toBe(mainContentElement);
+	});
+});

src/modules/ui/skip-link/SkipLink.vue

@@ -0,0 +1,46 @@
+<template>
+	<a
+		id="skip-link"
+		tabindex="0"
+		class="skip-link d-sr-only-focusable"
+		href="#main-content"
+		data-testid="skip-link"
+		@keydown.enter.prevent="skipToMainContent"
+		@keydown.space.prevent="skipToMainContent"
+	>
+		{{ $t("global.skipLink.mainContent") }}
+	</a>
+</template>
+
+<script setup lang="ts">
+const programmaticFocus = (element: HTMLElement) => {
+	element.setAttribute("tabindex", "-1");
+	element.focus();
+	setTimeout(() => element.removeAttribute("tabindex"), 1000);
+};
+
+const skipToMainContent = () => {
+	const mainContentElement = window.document.querySelector(
+		"#main-content"
+	) as HTMLElement;
+
+	if (mainContentElement) {
+		programmaticFocus(mainContentElement);
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.skip-link {
+	position: absolute;
+	top: 0px;
+	left: 50%;
+	padding: 0.5rem;
+	color: rgba(var(--v-theme-primary));
+	background-color: white;
+	border: 1px solid #555;
+	border-radius: var(--radius-xs);
+	transform: translate(-50%, 0);
+	z-index: 1005;
+}
+</style>

src/modules/ui/skip-link/index.ts

@@ -0,0 +1,3 @@
+import SkipLink from "./SkipLink.vue";
+
+export { SkipLink };

tsconfig.json

@@ -53,6 +53,7 @@
 			"@ui-light-box": ["src/modules/ui/light-box"],
 			"@ui-preview-image": ["src/modules/ui/preview-image"],
 			"@ui-room-details": ["src/modules/ui/room-details"],
+			"@ui-skip-link": ["src/modules/ui/skip-link"],
 			"@ui-speed-dial-menu": ["src/modules/ui/speed-dial-menu"],
 			"@ui-qr-code": ["src/modules/ui/qr-code"],
 			"@util-board": ["src/modules/util/board"],

vue.config.js

@@ -70,6 +70,7 @@ module.exports = defineConfig({
 				"@ui-light-box": getDir("src/modules/ui/light-box"),
 				"@ui-preview-image": getDir("src/modules/ui/preview-image"),
 				"@ui-room-details": getDir("src/modules/ui/room-details"),
+				"@ui-skip-link": getDir("src/modules/ui/skip-link"),
 				"@ui-speed-dial-menu": getDir("src/modules/ui/speed-dial-menu"),
 				"@ui-qr-code": getDir("src/modules/ui/qr-code"),
 				"@util-board": getDir("src/modules/util/board"),