The focus issues on the Risk assessment page

modules/ui/src/app/app.component.ts

@@ -22,6 +22,8 @@ import {
   inject,
   ViewChild,
   ChangeDetectorRef,
+  Renderer2,
+  HostListener,
 } from '@angular/core';
 import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -119,6 +121,7 @@ export class AppComponent implements AfterViewInit {
   private testRunService = inject(TestRunService);
   private cdr = inject(ChangeDetectorRef);
   appStore = inject(AppStore);
+  private renderer = inject(Renderer2);
 
   public readonly CalloutType = CalloutType;
   public readonly StatusOfTestrun = StatusOfTestrun;
@@ -133,6 +136,16 @@ export class AppComponent implements AfterViewInit {
   deviceTipTarget!: HTMLElement;
   isClosedTip = false;
 
+  @HostListener('mousedown')
+  onMousedown() {
+    this.renderer.addClass(document.body as HTMLElement, 'using-mouse');
+  }
+
+  @HostListener('keydown')
+  onKeydown() {
+    this.renderer.removeClass(document.body as HTMLElement, 'using-mouse');
+  }
+
   navigateToRuntime = () => {
     this.route.navigate([Routes.Testing]);
     this.appStore.setIsOpenStartTestrun();

modules/ui/src/app/components/list-item/list-item.component.scss

@@ -42,4 +42,7 @@
 
 .list-item-menu-item {
   padding: 16px 24px;
+  &.cdk-mouse-focused::before {
+    content: none;
+  }
 }

modules/ui/src/app/components/list-layout/list-layout.component.scss

@@ -106,6 +106,10 @@
   }
 }
 
+::ng-deep .using-mouse .search-field input:focus {
+  outline: none;
+}
+
 .entity-list {
   display: grid;
   grid-template-columns: 1fr;

modules/ui/src/app/components/side-button-menu/side-button-menu.component.scss

@@ -46,6 +46,17 @@
   grid-template-columns: min-content auto;
 }
 
+::ng-deep .using-mouse .side-add-menu-button {
+  &.cdk-mouse-focused,
+  &.cdk-program-focused {
+    background: inherit !important;
+  }
+  &.cdk-mouse-focused::before,
+  &.cdk-program-focused::before {
+    content: none;
+  }
+}
+
 .side-add-menu-button-description {
   color: colors.$on-surface-variant;
   font-family: variables.$font-text;

modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.html

@@ -15,12 +15,18 @@
 -->
 <form [formGroup]="profileForm" class="profile-form">
   <div class="field-container">
-    <p class="field-label name-field-label">Profile name *</p>
+    <label class="field-label name-field-label" for="name-field"
+      >Profile name *</label
+    >
     <mat-form-field
       appearance="outline"
       floatLabel="always"
       class="profile-form-field">
-      <input class="form-name" formControlName="name" matInput />
+      <input
+        id="name-field"
+        class="form-name"
+        formControlName="name"
+        matInput />
       <mat-hint>Required for saving a profile</mat-hint>
       <mat-error
         *ngIf="nameControl.hasError('invalid_format')"

modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.ts

@@ -50,7 +50,6 @@ import {
 import { FormControlType } from '../../../model/question';
 import { ProfileValidators } from './profile.validators';
 import { DynamicFormComponent } from '../../../components/dynamic-form/dynamic-form.component';
-import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { Observable } from 'rxjs/internal/Observable';
 import { of } from 'rxjs/internal/observable/of';
 import { map } from 'rxjs/internal/operators/map';
@@ -60,7 +59,6 @@ import { RiskAssessmentStore } from '../risk-assessment.store';
 
 @Component({
   selector: 'app-profile-form',
-
   imports: [
     MatButtonModule,
     CommonModule,
@@ -75,7 +73,6 @@ import { RiskAssessmentStore } from '../risk-assessment.store';
   ],
   templateUrl: './profile-form.component.html',
   styleUrl: './profile-form.component.scss',
-  hostDirectives: [CdkTrapFocus],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProfileFormComponent implements OnInit, AfterViewInit {

modules/ui/src/app/pages/risk-assessment/risk-assessment.store.ts

@@ -111,7 +111,7 @@ export class RiskAssessmentStore extends ComponentStore<AppComponentState> {
       delay(10),
       tap(() => {
         this.focusManagerService.focusFirstElementInContainer(
-          window.document.querySelector('.risk-assessment-content-empty')
+          window.document.querySelector('.content-empty')
         );
       })
     );
@@ -121,7 +121,7 @@ export class RiskAssessmentStore extends ComponentStore<AppComponentState> {
     return trigger$.pipe(
       tap(() => {
         this.focusManagerService.focusFirstElementInContainer(
-          window.document.querySelector('.profiles-drawer-content .selected')
+          window.document.querySelector('.entity-list .selected')
         );
       })
     );