From e6bac5f7b080c8fcc12234e5a24aea06d80506b4 Mon Sep 17 00:00:00 2001
From: Tarek Hamaoui <tarek.hamaoui@digitalservice.bund.de>
Date: Fri, 14 Feb 2025 09:50:00 +0100
Subject: [PATCH] chore: apply functional review feedback

- Removed collapsing all tree nodes when pressing Rahmen
- Ignored ESLint a11y rules covered by PrimeVue
- Added selected styles to the Rahmen router link

RISDEV-6266
---
 .../ExpressionMetadataEditor.view.vue         | 24 ++++++-------------
 1 file changed, 7 insertions(+), 17 deletions(-)

diff --git a/frontend/src/views/expression/metadata-editor/ExpressionMetadataEditor.view.vue b/frontend/src/views/expression/metadata-editor/ExpressionMetadataEditor.view.vue
index 5c6f394db..17a0a8c91 100644
--- a/frontend/src/views/expression/metadata-editor/ExpressionMetadataEditor.view.vue
+++ b/frontend/src/views/expression/metadata-editor/ExpressionMetadataEditor.view.vue
@@ -3,7 +3,7 @@ import RisEmptyState from "@/components/controls/RisEmptyState.vue"
 import RisHeader from "@/components/controls/RisHeader.vue"
 import RisLoadingSpinner from "@/components/controls/RisLoadingSpinner.vue"
 import { useEliPathParameter } from "@/composables/useEliPathParameter"
-import { ComputedRef, computed, ref, watch, nextTick } from "vue"
+import { ComputedRef, computed, ref, watch } from "vue"
 import RisErrorCallout from "@/components/controls/RisErrorCallout.vue"
 import Tree from "primevue/tree"
 import ChevronUpIcon from "~icons/ic/baseline-keyboard-arrow-up"
@@ -62,16 +62,6 @@ const mapElement = (el: TabelOfContentsItem): TreeNode => ({
 
 const treeNodes: ComputedRef<TreeNode[]> = elementLinks
 
-const collapseAllNodes = async () => {
-  expandedKeys.value = { ...{} }
-  await nextTick()
-}
-
-const handleRahmenClick = async () => {
-  await collapseAllNodes()
-  selectionKeys.value = {}
-}
-
 const toggleNode = (node: TreeNode) => {
   if (expandedKeys.value[node.key]) {
     const newExpandedKeys = { ...expandedKeys.value }
@@ -136,9 +126,8 @@ const handleNodeSelect = (node: TreeNode) => {
           <!-- Frame link -->
           <router-link
             :to="{ name: 'ExpressionMetadataEditorRahmen' }"
-            class="px-16 py-8 hover:bg-blue-200 hover:underline focus:bg-blue-200 focus:underline"
-            exact-active-class="font-bold underline bg-blue-200"
-            @click="handleRahmenClick"
+            class="flex w-full justify-start border-l-4 border-transparent px-20 py-10 hover:bg-blue-200 hover:underline focus:bg-blue-200 focus:underline focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-blue-800"
+            exact-active-class="font-bold underline bg-blue-200 border-l-blue-800"
           >
             Rahmen
           </router-link>
@@ -182,8 +171,9 @@ const handleNodeSelect = (node: TreeNode) => {
               >
                 {{ node.data.primaryLabel }}
               </router-link>
-
-              <button
+              <!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
+              <!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
+              <span
                 v-else
                 class="w-full overflow-hidden truncate text-ellipsis"
                 :title="node.data.primaryLabel"
@@ -191,7 +181,7 @@ const handleNodeSelect = (node: TreeNode) => {
                 @click="toggleNode(node)"
               >
                 {{ node.data.primaryLabel }}
-              </button>
+              </span>
 
               <router-link
                 v-if="node.data.secondaryLabel"