Files
dspace-angular/src/app/health-page/health-page.component.html
Alexandre Vryghem 3628c84844 Fix Health Panel usability issues
- Fixed aria-controls on HealthComponentComponent, HealthInfoComponent, HealthInfoComponentComponent, HealthPanelComponent pointing to non-existing id
- Fixed the tabs not having the role tab on its tabs
- Fixed aria-expanded being set to true when collapsed and backwards for HealthPanelComponent & HealthInfoComponent
- Fixed role="tablist" not having direct role="tab" by adding role="presentation" on the li elements
- Fixed minor alignment issues
2023-12-03 15:57:48 +01:00

28 lines
1.2 KiB
HTML

<div class="container" *ngIf="(healthResponseInitialised | async) && (healthInfoResponseInitialised | async)">
<h2>{{'health-page.heading' | translate}}</h2>
<div *ngIf="(healthResponse | async) && (healthInfoResponse | async)">
<ul ngbNav #nav="ngbNav" [activeId]="'status'" class="nav-tabs">
<li [ngbNavItem]="'status'" role="presentation">
<a ngbNavLink>{{'health-page.status-tab' | translate}}</a>
<ng-template ngbNavContent>
<div id="status">
<ds-health-panel [healthResponse]="(healthResponse | async)"></ds-health-panel>
</div>
</ng-template>
</li>
<li [ngbNavItem]="'info'" role="presentation">
<a ngbNavLink>{{'health-page.info-tab' | translate}}</a>
<ng-template ngbNavContent>
<div id="info">
<ds-health-info [healthInfoResponse]="(healthInfoResponse | async)"></ds-health-info>
</div>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav" class="mt-2"></div>
</div>
<ds-alert *ngIf="!(healthResponse | async) || !(healthInfoResponse | async)" [type]="AlertType.Error" [content]="'health-page.error.msg'"></ds-alert>
</div>