Skip to content

Commit d226b5c

Browse files
committed
Fixes AB#537: server error button ARIA expanded
Also adds localization.
1 parent cef8010 commit d226b5c

File tree

5 files changed

+20
-7
lines changed

5 files changed

+20
-7
lines changed

src/@batch-flask/ui/form/simple-form/simple-form.component.spec.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from "@angular/core/testing";
33
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";
44
import { By } from "@angular/platform-browser";
55
import { MaterialModule } from "@batch-flask/core";
6+
import { I18nTestingModule } from "@batch-flask/core/testing";
67
import { ButtonComponent } from "@batch-flask/ui/buttons";
78
import { SimpleFormComponent } from "@batch-flask/ui/form/simple-form";
89
import { ServerErrorComponent } from "@batch-flask/ui/server-error";
@@ -50,7 +51,7 @@ describe("SimpleFormComponent", () => {
5051

5152
beforeEach(() => {
5253
TestBed.configureTestingModule({
53-
imports: [ReactiveFormsModule, MaterialModule],
54+
imports: [ReactiveFormsModule, MaterialModule, I18nTestingModule],
5455
declarations: [
5556
ButtonComponent,
5657
FormTestComponent,

src/@batch-flask/ui/server-error/server-error.component.spec.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Component, DebugElement } from "@angular/core";
22
import { ComponentFixture, TestBed } from "@angular/core/testing";
33
import { By } from "@angular/platform-browser";
44
import { MaterialModule, ServerError } from "@batch-flask/core";
5+
import { I18nTestingModule } from "@batch-flask/core/testing";
56
import { ClickableComponent } from "@batch-flask/ui/buttons";
67
import { click } from "test/utils/helpers";
78
import { ServerErrorComponent } from "./server-error.component";
@@ -43,7 +44,7 @@ describe("ServerErrorComponent", () => {
4344

4445
beforeEach(() => {
4546
TestBed.configureTestingModule({
46-
imports: [MaterialModule],
47+
imports: [MaterialModule, I18nTestingModule],
4748
declarations: [
4849
ClickableComponent,
4950
ServerErrorComponent,
@@ -84,12 +85,16 @@ describe("ServerErrorComponent", () => {
8485
});
8586

8687
it("should show the request id and time after clicking on the debug button", () => {
88+
expect(troubleshootBtn.nativeElement.getAttribute("aria-expanded"))
89+
.toBe("false");
8790
click(troubleshootBtn);
8891
fixture.detectChanges();
8992

9093
expect(de.nativeElement.textContent).toContain("abc-def");
9194
expect(de.nativeElement.textContent)
9295
.toContain(date.toString());
96+
expect(troubleshootBtn.nativeElement.getAttribute("aria-expanded"))
97+
.toBe("true");
9398
});
9499
});
95100

src/@batch-flask/ui/server-error/server-error.html

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="error-banner" *ngIf="error" [attr.aria-expanded]="showDebugInformation" role="alert">
1+
<div class="error-banner" *ngIf="error" role="alert">
22
<div class="content">
33
<div class="main-content">
44
<div class="main-info">
@@ -7,8 +7,11 @@ <h4>{{error.code}}</h4>
77
</div>
88
<div class="troubleshoot-btn">
99
<bl-clickable (do)="toggleDebugInformation()"
10-
aria-label="Troubleshoot details"
11-
matTooltip="Troubleshoot details">
10+
[attr.aria-expanded]="showDebugInformation"
11+
aria-controls="troubleshoot-debug-info"
12+
role="button"
13+
title="{{'server-error.debug-button-label' | i18n}}"
14+
>
1215
<i class="fa fa-bug"></i>
1316
</bl-clickable>
1417
</div>
@@ -19,7 +22,8 @@ <h4>{{error.code}}</h4>
1922
</div>
2023
</div>
2124
</div>
22-
<div class="troubleshoot-info" *ngIf="showDebugInformation">
25+
<div class="troubleshoot-info" *ngIf="showDebugInformation"
26+
id="troubleshoot-debug-info">
2327
<table>
2428
<tr *ngIf="error.requestId">
2529
<td><b>Request ID</b></td>
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
server-error:
2+
debug-button-label: Toggle troubleshooting info

src/@batch-flask/ui/server-error/server-error.module.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { CommonModule } from "@angular/common";
22
import { NgModule } from "@angular/core";
33
import { ButtonsModule } from "@batch-flask/ui/buttons";
4+
import { I18nUIModule } from "../i18n";
45
import { ServerErrorComponent } from "./server-error.component";
56

67
const publicComponents = [ServerErrorComponent];
78
const privateComponents = [];
89

910
@NgModule({
10-
imports: [CommonModule, ButtonsModule],
11+
imports: [CommonModule, ButtonsModule, I18nUIModule],
1112
declarations: [...publicComponents, ...privateComponents],
1213
exports: publicComponents,
1314
entryComponents: [],

0 commit comments

Comments
 (0)