fix: resolve frontend linter errors

frontend/.eslintignore

@@ -6,6 +6,8 @@ node_modules
 .env
 .env.*
 !.env.example
+/tests/reports/*
+/tests/results/*
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

frontend/.prettierignore

@@ -6,6 +6,8 @@ node_modules
 .env
 .env.*
 !.env.example
+/tests/reports/*
+/tests/results/*
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

frontend/src/lib/components/Modals/CreateModal.svelte

@@ -33,6 +33,8 @@
 				{$modalStore[0].title ?? '(title missing)'}
 			</header>
 			<div
+				role="button"
+				tabindex="0"
 				class="flex items-center hover:text-primary-500 cursor-pointer"
 				on:click={parent.onClose}
 				on:keydown={parent.onClose}

frontend/src/lib/components/ModelTable/LanguageDisplay.svelte

@@ -5,4 +5,4 @@
 	$: display = LOCALE_DISPLAY_MAP[cell];
 </script>
 
-<span {...$$restProps}>{@html display}</span>
+<span {...$$restProps}>{display}</span>

frontend/src/lib/components/ModelTable/ModelTable.svelte

@@ -77,7 +77,7 @@
 		if (['Enter', 'Space'].includes(event.code)) onRowClick(event, rowIndex);
 	}
 
-	export let identifierField: string = 'id';
+	export let identifierField = 'id';
 
 	export let deleteForm: SuperValidated<AnyZodObject> | undefined = undefined;
 

frontend/src/lib/components/TableRowActions/TableRowActions.svelte

@@ -17,7 +17,7 @@
 	export let editURL: string | undefined;
 	export let deleteForm: SuperValidated<AnyZodObject> | undefined;
 	export let URLModel: urlModel | string | undefined;
-	export let identifierField: string = 'id';
+	export let identifierField = 'id';
 
 	export let hasBody = false;
 

frontend/src/lib/components/TreeView/RecursiveTreeViewItem.svelte

@@ -151,13 +151,13 @@
 			}}
 		>
 			{#if typeof node.content === 'string'}
-				{@html node.content}
+				{node.content}
 			{:else}
 				<svelte:component this={node.content} {...node.contentProps} />
 			{/if}
 			<svelte:fragment slot="lead">
 				{#if typeof node.lead === 'string'}
-					{@html node.lead}
+					{node.lead}
 				{:else}
 					<svelte:component this={node.lead} {...node.leadProps} />
 				{/if}

frontend/src/lib/components/fragments/WatchlistExceptions.svelte

@@ -43,21 +43,21 @@
 							request_path
 						)}'"
 					>
-						<td scope="row" class="px-3 py-4 font-medium">
+						<th scope="row" class="px-3 py-4 font-medium">
 							{#if acceptance.approver == user.id && acceptance.state == 'submitted'}
 								<span class="mr-1 p-1 rounded-md text-xs bg-indigo-500 text-white">
 									action requested
 								</span>
 							{/if}
 							{acceptance.name}
-						</td>
-						<td class="px-3 py-4">
+						</th>
+						<th class="px-3 py-4">
 							{acceptance.folder.str}
-						</td>
-						<td class="px-3 py-4">
+						</th>
+						<th class="px-3 py-4">
 							{acceptance.approver.str}
-						</td>
-						<td class="px-3 py-4">
+						</th>
+						<th class="px-3 py-4">
 							{#if acceptanceState(acceptance.expiry_date) === 'expired'}
 								<span class="rounded bg-red-500 text-white p-1 text-xs mr-1">expired</span>
 							{:else if acceptanceState(acceptance.expiry_date) === 'upcoming'}
@@ -66,7 +66,7 @@
 								<span class="rounded bg-yellow-500 text-white p-1 text-xs mr-1">today</span>
 							{/if}
 							{formatStringToDate(acceptance.expiry_date)}
-						</td>
+						</th>
 					</tr>
 				{/each}
 			{:else}

frontend/src/lib/utils/csrf.ts

@@ -6,7 +6,9 @@ async function getCsrfToken() {
 			credentials: 'include'
 		}).then((res) => res.json());
 		return response.csrfToken;
-	} catch (error) {}
+	} catch (error) {
+		console.error(error);
+	}
 }
 
 export const csrfToken = await getCsrfToken();

frontend/src/routes/(app)/compliance-assessments/[id=uuid]/+page.svelte

@@ -49,7 +49,7 @@
 
 		if (node.children && Object.keys(node.children).length > 0) {
 			for (const childId in node.children) {
-				if (node.children.hasOwnProperty(childId)) {
+				if (Object.prototype.hasOwnProperty.call(node.children, childId)) {
 					const childNode = node.children[childId];
 					countStatus(childNode, statusCounts);
 				}

frontend/src/routes/(app)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte

@@ -10,7 +10,7 @@
 	export let security_functions: Record<string, any>[] | undefined = undefined;
 	export let children: Record<string, Record<string, unknown>> | undefined = undefined;
 	export let canEditRequirementAssessment: boolean;
-	export let status: string | undefined = undefined;
+	// export let status: string | undefined = undefined;
 	export let statusCounts: Record<string, number> | undefined;
 
 	$: hasChildren = children && Object.keys(children).length > 0;
@@ -87,7 +87,7 @@
 		{#if threats || security_functions}
 			<div
 				role="button"
-				tabindex="-1"
+				tabindex="0"
 				class="underline text-sm hover:text-primary-400 {classesShowInfoText(showInfo)}"
 				on:click={(_) => (showInfo = !showInfo)}
 				on:keydown={(_) => (showInfo = !showInfo)}

frontend/src/routes/(app)/compliance-assessments/[id=uuid]/TreeViewItemLead.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let status: string;
+	// export let status: string;
 	export let statusDisplay: string;
 	export let statusColor: string;
 	export let assessable: boolean;

frontend/src/routes/(app)/frameworks/[id=uuid]/TreeViewItemContent.svelte

@@ -26,8 +26,11 @@
 	</span>
 	{#if (threats && threats.length > 0) || (security_functions && security_functions.length > 0)}
 		<div
+			role="button"
+			tabindex="0"
 			class="underline text-sm hover:text-primary-400 {classesShowInfoText(showInfo)}"
 			on:click={(_) => (showInfo = !showInfo)}
+			on:keydown={(_) => (showInfo = !showInfo)}
 		>
 			<i class="text-xs fa-solid fa-info-circle" /> Learn more
 		</div>

frontend/src/routes/(app)/libraries/+page.server.ts

@@ -18,7 +18,7 @@ export const load = (async ({ fetch }) => {
 	const libraries = await res.json().then((res) => res.results);
 
 	function countObjects(library: Library) {
-		let result: { [key: string]: any } = new Object();
+		const result: { [key: string]: any } = new Object();
 		for (const [key, value] of Object.entries(library.objects)) {
 			if (Array.isArray(value)) {
 				const str = key.charAt(0).toUpperCase() + key.slice(1).replace('_', ' ');