Skip to content

Commit

Permalink
VIH-11149 use the case number instead of case name (not multi-day fri…
Browse files Browse the repository at this point in the history 
…endly) as aria labels for the select hearing button (#2364)
  • Loading branch information
@shaed-parkar
shaed-parkar authored Jan 31, 2025
1 parent 80c1b5b commit 4684a27
Show file tree
Hide file tree
Showing 2 changed files with 152 additions and 129 deletions.
269 changes: 145 additions & 124 deletions ...src/app/on-the-day/host-hearing-list/host-hearing-table/host-hearing-table.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,135 +1,156 @@
<div class="govuk-grid-row">
<div class="govuk-grid-column-full table-container">
<table [attr.aria-label]="'judge-hearing-table.description' | translate" class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="col">{{ 'judge-hearing-table.time' | translate }}</th>
<th class="govuk-table__header" scope="col">{{ 'judge-hearing-table.judge' | translate }}</th>
<th class="govuk-table__header" scope="col">{{ 'judge-hearing-table.hearing' | translate }}</th>
<th class="govuk-table__header" scope="col">{{ 'judge-hearing-table.attendees' | translate }}</th>
<th class="govuk-table__header" scope="col">{{ 'judge-hearing-table.conference-status-heading' | translate }}</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr *ngFor="let hearing of hearings" id="judges-list-{{ hearing.id }}" class="govuk-table__row">
<!-- Time -->
<td class="govuk-table__cell">
<p id="scheduled-datetime-{{ hearing.id }}" class="govuk-!-margin-0 govuk-!-padding-0">
{{ hearing.scheduledStartTime | date: 'HH:mm' }} -
{{ hearing.scheduledEndTime | date: 'HH:mm' }}
</p>
</td>
<div class="govuk-grid-column-full table-container">
<table [attr.aria-label]="'judge-hearing-table.description' | translate" class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th class="govuk-table__header" scope="col">{{ 'judge-hearing-table.time' | translate }}</th>
<th class="govuk-table__header" scope="col">{{ 'judge-hearing-table.judge' | translate }}</th>
<th class="govuk-table__header" scope="col">{{ 'judge-hearing-table.hearing' | translate }}</th>
<th class="govuk-table__header" scope="col">{{ 'judge-hearing-table.attendees' | translate }}</th>
<th class="govuk-table__header" scope="col">{{ 'judge-hearing-table.conference-status-heading' | translate }}</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr *ngFor="let hearing of hearings" id="judges-list-{{ hearing.id }}" class="govuk-table__row">
<!-- Time -->
<td class="govuk-table__cell">
<p id="scheduled-datetime-{{ hearing.id }}" class="govuk-!-margin-0 govuk-!-padding-0">
{{ hearing.scheduledStartTime | date: 'HH:mm' }} -
{{ hearing.scheduledEndTime | date: 'HH:mm' }}
</p>
</td>

<!-- Judge-->
<td class="govuk-table__cell">
<p id="judge-{{ hearing.id }}" class="govuk-!-margin-0 govuk-!-padding-0">{{
hearing.judge?.displayName }}</p>
</td>
<!-- Judge-->
<td class="govuk-table__cell">
<p id="judge-{{ hearing.id }}" class="govuk-!-margin-0 govuk-!-padding-0">{{ hearing.judge?.displayName }}</p>
</td>

<!-- Hearing -->
<td class="govuk-table__cell">
<p id="case-name-{{ hearing.id }}"
class="govuk-!-margin-0 govuk-!-padding-0 govuk-!-font-weight-bold">
<app-truncatable-text [text]="hearing.caseName" [maxLimit]="15" [hideShowMore]="true"></app-truncatable-text>
</p>
<p id="case-type-{{ hearing.id }}" class="govuk-!-margin-0">
{{ 'case-type.' + stringToTranslateId(hearing.caseType) | translate }}
</p>
<p class="govuk-!-margin-0 govuk-!-padding-0">
{{ 'judge-hearing-table.case-number' | translate }}<span id="case-number-{{ hearing.id }}"
class="govuk-!-font-weight-bold"><app-truncatable-text [text]="hearing.caseNumber" [maxLimit]="15" [hideShowMore]="true"></app-truncatable-text></span>
</p>
</td>
<!-- Hearing -->
<td class="govuk-table__cell">
<p id="case-name-{{ hearing.id }}" class="govuk-!-margin-0 govuk-!-padding-0 govuk-!-font-weight-bold">
<app-truncatable-text [text]="hearing.caseName" [maxLimit]="15" [hideShowMore]="true"></app-truncatable-text>
</p>
<p id="case-type-{{ hearing.id }}" class="govuk-!-margin-0">
{{ 'case-type.' + stringToTranslateId(hearing.caseType) | translate }}
</p>
<p class="govuk-!-margin-0 govuk-!-padding-0">
{{ 'judge-hearing-table.case-number' | translate
}}<span id="case-number-{{ hearing.id }}" class="govuk-!-font-weight-bold"
><app-truncatable-text [text]="hearing.caseNumber" [maxLimit]="15" [hideShowMore]="true"></app-truncatable-text
></span>
</p>
</td>

<!-- Participant -->
<td class="govuk-table__cell">
<div *ngIf="!hearing.isClosed()">
<!-- Participant count -->
<span *ngIf="hearing.panelMembers.length > 0">
<p class="govuk-!-margin-0 govuk-!-padding-0">
<span id="panel-member-count-{{ hearing.id }}">
{{ hearing.panelMembers.length }} {{( hearing.panelMembers.length > 1 ?
'judge-hearing-table.panel-members' : 'judge-hearing-table.panel-member') | translate }}
</span>
</p>
</span>
<span *ngIf="hearing.wingers.length > 0">
<p class="govuk-!-margin-0 govuk-!-padding-0">
<span id="winger-count-{{ hearing.id }}">
{{ hearing.wingers.length }} {{( hearing.wingers.length > 1 ?
'judge-hearing-table.wingers' : 'judge-hearing-table.winger') | translate }}
</span>
</p>
</span>
<span *ngIf="hearing.staffMembers.length > 0">
<p class="govuk-!-margin-0 govuk-!-padding-0">
<span id="staff-member-count-{{ hearing.id }}">
{{ hearing.staffMembers.length }} {{( hearing.staffMembers.length > 1 ?
'judge-hearing-table.staff-members' : 'judge-hearing-table.staff-member') | translate }}
</span>
</p>
</span>
<span *ngIf="hearing.nonJudicialParticipantsExcludingObservers.length > 0">
<p class="govuk-!-margin-0 govuk-!-padding-0">
<span id="participant-count-{{ hearing.id }}">
{{ hearing.nonJudicialParticipantsExcludingObservers.length }} {{(
hearing.nonJudicialParticipantsExcludingObservers.length > 1 ?
'judge-hearing-table.participants' : 'judge-hearing-table.participant') | translate }}
</span>
</p>
</span>
<div *ngIf="hearing.numberOfEndpoints > 0">
<span id="endpoints-count-{{ hearing.id }}">
{{ hearing.numberOfEndpoints }} {{( hearing.numberOfEndpoints > 1 ?
'judge-hearing-table.video-access-points' : 'judge-hearing-table.video-access-point') | translate }}
</span>
</div>
<span *ngIf="hearing.observers.length > 0">
<p class="govuk-!-margin-0 govuk-!-padding-0">
<span id="observer-count-{{ hearing.id }}">
{{ hearing.observers.length }} {{( hearing.observers.length > 1 ?
'judge-hearing-table.observers' : 'judge-hearing-table.observer') | translate }}
</span>
</p>
</span>
</div>
<!-- Participant -->
<td class="govuk-table__cell">
<div *ngIf="!hearing.isClosed()">
<!-- Participant count -->
<span *ngIf="hearing.panelMembers.length > 0">
<p class="govuk-!-margin-0 govuk-!-padding-0">
<span id="panel-member-count-{{ hearing.id }}">
{{ hearing.panelMembers.length }}
{{
(hearing.panelMembers.length > 1 ? 'judge-hearing-table.panel-members' : 'judge-hearing-table.panel-member')
| translate
}}
</span>
</p>
</span>
<span *ngIf="hearing.wingers.length > 0">
<p class="govuk-!-margin-0 govuk-!-padding-0">
<span id="winger-count-{{ hearing.id }}">
{{ hearing.wingers.length }}
{{ (hearing.wingers.length > 1 ? 'judge-hearing-table.wingers' : 'judge-hearing-table.winger') | translate }}
</span>
</p>
</span>
<span *ngIf="hearing.staffMembers.length > 0">
<p class="govuk-!-margin-0 govuk-!-padding-0">
<span id="staff-member-count-{{ hearing.id }}">
{{ hearing.staffMembers.length }}
{{
(hearing.staffMembers.length > 1 ? 'judge-hearing-table.staff-members' : 'judge-hearing-table.staff-member')
| translate
}}
</span>
</p>
</span>
<span *ngIf="hearing.nonJudicialParticipantsExcludingObservers.length > 0">
<p class="govuk-!-margin-0 govuk-!-padding-0">
<span id="participant-count-{{ hearing.id }}">
{{ hearing.nonJudicialParticipantsExcludingObservers.length }}
{{
(hearing.nonJudicialParticipantsExcludingObservers.length > 1
? 'judge-hearing-table.participants'
: 'judge-hearing-table.participant'
) | translate
}}
</span>
</p>
</span>
<div *ngIf="hearing.numberOfEndpoints > 0">
<span id="endpoints-count-{{ hearing.id }}">
{{ hearing.numberOfEndpoints }}
{{
(hearing.numberOfEndpoints > 1 ? 'judge-hearing-table.video-access-points' : 'judge-hearing-table.video-access-point')
| translate
}}
</span>
</div>
<span *ngIf="hearing.observers.length > 0">
<p class="govuk-!-margin-0 govuk-!-padding-0">
<span id="observer-count-{{ hearing.id }}">
{{ hearing.observers.length }}
{{ (hearing.observers.length > 1 ? 'judge-hearing-table.observers' : 'judge-hearing-table.observer') | translate }}
</span>
</p>
</span>
</div>

<div *ngIf="hearing.isClosed() && hearing.isExpired()">
<span class="govuk-caption-m">{{
'judge-hearing-table.judicial-consultation-room-is-now-closed' | translate }}</span>
</div>
<div *ngIf="hearing.isClosed() && hearing.isExpired()">
<span class="govuk-caption-m">{{ 'judge-hearing-table.judicial-consultation-room-is-now-closed' | translate }}</span>
</div>

<div *ngIf="hearing.isClosed() && !hearing.isExpired()">
<a class="govuk-link" href="javascript:void(0)" (click)="signIntoConference(hearing)">{{
'judge-hearing-table.judicial-consultation-room-open-until' | translate }}{{
hearing.retrieveExpiryTime() | date: 'HH:mm' }}</a>
</div>
</td>
<div *ngIf="hearing.isClosed() && !hearing.isExpired()">
<a class="govuk-link" href="javascript:void(0)" (click)="signIntoConference(hearing)"
>{{ 'judge-hearing-table.judicial-consultation-room-open-until' | translate
}}{{ hearing.retrieveExpiryTime() | date: 'HH:mm' }}</a
>
</div>
</td>

<!-- Conference Status -->
<td class="govuk-table__cell">
<div *ngIf="!hearing.isClosed() && hearing.isReadyToStart()">
<button id="start-hearing-btn-{{ hearing.id }}"
class="govuk-button govuk-!-margin-top-3 govuk-!-margin-bottom-3"
data-module="govuk-button" type="button" (click)="signIntoConference(hearing)"
[attr.aria-label]="('judge-hearing-table.select' | translate) + ' ' + ('judge-hearing-table.hearing' | translate) + ': ' + hearing.caseName">
{{ 'judge-hearing-table.select' | translate }}
</button>
</div>
<div *ngIf="!hearing.isClosed() && !hearing.isReadyToStart()">{{
'judge-hearing-table.not-ready-to-start' | translate }}</div>
<div *ngIf="showConferenceStatus(hearing)" class="govuk-!-margin-top-3 govuk-!-margin-bottom-3">
<span id="hearing-status-{{ hearing.id }}"
class="govuk-!-padding-top-1 govuk-!-padding-bottom-1 govuk-!-padding-right-2 govuk-!-padding-left-2 govuk-tag"
[ngClass]="{
<!-- Conference Status -->
<td class="govuk-table__cell">
<div *ngIf="!hearing.isClosed() && hearing.isReadyToStart()">
<button
id="start-hearing-btn-{{ hearing.id }}"
class="govuk-button govuk-!-margin-top-3 govuk-!-margin-bottom-3"
data-module="govuk-button"
type="button"
(click)="signIntoConference(hearing)"
[attr.aria-label]="
('judge-hearing-table.select' | translate) + ' ' + ('judge-hearing-table.hearing' | translate) + ': ' + hearing.caseNumber
"
>
{{ 'judge-hearing-table.select' | translate }}
</button>
</div>
<div *ngIf="!hearing.isClosed() && !hearing.isReadyToStart()">{{ 'judge-hearing-table.not-ready-to-start' | translate }}</div>
<div *ngIf="showConferenceStatus(hearing)" class="govuk-!-margin-top-3 govuk-!-margin-bottom-3">
<span
id="hearing-status-{{ hearing.id }}"
class="govuk-!-padding-top-1 govuk-!-padding-bottom-1 govuk-!-padding-right-2 govuk-!-padding-left-2 govuk-tag"
[ngClass]="{
'govuk-tag--grey': hearing.isClosed(),
'govuk-tag': hearing.isPaused() || hearing.isInSession(),
'govuk-tag--red': hearing.isSuspended()
}">{{ 'conference-status.' + stringToTranslateId(hearing.status) | translate }}</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
}"
>{{ 'conference-status.' + stringToTranslateId(hearing.status) | translate }}</span
>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
12 changes: 7 additions & 5 deletions ...eoWeb/ClientApp/src/app/on-the-day/participant-hearings/hearing-list-table.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@
</p>
<p id="participant-case-number-{{ conference.id }}" class="govuk-!-margin-0 govuk-!-padding-0">
{{ 'hearing-list-table.case-number' | translate }}:
<strong><app-truncatable-text [text]="conference.case_number" [maxLimit]="15" [hideShowMore]="true"></app-truncatable-text></strong>
<strong
><app-truncatable-text [text]="conference.case_number" [maxLimit]="15" [hideShowMore]="true"></app-truncatable-text
></strong>
</p>
</td>
<td class="govuk-table__cell">
Expand All @@ -33,16 +35,16 @@
type="button"
*ngIf="canStartHearing(conference)"
(click)="signIntoConference(conference)"
[attr.aria-label]="('hearing-list-table.button.sign-into-hearing' | translate) + ' ' + conference.case_name"
[attr.aria-label]="('hearing-list-table.button.sign-into-hearing' | translate) + ' ' + conference.case_number"
>
{{ 'hearing-list-table.button.sign-into-hearing' | translate }}
{{ 'hearing-list-table.button.sign-into-hearing' | translate }}
</button>
<span *ngIf="!canStartHearing(conference)">
<p id="participant-sign-in-date-{{ conference.id }}" class="govuk-!-margin-0 govuk-!-padding-0">
{{ 'hearing-list-table.sign-in' | translate:{ date: getSignInDate(conference)} }}
{{ 'hearing-list-table.sign-in' | translate: { date: getSignInDate(conference) } }}
</p>
<p id="participant-sign-in-time-{{ conference.id }}" class="govuk-!-margin-0 govuk-!-padding-0">
{{ 'hearing-list-table.from' | translate:{ time: getSignInTime(conference) | date: 'HH:mm' } }}
{{ 'hearing-list-table.from' | translate: { time: getSignInTime(conference) | date: 'HH:mm' } }}
</p>
</span>
</td>
Expand Down

0 comments on commit 4684a27

Please sign in to comment.