Development: Use real buttons and links instead of click-handler divs (#2529)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: Catherine Kalra <catherine.kalra@tum.de>

Author: 3 people

eslint.config.mjs

@@ -268,7 +268,7 @@ export default [
         'prettier/prettier': ['error', { parser: 'angular' }],
         '@angular-eslint/template/alt-text': 'error',
         '@angular-eslint/template/button-has-type': 'error',
-        '@angular-eslint/template/click-events-have-key-events': 'error',
+        '@angular-eslint/template/click-events-have-key-events': ['error', { ignoreWithDirectives: ['jhiClickable'] }],
         '@angular-eslint/template/elements-content': 'off',
         '@angular-eslint/template/interactive-supports-focus': 'error',
         '@angular-eslint/template/label-has-associated-control': 'error',

src/main/webapp/app/interview/interview-booking/selectable-slot-card/selectable-slot-card.component.html

@@ -1,14 +1,12 @@
-<div
-  class="w-full rounded-lg p-2.5 cursor-pointer transition-all border"
+<button
+  type="button"
+  class="btn-bare w-full rounded-lg p-2.5 cursor-pointer transition-all border"
   [class.border-primary-default]="selected()"
   [class.bg-background-surface-alt]="selected()"
   [class.hover:bg-background-surface-alt]="selected()"
   [class.border-border-default]="!selected()"
   [class.hover:bg-background-surface]="!selected()"
-  tabindex="0"
-  role="button"
   (click)="onSelect()"
-  (keydown.enter)="onSelect()"
 >
   <!-- Time Range -->
   <div class="text-sm font-semibold text-text">{{ timeRange() }}</div>
@@ -31,4 +29,4 @@
       }
     </div>
   </div>
-</div>
+</button>

src/main/webapp/app/interview/interview-process-detail/interviewee-section/interviewee-card/interviewee-card.component.html

@@ -1,9 +1,9 @@
 <div
   class="flex flex-col lg:flex-row lg:items-center justify-between p-3 bg-background-default border rounded border-border-default min-h-[4rem] h-auto cursor-pointer hover:bg-background-surface transition-colors gap-3"
+  jhiClickable
+  role="link"
   tabindex="0"
-  role="button"
   (click)="navigateToAssessment()"
-  (keydown.enter)="navigateToAssessment()"
 >
   <div class="flex flex-col lg:flex-row lg:items-center gap-3 lg:gap-0 flex-1 min-w-0">
     <!-- Identity Group (Name + Status) - Kept together for alignment -->

src/main/webapp/app/interview/interview-process-detail/interviewee-section/interviewee-card/interviewee-card.component.ts

@@ -7,6 +7,7 @@ import { map } from 'rxjs';
 import { IntervieweeDTO, IntervieweeDTOStateEnum } from 'app/generated/model/interviewee-dto';
 import { ButtonComponent } from 'app/shared/components/atoms/button/button.component';
 import { UserAvatarComponent } from 'app/shared/components/atoms/user-avatar/user-avatar.component';
+import { ClickableDirective } from 'app/shared/directives/clickable.directive';
 import TranslateDirective from 'app/shared/language/translate.directive';
 import { formatDate, formatTimeRange, getLocale } from 'app/shared/util/date-time.util';
 import { formatFullName } from 'app/shared/util/name.util';
@@ -18,7 +19,7 @@ import { formatFullName } from 'app/shared/util/name.util';
 @Component({
   selector: 'jhi-interviewee-card',
   standalone: true,
-  imports: [TranslateModule, TranslateDirective, ButtonComponent, FontAwesomeModule, UserAvatarComponent],
+  imports: [TranslateModule, TranslateDirective, ButtonComponent, FontAwesomeModule, UserAvatarComponent, ClickableDirective],
   templateUrl: './interviewee-card.component.html',
 })
 export class IntervieweeCardComponent {

src/main/webapp/app/interview/interview-process-detail/interviewee-section/interviewee-section.component.html

@@ -55,13 +55,7 @@
 
 <!-- Template for name column with checkbox -->
 <ng-template #nameTemplate let-row>
-  <div
-    class="flex items-center gap-3 cursor-pointer"
-    tabindex="0"
-    role="button"
-    (click)="toggleSelection(row.applicationId)"
-    (keydown.enter)="toggleSelection(row.applicationId)"
-  >
+  <div class="flex items-center gap-3 cursor-pointer" jhiClickable tabindex="0" (click)="toggleSelection(row.applicationId)">
     <jhi-checkbox [model]="row.selected" [errorEnabled]="false" (click)="$event.stopPropagation(); toggleSelection(row.applicationId)" />
     <jhi-user-avatar [fullName]="row.name" [avatarUrl]="row.avatar" loading="lazy" />
     <span class="font-medium text-text-primary">{{ row.name }}</span>

src/main/webapp/app/interview/interview-process-detail/interviewee-section/interviewee-section.component.ts

@@ -22,6 +22,7 @@ import TranslateDirective from 'app/shared/language/translate.directive';
 import { ConfirmDialog } from 'app/shared/components/atoms/confirm-dialog/confirm-dialog';
 import { CheckboxComponent } from 'app/shared/components/atoms/checkbox/checkbox.component';
 import { UserAvatarComponent } from 'app/shared/components/atoms/user-avatar/user-avatar.component';
+import { ClickableDirective } from 'app/shared/directives/clickable.directive';
 
 import { CancelInterviewModalComponent } from '../cancel-interview-modal/cancel-interview-modal.component';
 
@@ -55,6 +56,7 @@ interface ApplicantRow {
     CheckboxComponent,
     UserAvatarComponent,
     CancelInterviewModalComponent,
+    ClickableDirective,
   ],
   templateUrl: './interviewee-section.component.html',
 })

src/main/webapp/app/interview/interview-process-detail/slots-section/assign-applicant-modal/assign-applicant-modal.component.html

@@ -76,13 +76,7 @@ <h3 class="text-base font-semibold text-text-primary">{{ slotDate() }} | {{ slot
 
   <ng-template #applicantTpl let-person>
     @let displayName = person.user?.name ?? ((person.user?.firstName ?? '') + ' ' + (person.user?.lastName ?? '')).trim();
-    <div
-      class="flex items-center gap-3 cursor-pointer"
-      tabindex="0"
-      role="button"
-      (click)="selectApplicant(person)"
-      (keydown.enter)="selectApplicant(person)"
-    >
+    <div class="flex items-center gap-3 cursor-pointer" jhiClickable tabindex="0" (click)="selectApplicant(person)">
       <jhi-checkbox [model]="isSelected(person)" [errorEnabled]="false" (click)="$event.stopPropagation(); selectApplicant(person)" />
       <jhi-user-avatar [fullName]="displayName" [avatarUrl]="person.user?.avatar" loading="lazy" />
       <span class="font-medium text-text-primary">{{ displayName }}</span>

src/main/webapp/app/interview/interview-process-detail/slots-section/assign-applicant-modal/assign-applicant-modal.component.ts

@@ -16,6 +16,7 @@ import { isVirtualLocation } from 'app/shared/util/location.util';
 import { CheckboxComponent } from 'app/shared/components/atoms/checkbox/checkbox.component';
 import { DynamicTableComponent } from 'app/shared/components/organisms/dynamic-table/dynamic-table.component';
 import { UserAvatarComponent } from 'app/shared/components/atoms/user-avatar/user-avatar.component';
+import { ClickableDirective } from 'app/shared/directives/clickable.directive';
 
 // Modal component for assigning an applicant to an interview slot.
 // Displays available interviewees and allows single selection for slot assignment.
@@ -32,6 +33,7 @@ import { UserAvatarComponent } from 'app/shared/components/atoms/user-avatar/use
     CheckboxComponent,
     DynamicTableComponent,
     UserAvatarComponent,
+    ClickableDirective,
   ],
   templateUrl: './assign-applicant-modal.component.html',
 })

src/main/webapp/app/interview/interview-processes-overview/interview-process-card/interview-process-card.component.html

@@ -1,9 +1,7 @@
-<article
+<button
+  type="button"
   (click)="onCardClick()"
-  (keydown.enter)="onCardClick()"
-  tabindex="0"
-  role="button"
-  class="flex flex-row rounded-lg border border-border-default bg-background-default overflow-hidden cursor-pointer transition-all hover:bg-background-surface group"
+  class="btn-bare flex flex-row rounded-lg border border-border-default bg-background-default overflow-hidden cursor-pointer transition-all hover:bg-background-surface group w-full text-left"
   [class.opacity-80]="isClosed()"
 >
   <!-- Image -->
@@ -89,4 +87,4 @@ <h3 class="text-base font-semibold line-clamp-2 m-0 leading-tight text-text flex
       </div>
     </div>
   </div>
-</article>
+</button>

src/main/webapp/app/interview/interview-processes-overview/upcoming-interviews-widget/upcoming-interview-card/upcoming-interview-card.component.html

@@ -1,8 +1,8 @@
 <div
-  (click)="navigateToAssessment($event)"
-  (keydown.enter)="navigateToAssessment($event)"
+  jhiClickable
   role="link"
   tabindex="0"
+  (click)="navigateToAssessment($event)"
   class="flex flex-col p-3 bg-background-default border rounded-lg border-border-default hover:bg-background-surface gap-2 group h-[8.5rem] w-full overflow-hidden cursor-pointer"
 >
   <!-- Row 1: Avatar + Name -->