VIH-10632 UI test fixes (#2133)

hmcts · Apr 30, 2024 · 72af0ce · 72af0ce
1 parent b1ffe91
commit 72af0ce
Show file tree

Hide file tree

Showing 20 changed files with 331 additions and 283 deletions.
diff --git a/VideoWeb/VideoWeb/ClientApp/src/app/app.component.html b/VideoWeb/VideoWeb/ClientApp/src/app/app.component.html
@@ -1,24 +1,28 @@
 <div [ngClass]="(hideNonVideoComponents$ | async) ? 'hide-non-video-elements' : ''">
-  <div #skipLink tabindex="0"></div>
-  <div role="navigation">
+  <div #skipLink></div>
+  <nav>
     <a href="javascript:void(0)" class="govuk-skip-link non-video-element" (click)="skipToContent()">{{
       'app.skip-to-main-content' | translate
     }}</a>
-  </div>
-  <header role="banner">
+  </nav>
+  <header class="govuk-header" role="banner" data-module="header">
     <app-header class="govuk-!-display-none-print non-video-element" [loggedIn]="loggedIn"></app-header>
-    <div class="govuk-width-container non-video-element" [ngClass]="(backLinkDetails$ | async)?.className">
+  </header>
+  <div class="govuk-width-container app-width-container--wide" id="master-container">
+    <section
+      aria-label="Beta banner and back navigation container"
+      class="govuk-width-container non-video-element"
+      [ngClass]="(backLinkDetails$ | async)?.className"
+    >
       <app-beta-banner *ngIf="loggedIn" [isRepresentativeOrIndividual]="isRepresentativeOrIndividual"></app-beta-banner>
       <app-back-navigation
         *ngIf="backLinkDetails$ | async as backLinkDetails"
         [linkText]="backLinkDetails.text"
         (navigateBack)="navigateBack(backLinkDetails.path)"
         class="non-video-element"
       ></app-back-navigation>
-    </div>
-  </header>
-  <div class="govuk-width-container" id="master-container">
-    <main #maincontent class="govuk-main-wrapper app-width-container--wide" id="main-content" role="main" tabindex="-1">
+    </section>
+    <main #maincontent class="govuk-main-wrapper" id="main-content" role="main" tabindex="-1">
       <router-outlet></router-outlet>
     </main>
   </div>

diff --git a/VideoWeb/VideoWeb/ClientApp/src/app/services/api/consultation.service.ts b/VideoWeb/VideoWeb/ClientApp/src/app/services/api/consultation.service.ts
@@ -22,8 +22,8 @@ import { ModalService } from '../modal.service';
     providedIn: 'root'
 })
 export class ConsultationService {
-    static ERROR_PC_MODAL = 'pc-error-modal';
-    static LEAVE_PC_MODAL = 'pc-leave-modal';
+    static readonly ERROR_PC_MODAL = 'pc-error-modal';
+    static readonly LEAVE_PC_MODAL = 'pc-leave-modal';
 
     constructor(
         private apiClient: ApiClient,

diff --git a/VideoWeb/VideoWeb/ClientApp/src/app/shared/accessibility/accessibility.component.html b/VideoWeb/VideoWeb/ClientApp/src/app/shared/accessibility/accessibility.component.html
diff --git a/VideoWeb/VideoWeb/ClientApp/src/app/shared/beta-banner/beta-banner.component.html b/VideoWeb/VideoWeb/ClientApp/src/app/shared/beta-banner/beta-banner.component.html
@@ -1,12 +1,9 @@
-<div class="govuk-phase-banner" *ngIf="isRepresentativeOrIndividual">
-    <p class="govuk-phase-banner__content">
-        <strong class="govuk-tag govuk-phase-banner__content__tag">
-            {{'beta-banner.beta' | translate}}
-        </strong>
-        <span class="govuk-phase-banner__text">
-            {{'beta-banner.this-new-service' | translate}}
-            <a class="govuk-link" href="{{ pageUrl }}"> {{'beta-banner.feedback' | translate}} </a>
-            {{'beta-banner.help-improve' | translate}}
-        </span>
-    </p>
+<div class="govuk-phase-banner">
+  <p class="govuk-phase-banner__content">
+    <strong class="govuk-tag govuk-phase-banner__content__tag"> {{ 'beta-banner.beta' | translate }} </strong>
+    <span class="govuk-phase-banner__text">
+      {{ 'beta-banner.this-new-service' | translate }} <a class="govuk-link" href="#">{{ 'beta-banner.feedback' | translate }}</a>
+      {{ 'beta-banner.help-improve' | translate }}
+    </span>
+  </p>
 </div>
diff --git a/VideoWeb/VideoWeb/ClientApp/src/app/shared/beta-banner/beta-banner.component.spec.ts b/VideoWeb/VideoWeb/ClientApp/src/app/shared/beta-banner/beta-banner.component.spec.ts
@@ -14,6 +14,7 @@ import { eventsServiceSpy, hearingStatusSubjectMock } from 'src/app/testing/mock
 import { translateServiceSpy } from 'src/app/testing/mocks/mock-translation.service';
 import { MockLogger } from 'src/app/testing/mocks/mock-logger';
 import { BetaBannerComponent } from './beta-banner.component';
+import { TranslatePipeMock } from 'src/app/testing/mocks/mock-translation-pipe';
 
 @Component({ selector: 'app-mock-component', template: '' })
 class Mock1Component {}
@@ -40,7 +41,7 @@ describe('BetaBannerComponent', () => {
 
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
-            declarations: [BetaBannerComponent, Mock1Component, Mock2Component],
+            declarations: [BetaBannerComponent, Mock1Component, Mock2Component, TranslatePipeMock],
             imports: [RouterTestingModule.withRoutes(routes)],
             providers: [
                 { provide: ProfileService, useValue: profileServiceSpy },

diff --git a/VideoWeb/VideoWeb/ClientApp/src/app/shared/custom-validators.ts b/VideoWeb/VideoWeb/ClientApp/src/app/shared/custom-validators.ts
@@ -1,7 +1,7 @@
 import { UntypedFormControl, ValidatorFn, Validators } from '@angular/forms';
 
 export class CustomValidators extends Validators {
-    public static notEmptyOrWhitespaceValidator: ValidatorFn = (control: UntypedFormControl) => {
+    public static readonly notEmptyOrWhitespaceValidator: ValidatorFn = (control: UntypedFormControl) => {
         if (control.value?.trim().length === 0) {
             return {
                 emptyOrWhitespaceError: 'value is empty or consists of whitespace only'

diff --git a/VideoWeb/VideoWeb/ClientApp/src/app/shared/equipment-problem/equipment-problem.component.ts b/VideoWeb/VideoWeb/ClientApp/src/app/shared/equipment-problem/equipment-problem.component.ts
@@ -1,13 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { vhContactDetails } from 'src/app/shared/contact-information';
 
 @Component({
     selector: 'app-equipment-problem',
     templateUrl: './equipment-problem.component.html',
     styleUrls: []
 })
-export class EquipmentProblemComponent implements OnInit {
+export class EquipmentProblemComponent {
     contactDetails = vhContactDetails;
-
-    ngOnInit() {}
 }
diff --git a/VideoWeb/VideoWeb/ClientApp/src/app/shared/header/header.component.html b/VideoWeb/VideoWeb/ClientApp/src/app/shared/header/header.component.html
@@ -1,30 +1,31 @@
-<header class="govuk-header" role="banner" data-module="header">
-  <div class="govuk-header__container">
-      <div class="govuk-width-container">
-          <div class="govuk-header__logo">
-              <span class="govuk-header__logotype-crown">
-                  <ng-container *ngIf="hearingVenueIsScottish$ | async; then sctsCrest; else hmctsCrest"></ng-container>
-                  <ng-template #sctsCrest>
-                      <img role="presentation"
-                           id="header-logo-scot"
-                           class="govuk-header__logotype-crest"
-                           src="/assets/images/scot-crest-white.png"
-                           height="40"
-                           [attr.alt]="'participants-panel.scottish-crest' | translate"/>
-                  </ng-template>
-                  <ng-template #hmctsCrest>
-                      <app-header-logo-svg></app-header-logo-svg>
-                  </ng-template>
-                <span class="govuk-header__service-name header-item"> {{'header.hm-courts' | translate}} &amp; {{'header.tribunals-service' | translate}}</span>
-              </span>
-          </div>
-          <nav class="govuk-header__navigation" [attr.aria-label]="'account-navigation-label' | translate">
-              <ul class="govuk-header__navigation-list">
-                  <li *ngIf="loggedIn" class="govuk-header__navigation-item header-item">
-                      <a id="logout-link" class="govuk-header__link"  [routerLink]="logoutRoute">{{'header.sign-out' | translate}}</a>
-                  </li>
-              </ul>
-          </nav>
-      </div>
+<div class="govuk-header__container">
+  <div class="govuk-width-container">
+    <div class="govuk-header__logo">
+      <span class="govuk-header__logotype-crown">
+        <ng-container *ngIf="hearingVenueIsScottish$ | async; then sctsCrest; else hmctsCrest"></ng-container>
+        <ng-template #sctsCrest>
+          <img
+            id="header-logo-scot"
+            class="govuk-header__logotype-crest"
+            src="/assets/images/scot-crest-white.png"
+            height="40"
+            [attr.alt]="'participants-panel.scottish-crest' | translate"
+          />
+        </ng-template>
+        <ng-template #hmctsCrest>
+          <app-header-logo-svg></app-header-logo-svg>
+        </ng-template>
+        <span class="govuk-header__service-name header-item">
+          {{ 'header.hm-courts' | translate }} &amp; {{ 'header.tribunals-service' | translate }}</span
+        >
+      </span>
+    </div>
+    <nav class="govuk-header__navigation" [attr.aria-label]="'account-navigation-label' | translate">
+      <ul class="govuk-header__navigation-list">
+        <li *ngIf="loggedIn" class="govuk-header__navigation-item header-item">
+          <a id="logout-link" class="govuk-header__link" [routerLink]="logoutRoute">{{ 'header.sign-out' | translate }}</a>
+        </li>
+      </ul>
+    </nav>
   </div>
-</header>
+</div>
diff --git a/VideoWeb/VideoWeb/ClientApp/src/app/shared/privacy-policy/privacy-policy.component.html b/VideoWeb/VideoWeb/ClientApp/src/app/shared/privacy-policy/privacy-policy.component.html
@@ -1,107 +1,120 @@
 <div class="govuk-grid-row">
-  <div class="govuk-grid-column-two-thirds"><img [attr.alt]="'privacy-policy.crest-image-alt' | translate" src="/assets/images/hmcts-logo.gif" /></div>
+  <div class="govuk-grid-column-two-thirds">
+    <img [attr.alt]="'privacy-policy.crest-img-alt' | translate" src="/assets/images/hmcts-logo.gif" />
+  </div>
 </div>
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-full">
-    <h2 class="govuk-heading-l">{{'privacy-policy.heading' | translate}}</h2>
+    <h2 class="govuk-heading-l">{{ 'privacy-policy.heading' | translate }}</h2>
 
-    <button class="govuk-button govuk-!-display-none-print" (click)="printPage()" type="button">{{'privacy-policy.print-button' | translate}}</button>
+    <button class="govuk-button govuk-!-display-none-print" (click)="printPage()" type="button">
+      {{ 'privacy-policy.print-button' | translate }}
+    </button>
 
-    <p class="govuk-body">{{'privacy-policy.paragraph1' | translate}}</p>
-    <p class="govuk-body">{{'privacy-policy.paragraph2' | translate}}</p>
+    <p class="govuk-body">{{ 'privacy-policy.paragraph1' | translate }}</p>
+    <p class="govuk-body">{{ 'privacy-policy.paragraph2' | translate }}</p>
 
-    <h3 class="govuk-heading-m">{{'privacy-policy.why-we-collect.heading' | translate}}</h3>
-    <p class="govuk-body">{{'privacy-policy.why-we-collect.paragraph' | translate}}
-    </p>
+    <h3 class="govuk-heading-m">{{ 'privacy-policy.why-we-collect.heading' | translate }}</h3>
+    <p class="govuk-body">{{ 'privacy-policy.why-we-collect.paragraph' | translate }}</p>
 
-    <h3 class="govuk-heading-m">{{'privacy-policy.what-we-do.heading' | translate}}</h3>
-    <p class="govuk-body">{{'privacy-policy.what-we-do.paragraph1' | translate}}</p>
-    <p class="govuk-body">{{'privacy-policy.what-we-do.paragraph2' | translate}}</p>
+    <h3 class="govuk-heading-m">{{ 'privacy-policy.what-we-do.heading' | translate }}</h3>
+    <p class="govuk-body">{{ 'privacy-policy.what-we-do.paragraph1' | translate }}</p>
+    <p class="govuk-body">{{ 'privacy-policy.what-we-do.paragraph2' | translate }}</p>
 
-    <h3 class="govuk-heading-m">{{'privacy-policy.what-we-collect.heading' | translate}}</h3>
-    <p class="govuk-body">{{'privacy-policy.what-we-collect.paragraph' | translate}}</p>
+    <h3 class="govuk-heading-m">{{ 'privacy-policy.what-we-collect.heading' | translate }}</h3>
+    <p class="govuk-body">{{ 'privacy-policy.what-we-collect.paragraph' | translate }}</p>
     <ul class="govuk-list govuk-list--bullet">
-      <li>{{'privacy-policy.what-we-collect.list.1' | translate}}</li>
-      <li>{{'privacy-policy.what-we-collect.list.2' | translate}}</li>
-      <li>{{'privacy-policy.what-we-collect.list.3' | translate}}</li>
-      <li>{{'privacy-policy.what-we-collect.list.4' | translate}}</li>
-      <li>{{'privacy-policy.what-we-collect.list.5' | translate}}</li>
-      <li>{{'privacy-policy.what-we-collect.list.6' | translate}}</li>
-      <li>{{'privacy-policy.what-we-collect.list.7' | translate}}</li>
+      <li>{{ 'privacy-policy.what-we-collect.list.1' | translate }}</li>
+      <li>{{ 'privacy-policy.what-we-collect.list.2' | translate }}</li>
+      <li>{{ 'privacy-policy.what-we-collect.list.3' | translate }}</li>
+      <li>{{ 'privacy-policy.what-we-collect.list.4' | translate }}</li>
+      <li>{{ 'privacy-policy.what-we-collect.list.5' | translate }}</li>
+      <li>{{ 'privacy-policy.what-we-collect.list.6' | translate }}</li>
+      <li>{{ 'privacy-policy.what-we-collect.list.7' | translate }}</li>
       <li>
-        {{'privacy-policy.what-we-collect.list.8' | translate}} <a href="http://www.aboutcookies.org.uk/managing-cookies" rel="noopener noreferrer" target="_blank">{{'privacy-policy.what-we-collect.list.8-cookies' | translate}}</a>.
+        {{ 'privacy-policy.what-we-collect.list.8' | translate }}
+        <a href="http://www.aboutcookies.org.uk/managing-cookies" rel="noopener noreferrer" target="_blank">{{
+          'privacy-policy.what-we-collect.list.8-cookies' | translate
+        }}</a
+        >.
       </li>
     </ul>
 
-    <h3 class="govuk-heading-m">{{'privacy-policy.how-long.heading' | translate}}</h3>
-    <p class="govuk-body">{{'privacy-policy.how-long.paragraph' | translate}}</p>
+    <h3 class="govuk-heading-m">{{ 'privacy-policy.how-long.heading' | translate }}</h3>
+    <p class="govuk-body">{{ 'privacy-policy.how-long.paragraph' | translate }}</p>
 
-    <h3 class="govuk-heading-m">{{'privacy-policy.shoring-and-sharing.heading' | translate}}</h3>
-    <p class="govuk-body">{{'privacy-policy.shoring-and-sharing.paragraph' | translate}} </p>
+    <h3 class="govuk-heading-m">{{ 'privacy-policy.shoring-and-sharing.heading' | translate }}</h3>
+    <p class="govuk-body">{{ 'privacy-policy.shoring-and-sharing.paragraph' | translate }}</p>
 
-    <h3 class="govuk-heading-m">{{'privacy-policy.your-rights.heading' | translate}}</h3>
-    <p class="govuk-body">{{'privacy-policy.your-rights.paragraph1' | translate}}</p>
+    <h3 class="govuk-heading-m">{{ 'privacy-policy.your-rights.heading' | translate }}</h3>
+    <p class="govuk-body">{{ 'privacy-policy.your-rights.paragraph1' | translate }}</p>
     <ul class="govuk-list govuk-list--bullet">
-      <li>{{'privacy-policy.your-rights.list-ask.1' | translate}}</li>
-      <li>{{'privacy-policy.your-rights.list-ask.2' | translate}}</li>
-      <li>{{'privacy-policy.your-rights.list-ask.3' | translate}}</li>
-      <li>{{'privacy-policy.your-rights.list-ask.4' | translate}}</li>
+      <li>{{ 'privacy-policy.your-rights.list-ask.1' | translate }}</li>
+      <li>{{ 'privacy-policy.your-rights.list-ask.2' | translate }}</li>
+      <li>{{ 'privacy-policy.your-rights.list-ask.3' | translate }}</li>
+      <li>{{ 'privacy-policy.your-rights.list-ask.4' | translate }}</li>
     </ul>
-    <p class="govuk-body">{{'privacy-policy.your-rights.paragraph2' | translate}}</p>
+    <p class="govuk-body">{{ 'privacy-policy.your-rights.paragraph2' | translate }}</p>
     <ul class="govuk-list govuk-list--bullet">
       <li>
-        {{'privacy-policy.your-rights.list-see.1-1' | translate}}
+        {{ 'privacy-policy.your-rights.list-see.1-1' | translate }}
         <a target="_blank" href="https://www.gov.uk/government/publications/request-your-personal-data-from-moj" rel="noopener noreferrer">
-          {{'privacy-policy.your-rights.list-see.1-link' | translate}}</a>
-          {{'privacy-policy.your-rights.list-see.1-2' | translate}}
+          {{ 'privacy-policy.your-rights.list-see.1-link' | translate }}</a
+        >
+        {{ 'privacy-policy.your-rights.list-see.1-2' | translate }}
       </li>
-      <li>{{'privacy-policy.your-rights.list-see.2' | translate}}</li>
+      <li>{{ 'privacy-policy.your-rights.list-see.2' | translate }}</li>
     </ul>
-    <p class="govuk-body">{{'privacy-policy.your-rights.paragraph3' | translate}}</p>
+    <p class="govuk-body">{{ 'privacy-policy.your-rights.paragraph3' | translate }}</p>
     <ul class="govuk-list govuk-list--bullet">
-      <li>{{'privacy-policy.your-rights.list-more.1' | translate}}</li>
-      <li>{{'privacy-policy.your-rights.list-more.2' | translate}}</li>
-      <li>{{'privacy-policy.your-rights.list-more.3' | translate}}</li>
-      <li>{{'privacy-policy.your-rights.list-more.4' | translate}}</li>
+      <li>{{ 'privacy-policy.your-rights.list-more.1' | translate }}</li>
+      <li>{{ 'privacy-policy.your-rights.list-more.2' | translate }}</li>
+      <li>{{ 'privacy-policy.your-rights.list-more.3' | translate }}</li>
+      <li>{{ 'privacy-policy.your-rights.list-more.4' | translate }}</li>
     </ul>
-    <p class="govuk-body">{{'privacy-policy.your-rights.paragraph4' | translate}}</p>
+    <p class="govuk-body">{{ 'privacy-policy.your-rights.paragraph4' | translate }}</p>
     <ul class="govuk-list govuk-list--bullet">
-      <li>{{'privacy-policy.your-rights.list-contact.1' | translate}}</li>
+      <li>{{ 'privacy-policy.your-rights.list-contact.1' | translate }}</li>
       <li>
-        {{'privacy-policy.your-rights.list-contact.2' | translate}}
+        {{ 'privacy-policy.your-rights.list-contact.2' | translate }}
         <a href="mailto:[email protected]">data.compliance&#64;justice.gov.uk</a>
       </li>
     </ul>
-    <h3 class="govuk-heading-m">{{'privacy-policy.how-to-complain.heading' | translate}}</h3>
+    <h3 class="govuk-heading-m">{{ 'privacy-policy.how-to-complain.heading' | translate }}</h3>
     <p class="govuk-body">
-      {{'privacy-policy.how-to-complain.paragraph1-1' | translate}}
+      {{ 'privacy-policy.how-to-complain.paragraph1-1' | translate }}
       <a href="https://www.gov.uk/government/organisations/hm-courts-and-tribunals-service/about/complaints-procedure">
-        {{'privacy-policy.how-to-complain.paragraph1-link' | translate}}
+        {{ 'privacy-policy.how-to-complain.paragraph1-link' | translate }}
       </a>
-      {{'privacy-policy.how-to-complain.paragraph1-2' | translate}}
+      {{ 'privacy-policy.how-to-complain.paragraph1-2' | translate }}
     </p>
     <p class="govuk-body">
-      {{'privacy-policy.how-to-complain.paragraph2-1' | translate}}<br />
-      {{'privacy-policy.how-to-complain.paragraph2-2' | translate}}
+      {{ 'privacy-policy.how-to-complain.paragraph2-1' | translate }}<br />
+      {{ 'privacy-policy.how-to-complain.paragraph2-2' | translate }}
       <a href="mailto:[email protected]">data.compliance&#64;justice.gov.uk</a>
     </p>
     <p class="govuk-body">
-      {{'privacy-policy.how-to-complain.paragraph3-1' | translate}}
-      <a href="https://ico.org.uk/global/contact-us">{{'privacy-policy.how-to-complain.paragraph3-link' | translate}}</a>
-      {{'privacy-policy.how-to-complain.paragraph3-2' | translate}}
+      {{ 'privacy-policy.how-to-complain.paragraph3-1' | translate }}
+      <a href="https://ico.org.uk/global/contact-us">{{ 'privacy-policy.how-to-complain.paragraph3-link' | translate }}</a>
+      {{ 'privacy-policy.how-to-complain.paragraph3-2' | translate }}
     </p>
-    <h3 class="govuk-heading-m">{{'privacy-policy.hearings-recorded.heading' | translate}}</h3>
-    <p class="govuk-body">{{'privacy-policy.hearings-recorded.paragraph1' | translate}}</p>
+    <h3 class="govuk-heading-m">{{ 'privacy-policy.hearings-recorded.heading' | translate }}</h3>
+    <p class="govuk-body">{{ 'privacy-policy.hearings-recorded.paragraph1' | translate }}</p>
     <ul class="govuk-list govuk-list--bullet">
-      <li>{{'privacy-policy.hearings-recorded.list.1' | translate}}</li>
+      <li>{{ 'privacy-policy.hearings-recorded.list.1' | translate }}</li>
       <li>
-        {{'privacy-policy.hearings-recorded.list.2-1' | translate}}<a href="https://www.gov.uk/find-court-tribunal">{{'privacy-policy.hearings-recorded.list.2-link' | translate}}</a> {{'privacy-policy.hearings-recorded.list.2-2' | translate}}
+        {{ 'privacy-policy.hearings-recorded.list.2-1' | translate
+        }}<a href="https://www.gov.uk/find-court-tribunal">{{ 'privacy-policy.hearings-recorded.list.2-link' | translate }}</a>
+        {{ 'privacy-policy.hearings-recorded.list.2-2' | translate }}
       </li>
-      <li>{{'privacy-policy.hearings-recorded.list.3' | translate}}</li>
+      <li>{{ 'privacy-policy.hearings-recorded.list.3' | translate }}</li>
     </ul>
     <p class="govuk-body">
-      {{'privacy-policy.hearings-recorded.paragraph2-1' | translate}}<a href="https://www.gov.uk/apply-transcript-court-tribunal-hearing">{{'privacy-policy.hearings-recorded.paragraph2-link' | translate}}</a>
+      {{ 'privacy-policy.hearings-recorded.paragraph2-1' | translate
+      }}<a href="https://www.gov.uk/apply-transcript-court-tribunal-hearing">{{
+        'privacy-policy.hearings-recorded.paragraph2-link' | translate
+      }}</a>
     </p>
-    <p class="govuk-body">{{'privacy-policy.hearings-recorded.paragraph3' | translate}}</p>
+    <p class="govuk-body">{{ 'privacy-policy.hearings-recorded.paragraph3' | translate }}</p>
   </div>
 </div>
diff --git a/VideoWeb/VideoWeb/ClientApp/src/app/vh-officer/admin-im-list/admin-im-list.component.html b/VideoWeb/VideoWeb/ClientApp/src/app/vh-officer/admin-im-list/admin-im-list.component.html
@@ -1,6 +1,7 @@
 <div id="list-pat">
   <div
     *ngFor="let participant of participants"
+    (keydown)="selectParticipant(participant)"
     (click)="selectParticipant(participant)"
     class="im-list"
     [ngClass]="{