VIH-11150 add ids for elem matching (#2340)

hmcts · Dec 13, 2024 · 5936a22 · 5936a22
1 parent 60851a5
commit 5936a22
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 44 deletions.
diff --git a/.../waiting-space/judge-participant-status-list/judge-participant-status-list.component.html b/.../waiting-space/judge-participant-status-list/judge-participant-status-list.component.html
@@ -84,24 +84,20 @@
 </div>
 
 <div class="vh-line govuk-!-margin-bottom-3"></div>
-<div
-  *ngIf="displayParticipantList"
-
-  [attr.aria-label]="'judge-waiting-room.judge-participant-status-list-label' | translate"
->
+<div *ngIf="displayParticipantList" [attr.aria-label]="'judge-waiting-room.judge-participant-status-list-label' | translate">
   <div *ngIf="wingers.length > 0">
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-full">
         <h2 class="govuk-heading-s">{{ 'judge-participant-status-list.wingers' | translate }} ({{ wingers.length }})</h2>
       </div>
     </div>
     <div class="vh-border">
-      <div *ngFor="let participant of wingers; let lastItem = last" class="govuk-grid-row govuk-!-margin-bottom-1">
-        <dl
-          id="p-row-{{ participant.id }}-winger"
-          class="govuk-grid-column-full govuk-!-margin-top-2 participant-details"
-
-        >
+      <div
+        [id]="'wr-participant-status-list-participant' + participant.id + '-' + (1 | random)"
+        *ngFor="let participant of wingers; let lastItem = last"
+        class="govuk-grid-row govuk-!-margin-bottom-1"
+      >
+        <dl id="p-row-{{ participant.id }}-winger" class="govuk-grid-column-full govuk-!-margin-top-2 participant-details">
           <dt id="p-{{ participant.id }}-name-winger" class="govuk-heading-s govuk-!-margin-bottom-3">
             {{ participant.name ?? participant.displayName }}
           </dt>
@@ -128,12 +124,12 @@ <h2 class="govuk-heading-s">{{ 'judge-participant-status-list.panel-members' | t
       </div>
     </div>
     <div class="vh-border">
-      <div *ngFor="let participant of panelMembers; let lastItem = last" class="govuk-grid-row govuk-!-margin-bottom-1">
-        <dl
-          id="p-row-{{ participant.id }}-panel-member"
-          class="govuk-grid-column-full govuk-!-margin-top-2 participant-details"
-
-        >
+      <div
+        [id]="'wr-participant-status-list-participant' + participant.id + '-' + (1 | random)"
+        *ngFor="let participant of panelMembers; let lastItem = last"
+        class="govuk-grid-row govuk-!-margin-bottom-1"
+      >
+        <dl id="p-row-{{ participant.id }}-panel-member" class="govuk-grid-column-full govuk-!-margin-top-2 participant-details">
           <dt id="p-{{ participant.id }}-name-panel-member" class="govuk-heading-s govuk-!-margin-bottom-3">
             {{ participant.name ?? participant.displayName }}
           </dt>
@@ -163,12 +159,12 @@ <h2 class="govuk-heading-s">{{ 'judge-participant-status-list.staff-members' | t
       </div>
     </div>
     <div class="vh-border">
-      <div *ngFor="let participant of staffMembers; let lastItem = last" class="govuk-grid-row govuk-!-margin-bottom-1">
-        <dl
-          id="p-row-{{ participant.id }}-staff-member"
-          class="govuk-grid-column-full govuk-!-margin-top-2 participant-details"
-
-        >
+      <div
+        [id]="'wr-participant-status-list-participant' + participant.id + '-' + (1 | random)"
+        *ngFor="let participant of staffMembers; let lastItem = last"
+        class="govuk-grid-row govuk-!-margin-bottom-1"
+      >
+        <dl id="p-row-{{ participant.id }}-staff-member" class="govuk-grid-column-full govuk-!-margin-top-2 participant-details">
           <dt id="p-{{ participant.id }}-name-staff-member" class="govuk-heading-s govuk-!-margin-bottom-3">
             {{ participant.displayName }}
             <span *ngIf="canChangeStaffMemberName(participant.id)"
@@ -239,12 +235,12 @@ <h2 class="govuk-heading-s">{{ 'judge-participant-status-list.participants' | tr
     </div>
 
     <div class="vh-border">
-      <div *ngFor="let participant of nonJudgeParticipants; let lastItem = last" class="govuk-grid-row govuk-!-margin-bottom-1">
-        <dl
-          id="p-row-{{ participant.id }}-participant"
-          class="govuk-grid-column-full govuk-!-margin-top-2 participant-details"
-
-        >
+      <div
+        [id]="'wr-participant-status-list-participant' + participant.id + '-' + (1 | random)"
+        *ngFor="let participant of nonJudgeParticipants; let lastItem = last"
+        class="govuk-grid-row govuk-!-margin-bottom-1"
+      >
+        <dl id="p-row-{{ participant.id }}-participant" class="govuk-grid-column-full govuk-!-margin-top-2 participant-details">
           <dt id="p-{{ participant.id }}-name-participant" class="govuk-heading-s govuk-!-margin-bottom-3">
             <span *ngIf="hasInterpreterLink(participant)" class="vh-interpreter-icon">
               <fa-icon icon="language" size="2x"></fa-icon>
@@ -284,12 +280,12 @@ <h2 class="govuk-heading-s">{{ 'judge-participant-status-list.video-access-point
       </div>
     </div>
     <div class="vh-border">
-      <div *ngFor="let endpoint of endpoints; let lastItem = last" class="govuk-grid-row govuk-!-margin-bottom-1">
-        <dl
-          id="p-row-{{ endpoint.id }}-endpoints"
-          class="govuk-grid-column-full govuk-!-margin-top-2 participant-details"
-
-        >
+      <div
+        [id]="'wr-participant-status-list-participant' + endpoint.id + '-' + (1 | random)"
+        *ngFor="let endpoint of endpoints; let lastItem = last"
+        class="govuk-grid-row govuk-!-margin-bottom-1"
+      >
+        <dl id="p-row-{{ endpoint.id }}-endpoints" class="govuk-grid-column-full govuk-!-margin-top-2 participant-details">
           <dt id="p-{{ endpoint.id }}-name-endpoint" class="govuk-heading-s govuk-!-margin-bottom-3">
             {{ endpoint.displayName }}
           </dt>
@@ -321,12 +317,12 @@ <h2 class="govuk-heading-s">{{ 'judge-participant-status-list.observers' | trans
     </div>
 
     <div class="vh-border">
-      <div *ngFor="let participant of observers; let lastItem = last" class="govuk-grid-row govuk-!-margin-bottom-1">
-        <dl
-          id="p-row-{{ participant.id }}-observer"
-          class="govuk-grid-column-full govuk-!-margin-top-2 participant-details"
-
-        >
+      <div
+        [id]="'wr-participant-status-list-participant' + participant.id + '-' + (1 | random)"
+        *ngFor="let participant of observers; let lastItem = last"
+        class="govuk-grid-row govuk-!-margin-bottom-1"
+      >
+        <dl id="p-row-{{ participant.id }}-observer" class="govuk-grid-column-full govuk-!-margin-top-2 participant-details">
           <dt id="p-{{ participant.id }}-name-observer" class="govuk-heading-s govuk-!-margin-bottom-3">
             {{ participant.name ?? participant.displayName }}
           </dt>

diff --git a/...g-space/participants-panel/participants-panel-item/participants-panel-item.component.html b/...g-space/participants-panel/participants-panel-item/participants-panel-item.component.html
@@ -55,6 +55,7 @@
       <div *ngIf="participant.isInHearing()">
         <ng-container *ngIf="!isHost">
           <img
+            [id]="idPrefix + '-' + participant.id + '-icon-micRemoteMuted'"
             *ngIf="participant.isMicRemoteMuted()"
             appTooltip
             [text]="
@@ -66,16 +67,16 @@
             [src]="participant.isMicRemoteMuted() ? '/assets/images/mic_remote_mute.png' : '/assets/images/mic.png'"
             class="panel-icon"
             [attr.alt]="
-              (participant.isMicRemoteMuted()
+              participant.isMicRemoteMuted()
                 ? ('participants-panel.microphone-muted-icon' | translate)
-                : 'participants-panel.microphone-on-icon'
-              ) | translate
+                : ('participants-panel.microphone-on-icon' | translate)
             "
             (click)="toggleParticipantMute(); $event.stopPropagation()"
             tabindex="0"
             (keydown.enter)="toggleParticipantMute(); $event.stopPropagation()"
           />
           <fa-icon
+            [id]="idPrefix + '-' + participant.id + '-icon-micLocal'"
             *ngIf="!participant.isMicRemoteMuted()"
             appTooltip
             [text]="