Development: Use real buttons and links instead of click-handler divs

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

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

@@ -3,11 +3,12 @@ import { Router } from '@angular/router';
 import { UpcomingInterviewDTO } from 'app/generated/model/upcoming-interview-dto';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { UserAvatarComponent } from 'app/shared/components/atoms/user-avatar/user-avatar.component';
+import { ClickableDirective } from 'app/shared/directives/clickable.directive';
 import dayjs from 'dayjs/esm';
 
 @Component({
   selector: 'jhi-upcoming-interview-card',
-  imports: [FontAwesomeModule, UserAvatarComponent],
+  imports: [FontAwesomeModule, UserAvatarComponent, ClickableDirective],
   templateUrl: './upcoming-interview-card.component.html',
 })
 export class UpcomingInterviewCardComponent {

src/main/webapp/app/job/job-creation-form/job-creation-form.component.html

@@ -419,10 +419,9 @@ <h1 jhiTranslate="{{ pageTitle() }}"></h1>
   <ng-template #imageCard let-image="image" let-showDelete="showDelete" let-isNoImage="isNoImage" let-isSelected="isSelected">
     <div
       [class]="'relative rounded-lg transition-all cursor-pointer hover:shadow-lg hover:-translate-y-1' + (showDelete ? ' group' : '')"
+      jhiClickable
       tabindex="0"
-      role="button"
       (click)="isNoImage ? clearImageSelection() : selectImage(image)"
-      (keydown.enter)="isNoImage ? clearImageSelection() : selectImage(image)"
     >
       <div
         class="relative rounded-lg overflow-hidden border-[0.2rem] transition-colors aspect-video"
@@ -443,13 +442,7 @@ <h1 jhiTranslate="{{ pageTitle() }}"></h1>
         }
       </div>
       @if (showDelete) {
-        <div
-          class="absolute top-2 right-2"
-          tabindex="0"
-          role="button"
-          (click)="$event.stopPropagation()"
-          (keydown.enter)="$event.stopPropagation()"
-        >
+        <div class="absolute top-2 right-2" role="presentation" (click)="$event.stopPropagation()">
           <jhi-confirm-dialog
             #deleteDialog
             label="button.delete"
@@ -537,7 +530,8 @@ <h1 jhiTranslate="{{ pageTitle() }}"></h1>
           [shouldTranslate]="true"
         />
       } @else if (aiToggleSignal() && complianceCount() > 0) {
-        <div tabindex="0" (click)="handleMessageClick($event)" (keydown.enter)="handleMessageClick($event)">
+        <!-- Delegates for the link inside the translated message, which is the actual control and carries its own tabindex. -->
+        <div role="presentation" (click)="handleMessageClick($event)" (keydown.enter)="handleMessageClick($event)">
           <jhi-message
             [severity]="hasCriticalCompliance() ? 'error' : 'warn'"
             classStyling="py-1"

src/main/webapp/app/job/job-creation-form/job-creation-form.component.ts

@@ -50,6 +50,7 @@ import {
   ImageUploadError,
 } from 'app/shared/components/atoms/image-upload-button/image-upload-button.component';
 import { CheckboxComponent } from 'app/shared/components/atoms/checkbox/checkbox.component';
+import { ClickableDirective } from 'app/shared/directives/clickable.directive';
 import {
   JobFormDTOFundingTypeEnum,
   JobFormDTOLocationEnum,
@@ -126,6 +127,7 @@ const DEFAULT_RECOMMENDATION_TYPE_OPTION =
     CompliancePopoverComponent,
     TooltipModule,
     SavingBadgeComponent,
+    ClickableDirective,
   ],
   providers: [JobResourceApi],
 })

src/main/webapp/app/job/job-overview/job-card/job-card.component.html

@@ -1,10 +1,7 @@
-<div
-  class="group rounded-lg border border-border-default bg-background-default hover:scale-[1.02] hover:bg-background-surface focus-within:ring-2 focus-within:ring-primary focus-within:outline-none transition-all duration-200 overflow-hidden cursor-pointer w-full h-full max-h-[26rem] flex flex-col"
-  tabindex="0"
-  role="button"
+<a
+  [routerLink]="detailLink()"
   [attr.aria-label]="'jobOverviewPage.ariaLabels.viewJobDetails' | translate: { title: jobTitle() }"
-  (click)="onViewDetails()"
-  (keydown)="onKeyDown($event)"
+  class="group rounded-lg border border-border-default bg-background-default hover:scale-[1.02] hover:bg-background-surface focus-within:ring-2 focus-within:ring-primary focus-within:outline-none transition-all duration-200 overflow-hidden cursor-pointer w-full h-full max-h-[26rem] flex flex-col no-underline text-inherit"
 >
   <div
     class="h-32 px-4 py-3 bg-cover bg-center flex flex-shrink-0 flex-col"
@@ -98,4 +95,4 @@ <h3 class="text-lg font-semibold line-clamp-2 leading-snug mb-2" [title]="jobTit
       }
     </div>
   </div>
-</div>
+</a>

src/main/webapp/app/job/job-overview/job-card/job-card.component.ts

@@ -1,6 +1,6 @@
 import { Component, computed, inject, input } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { Router } from '@angular/router';
+import { RouterLink } from '@angular/router';
 import { CardModule } from 'primeng/card';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { TooltipModule } from 'primeng/tooltip';
@@ -31,6 +31,7 @@ export const ApplicationStatusExtended = {
     LocalizedDatePipe,
     UserAvatarComponent,
     TagComponent,
+    RouterLink,
   ],
 })
 export class JobCardComponent {
@@ -59,6 +60,8 @@ export class JobCardComponent {
 
   currentLang = toSignal(this.translate.onLangChange);
 
+  readonly detailLink = computed(() => `/job/detail/${this.jobId()}`);
+
   readonly formattedWorkload = computed(() => {
     const workloadValue = this.workload();
     if (workloadValue === undefined) {
@@ -88,17 +91,4 @@ export class JobCardComponent {
     const state = this.applicationState();
     return state !== ApplicationStatusExtended.NotYetApplied && state !== JobCardDTOApplicationStateEnum.Saved;
   });
-
-  private router = inject(Router);
-
-  onViewDetails(): void {
-    void this.router.navigate([`/job/detail/${this.jobId()}`]);
-  }
-
-  onKeyDown(event: KeyboardEvent): void {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      this.onViewDetails();
-    }
-  }
 }

src/main/webapp/app/layouts/footer/footer.component.html

@@ -35,31 +35,10 @@
   }
 
   <div class="flex ml-auto pr-4 gap-[0.3rem] max-[600px]:px-2 max-[600px]:ml-0! max-[600px]:pr-0!">
-    <p
-      (click)="navigateToImprint()"
-      (keydown.enter)="navigateToImprint()"
-      class="inline-flex cursor-pointer text-primary hover:underline"
-      jhiTranslate="footer.imprint"
-      tabindex="0"
-      role="button"
-    ></p>
-    <span>|</span>
-    <p
-      (click)="navigateToPrivacy()"
-      (keydown.enter)="navigateToPrivacy()"
-      class="inline-flex cursor-pointer text-primary hover:underline"
-      jhiTranslate="footer.privacy"
-      tabindex="0"
-      role="button"
-    ></p>
-    <span>|</span>
-    <p
-      (click)="navigateToAboutUs()"
-      (keydown.enter)="navigateToAboutUs()"
-      class="inline-flex cursor-pointer text-primary hover:underline"
-      jhiTranslate="footer.about-us"
-      tabindex="0"
-      role="button"
-    ></p>
+    <a routerLink="/imprint" class="inline-flex cursor-pointer text-primary hover:underline" jhiTranslate="footer.imprint"></a>
+    <span class="divider">|</span>
+    <a routerLink="/privacy" class="inline-flex cursor-pointer text-primary hover:underline" jhiTranslate="footer.privacy"></a>
+    <span class="divider">|</span>
+    <a routerLink="/about-us" class="inline-flex cursor-pointer text-primary hover:underline" jhiTranslate="footer.about-us"></a>
   </div>
 </div>

src/main/webapp/app/layouts/footer/footer.component.ts

@@ -1,6 +1,6 @@
 import { Component, ViewEncapsulation, inject } from '@angular/core';
 import { DatePipe } from '@angular/common';
-import { Router } from '@angular/router';
+import { RouterLink } from '@angular/router';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { VERSION } from 'app/app.constants';
 import { hasText } from 'app/shared/util/text.util';
@@ -13,34 +13,20 @@ import { GitInfo } from '../profiles/profile-info.model';
   selector: 'jhi-footer',
   standalone: true,
   templateUrl: './footer.component.html',
-  imports: [DatePipe, TranslateDirective],
+  imports: [DatePipe, TranslateDirective, RouterLink],
   encapsulation: ViewEncapsulation.None,
 })
 export default class FooterComponent {
-  version: string;
+  readonly version = VERSION;
 
   protected profileInfo;
 
-  private router = inject(Router);
   private profileService = inject(ProfileService);
 
   constructor() {
-    this.version = VERSION;
     this.profileInfo = toSignal(this.profileService.getProfileInfo());
   }
 
-  navigateToImprint(): void {
-    void this.router.navigate(['/imprint']);
-  }
-
-  navigateToPrivacy(): void {
-    void this.router.navigate(['/privacy']);
-  }
-
-  navigateToAboutUs(): void {
-    void this.router.navigate(['/about-us']);
-  }
-
   protected get gitInfo(): GitInfo | undefined {
     const info = this.profileInfo();
     return hasText(info?.ribbonEnv) && info.gitInfo ? info.gitInfo : undefined;

src/main/webapp/app/shared/components/atoms/checkbox/checkbox.component.html

@@ -4,6 +4,7 @@
       <p-checkbox
         [formControl]="formControl()"
         [binary]="true"
+        [tabindex]="tabIndex()"
         [id]="inputId()"
         size="small"
         (onChange)="onCheckboxChange($event)"
@@ -15,6 +16,7 @@
         [ngModel]="model()"
         (ngModelChange)="modelChange.emit($event)"
         [binary]="true"
+        [tabindex]="tabIndex()"
         [id]="inputId()"
         [disabled]="disabled()"
         size="small"

src/main/webapp/app/shared/components/atoms/checkbox/checkbox.component.ts

@@ -1,4 +1,4 @@
-import { Component, forwardRef } from '@angular/core';
+import { Component, forwardRef, input } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { CheckboxChangeEvent, CheckboxModule } from 'primeng/checkbox';
@@ -21,6 +21,9 @@ import { BaseInputDirective } from '../base-input/base-input.component';
   imports: [FormsModule, ReactiveFormsModule, CheckboxModule, TranslateDirective, FontAwesomeModule, TooltipModule],
 })
 export class CheckboxComponent extends BaseInputDirective<boolean> {
+  /** Set to -1 where the box only shows state and something around it takes the focus. */
+  tabIndex = input<number>(0);
+
   // Methods
   onCheckboxChange(event: CheckboxChangeEvent): void {
     const value = event.checked === true;