♿️ feat(shell): add E2E testing and ARIA accessibility attributes

- 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

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"
 >

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"
   >

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>

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>
 }