From 609a7ed6dd3bace21660c9e9b5f0b0896783c38e Mon Sep 17 00:00:00 2001
From: Lorenz Hilpert <l.hilpert@paragon-data.de>
Date: Wed, 10 Dec 2025 20:37:23 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F=20feat(shell):=20add=20E2E?=
 =?UTF-8?q?=20testing=20and=20ARIA=20accessibility=20attributes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add data-what/data-which attributes for E2E test targeting
- Add ARIA roles (tablist, tab, group) for screen readers
- Add aria-label attributes for interactive elements
- Add aria-current for active tab indication
---
 .../shell/layout/src/lib/shell-layout.component.html |  4 ++--
 .../navigation-group/navigation-group.component.html |  8 +++++++-
 .../src/lib/components/shell-tab-item.component.html | 12 ++++++++++--
 libs/shell/tabs/src/lib/shell-tabs.component.html    |  9 ++++++++-
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/libs/shell/layout/src/lib/shell-layout.component.html b/libs/shell/layout/src/lib/shell-layout.component.html
index 6883245ac..86c77ffed 100644
--- a/libs/shell/layout/src/lib/shell-layout.component.html
+++ b/libs/shell/layout/src/lib/shell-layout.component.html
@@ -2,8 +2,8 @@
 
 <header
   class="bg-isa-white"
-  [class.h-[6.125rem]]="tabsCollabesd.get()"
-  [class.h-[8rem]]="!tabsCollabesd.get()"
+  [class.h-[6.125rem]]="tabsCollapsed.get()"
+  [class.h-[8rem]]="!tabsCollapsed.get()"
   uiElementSizeObserver
   #headerSizeObserver="uiElementSizeObserver"
 >
diff --git a/libs/shell/navigation/src/lib/components/navigation-group/navigation-group.component.html b/libs/shell/navigation/src/lib/components/navigation-group/navigation-group.component.html
index 49dda3704..92dcde4c2 100644
--- a/libs/shell/navigation/src/lib/components/navigation-group/navigation-group.component.html
+++ b/libs/shell/navigation/src/lib/components/navigation-group/navigation-group.component.html
@@ -1,4 +1,10 @@
-<div class="flex flex-col h-14 items-start self-stretch px-4">
+<div
+  class="flex flex-col h-14 items-start self-stretch px-4"
+  data-what="navigation-group"
+  [attr.data-which]="group().label"
+  role="group"
+  [attr.aria-label]="group().label"
+>
   <div
     class="isa-text-caption-caps flex h-6 flex-col justify-center flex-[1_0_0] self-stretch"
   >
diff --git a/libs/shell/tabs/src/lib/components/shell-tab-item.component.html b/libs/shell/tabs/src/lib/components/shell-tab-item.component.html
index 0d094c3ae..9815fd24d 100644
--- a/libs/shell/tabs/src/lib/components/shell-tab-item.component.html
+++ b/libs/shell/tabs/src/lib/components/shell-tab-item.component.html
@@ -4,8 +4,10 @@
   [class.compact]="compact()"
   [routerLink]="_route?.urlTree ?? '/'"
   [title]="_route?.title ?? ''"
+  data-what="tab-link"
+  [attr.data-which]="tab().id"
+  [attr.aria-current]="active() ? 'page' : null"
 >
-  <!-- <div class="grow-0"></div> -->
   <div class="grow min-w-0">
     <div class="isa-text-caption-bold truncate w-full">
       {{ tab().name }}
@@ -16,7 +18,13 @@
       </span>
     </div>
   </div>
-  <button (click)="close($event)" class="grow-0">
+  <button
+    (click)="close($event)"
+    class="grow-0"
+    data-what="button"
+    data-which="close-tab"
+    [attr.aria-label]="'Tab schließen: ' + tab().name"
+  >
     <ng-icon name="isaActionClose" class="close-icon"></ng-icon>
   </button>
 </a>
diff --git a/libs/shell/tabs/src/lib/shell-tabs.component.html b/libs/shell/tabs/src/lib/shell-tabs.component.html
index 31a4de0db..fa83501ed 100644
--- a/libs/shell/tabs/src/lib/shell-tabs.component.html
+++ b/libs/shell/tabs/src/lib/shell-tabs.component.html
@@ -1,11 +1,12 @@
 @let _tabs = tabs();
-<ui-carousel class="flex-1 min-w-0">
+<ui-carousel class="flex-1 min-w-0" role="tablist" aria-label="Geöffnete Tabs">
   @for (tab of _tabs; track tab.id) {
     <shell-tab-item
       animate.enter="fade-slide-in"
       animate.leave="fade-slide-out"
       [tab]="tab"
       [compact]="compact()"
+      role="tab"
     />
   }
 
@@ -20,6 +21,9 @@
       class="self-center whitespace-nowrap"
       (click)="closeAll()"
       [class.h-6]="compact()"
+      data-what="button"
+      data-which="close-all-tabs"
+      aria-label="Alle Tabs schließen"
     >
       Alle schließen
     </button>
@@ -34,5 +38,8 @@
     class="shrink-0 self-center -mt-2 z-sticky"
     [class.size-6]="compact()"
     (click)="addTab()"
+    data-what="button"
+    data-which="add-tab"
+    aria-label="Neuen Tab hinzufügen"
   ></ui-icon-button>
 }