Skip to content

Commit 60dd288

Browse files
GirlBossRushGirlBossRush
authored
web/a11y: Admin overview regions. (#17170)
* web/a11y: Admin overview regions. * web: Fix status overflow on smaller viewports. * web: Use present check over defined.
1 parent 986f082 commit 60dd288

18 files changed

+155
-141
lines changed

‎web/src/admin/admin-overview/AdminOverviewPage.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export class AdminOverviewPage extends AdminOverviewBase {
7979
}
8080

8181
render(): TemplateResult {
82-
return html` <section class="pf-c-page__main-section">
82+
return html` <main class="pf-c-page__main-section" aria-label=${msg("Overview")}>
8383
<div class="pf-l-grid pf-m-gutter">
8484
<!-- row 1 -->
8585
<div
@@ -92,14 +92,14 @@ export class AdminOverviewPage extends AdminOverviewBase {
9292
<div class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-4-col-on-2xl">
9393
<ak-aggregate-card
9494
icon="pf-icon pf-icon-zone"
95-
header=${msg("Outpost status")}
95+
label=${msg("Outpost status")}
9696
headerLink="#/outpost/outposts"
9797
>
9898
<ak-admin-status-chart-outpost></ak-admin-status-chart-outpost>
9999
</ak-aggregate-card>
100100
</div>
101101
<div class="pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-4-col-on-2xl">
102-
<ak-aggregate-card icon="fa fa-sync-alt" header=${msg("Sync status")}>
102+
<ak-aggregate-card icon="fa fa-sync-alt" label=${msg("Sync status")}>
103103
<ak-admin-status-chart-sync></ak-admin-status-chart-sync>
104104
</ak-aggregate-card>
105105
</div>
@@ -120,7 +120,7 @@ export class AdminOverviewPage extends AdminOverviewBase {
120120
>
121121
<ak-aggregate-card
122122
icon="pf-icon pf-icon-server"
123-
header=${msg("Logins and authorizations over the last week (per 8 hours)")}
123+
label=${msg("Logins and authorizations over the last week (per 8 hours)")}
124124
>
125125
<ak-charts-admin-login-authorization></ak-charts-admin-login-authorization>
126126
</ak-aggregate-card>
@@ -130,13 +130,13 @@ export class AdminOverviewPage extends AdminOverviewBase {
130130
>
131131
<ak-aggregate-card
132132
icon="pf-icon pf-icon-server"
133-
header=${msg("Apps with most usage")}
133+
label=${msg("Apps with most usage")}
134134
>
135135
<ak-top-applications-table></ak-top-applications-table>
136136
</ak-aggregate-card>
137137
</div>
138138
</div>
139-
</section>`;
139+
</main>`;
140140
}
141141

142142
renderCards() {

‎web/src/admin/admin-overview/DashboardUserPage.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export class DashboardUserPage extends AKElement {
4242
<div
4343
class="pf-l-grid__item pf-m-12-col pf-m-12-col-on-xl pf-m-12-col-on-2xl big-graph-container"
4444
>
45-
<ak-aggregate-card header=${msg("Users created per day in the last month")}>
45+
<ak-aggregate-card label=${msg("Users created per day in the last month")}>
4646
<ak-charts-admin-model-per-day
4747
.query=${{
4848
contextModelApp: "authentik_core",
@@ -60,7 +60,7 @@ export class DashboardUserPage extends AKElement {
6060
<div
6161
class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-6-col-on-2xl big-graph-container"
6262
>
63-
<ak-aggregate-card header=${msg("Logins per day in the last month")}>
63+
<ak-aggregate-card label=${msg("Logins per day in the last month")}>
6464
<ak-charts-admin-model-per-day
6565
action=${EventActions.Login}
6666
label=${msg("Logins")}
@@ -71,7 +71,7 @@ export class DashboardUserPage extends AKElement {
7171
<div
7272
class="pf-l-grid__item pf-m-12-col pf-m-6-col-on-xl pf-m-6-col-on-2xl big-graph-container"
7373
>
74-
<ak-aggregate-card header=${msg("Failed Logins per day in the last month")}>
74+
<ak-aggregate-card label=${msg("Failed Logins per day in the last month")}>
7575
<ak-charts-admin-model-per-day
7676
action=${EventActions.LoginFailed}
7777
label=${msg("Failed logins")}

‎web/src/admin/admin-overview/cards/AdminStatusCard.ts‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -107,10 +107,12 @@ export abstract class AdminStatusCard<T> extends AggregateCard {
107107
* @returns TemplateResult for status display
108108
*/
109109
private renderStatus(status: AdminStatus): SlottedTemplateResult {
110-
return html`
111-
<p><i class="${status.icon}" aria-hidden="true"></i>&nbsp;${this.renderValue()}</p>
110+
return html` <div class="status-container">
111+
<h2 class="status-heading">
112+
<i class="${status.icon}" aria-hidden="true"></i>${this.renderValue()}
113+
</h2>
112114
${status.message ? html`<p class="subtext">${status.message}</p>` : nothing}
113-
`;
115+
</div>`;
114116
}
115117

116118
/**
@@ -121,7 +123,9 @@ export abstract class AdminStatusCard<T> extends AggregateCard {
121123
*/
122124
private renderError(error: string): SlottedTemplateResult {
123125
return html`
124-
<p><i aria-hidden="true" class="fa fa-times"></i>&nbsp;${msg("Failed to fetch")}</p>
126+
<h2 role="alert" aria-live="assertive">
127+
<i aria-hidden="true" class="fa fa-times"></i>${msg("Failed to fetch")}
128+
</h2>
125129
<p class="subtext">${error}</p>
126130
`;
127131
}
@@ -141,16 +145,10 @@ export abstract class AdminStatusCard<T> extends AggregateCard {
141145
* @returns TemplateResult for current component state
142146
*/
143147
renderInner(): SlottedTemplateResult {
144-
return html`
145-
<p class="center-value">
146-
${
147-
this.status
148-
? this.renderStatus(this.status) // Status available
149-
: this.error
150-
? this.renderError(pluckErrorDetail(this.error)) // Error state
151-
: this.renderLoading() // Loading state
152-
}
153-
</p>
154-
`;
148+
return this.status
149+
? this.renderStatus(this.status) // Status available
150+
: this.error
151+
? this.renderError(pluckErrorDetail(this.error)) // Error state
152+
: this.renderLoading(); // Loading state
155153
}
156154
}

‎web/src/admin/admin-overview/cards/FipsStatusCard.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,11 @@ type StatusContent = { icon: string; message: TemplateResult };
1212

1313
@customElement("ak-admin-fips-status-system")
1414
export class FipsStatusCard extends AdminStatusCard<SystemInfo> {
15-
icon = "pf-icon pf-icon-server";
15+
public override icon = "pf-icon pf-icon-server";
16+
public override label = msg("FIPS Status");
1617

1718
@state()
18-
statusSummary?: string;
19+
protected statusSummary?: string;
1920

2021
async getPrimaryValue(): Promise<SystemInfo> {
2122
return await new AdminApi(DEFAULT_CONFIG).adminSystemRetrieve();
@@ -38,10 +39,6 @@ export class FipsStatusCard extends AdminStatusCard<SystemInfo> {
3839
});
3940
}
4041

41-
renderHeader(): TemplateResult {
42-
return html`${msg("FIPS Status")}`;
43-
}
44-
4542
renderValue(): TemplateResult {
4643
return html`${this.statusSummary}`;
4744
}

‎web/src/admin/admin-overview/cards/RecentEventsCard.ts‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import "#components/ak-event-info";
22
import "#elements/Tabs";
3+
import "#elements/timestamp/ak-timestamp";
34
import "#elements/buttons/Dropdown";
45
import "#elements/buttons/ModalButton";
56
import "#elements/buttons/SpinnerButton/index";
@@ -8,7 +9,7 @@ import { DEFAULT_CONFIG } from "#common/api/config";
89
import { EventWithContext } from "#common/events";
910
import { actionToLabel } from "#common/labels";
1011

11-
import { PaginatedResponse, Table, TableColumn, Timestamp } from "#elements/table/Table";
12+
import { PaginatedResponse, Table, TableColumn } from "#elements/table/Table";
1213
import { SlottedTemplateResult } from "#elements/types";
1314

1415
import { EventGeo, renderEventUser } from "#admin/events/utils";
@@ -23,6 +24,10 @@ import PFCard from "@patternfly/patternfly/components/Card/card.css";
2324

2425
@customElement("ak-recent-events")
2526
export class RecentEventsCard extends Table<Event> {
27+
public override role = "region";
28+
public override ariaLabel = msg("Recent events");
29+
public override label = msg("Events");
30+
2631
@property()
2732
order = "-created";
2833

@@ -45,9 +50,6 @@ export class RecentEventsCard extends Table<Event> {
4550
--pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
4651
--pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
4752
}
48-
* {
49-
word-break: break-all;
50-
}
5153
`,
5254
];
5355

@@ -63,17 +65,18 @@ export class RecentEventsCard extends Table<Event> {
6365
];
6466

6567
renderToolbar(): TemplateResult {
66-
return html`<div class="pf-c-card__title">
67-
<i class="pf-icon pf-icon-catalog" aria-hidden="true"></i>&nbsp;${msg("Recent events")}
68-
</div>`;
68+
return html`<h1 class="pf-c-card__title">
69+
<i class="pf-icon pf-icon-catalog" aria-hidden="true"></i>
70+
${msg("Recent events")}
71+
</h1>`;
6972
}
7073

7174
row(item: EventWithContext): SlottedTemplateResult[] {
7275
return [
7376
html`<div><a href="${`#/events/log/${item.pk}`}">${actionToLabel(item.action)}</a></div>
7477
<small>${item.app}</small>`,
7578
renderEventUser(item),
76-
Timestamp(item.created),
79+
html`<ak-timestamp .timestamp=${item.created}></ak-timestamp>`,
7780
html` <div>${item.clientIp || msg("-")}</div>
7881
<small>${EventGeo(item)}</small>`,
7982
];

‎web/src/admin/admin-overview/cards/SystemStatusCard.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ import { customElement, state } from "lit/decorators.js";
1414
export class SystemStatusCard extends AdminStatusCard<SystemInfo> {
1515
now?: Date;
1616

17-
icon = "pf-icon pf-icon-server";
17+
public override icon = "pf-icon pf-icon-server";
18+
public override label = msg("System Status");
1819

1920
@state()
2021
statusSummary?: string;
@@ -84,10 +85,6 @@ export class SystemStatusCard extends AdminStatusCard<SystemInfo> {
8485
});
8586
}
8687

87-
renderHeader(): SlottedTemplateResult {
88-
return msg("System status");
89-
}
90-
9188
renderValue(): SlottedTemplateResult {
9289
return this.statusSummary ? html`${this.statusSummary}` : nothing;
9390
}

‎web/src/admin/admin-overview/cards/VersionStatusCard.ts‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ import { customElement } from "lit/decorators.js";
1010

1111
@customElement("ak-admin-status-version")
1212
export class VersionStatusCard extends AdminStatusCard<Version> {
13-
icon = "pf-icon pf-icon-bundle";
13+
public override icon = "pf-icon pf-icon-bundle";
14+
public override label = msg("Version");
1415

1516
getPrimaryValue(): Promise<Version> {
1617
return new AdminApi(DEFAULT_CONFIG).adminVersionRetrieve();
@@ -48,10 +49,6 @@ export class VersionStatusCard extends AdminStatusCard<Version> {
4849
});
4950
}
5051

51-
renderHeader(): TemplateResult {
52-
return html`${msg("Version")}`;
53-
}
54-
5552
renderValue(): TemplateResult {
5653
let text = this.value?.versionCurrent;
5754
const versionFamily = this.value?.versionCurrent.split(".");

‎web/src/admin/admin-overview/cards/WorkerStatusCard.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,18 @@ import { AdminStatus, AdminStatusCard } from "#admin/admin-overview/cards/AdminS
55
import { TasksApi, Worker } from "@goauthentik/api";
66

77
import { msg } from "@lit/localize";
8-
import { html, TemplateResult } from "lit";
8+
import { html } from "lit";
99
import { customElement } from "lit/decorators.js";
1010

1111
@customElement("ak-admin-status-card-workers")
1212
export class WorkersStatusCard extends AdminStatusCard<Worker[]> {
13-
icon = "pf-icon pf-icon-server";
13+
public override icon = "pf-icon pf-icon-server";
14+
public override label = msg("Workers");
1415

1516
getPrimaryValue(): Promise<Worker[]> {
1617
return new TasksApi(DEFAULT_CONFIG).tasksWorkersList();
1718
}
1819

19-
renderHeader(): TemplateResult {
20-
return html`${msg("Workers")}`;
21-
}
22-
2320
getStatus(value: Worker[]): Promise<AdminStatus> {
2421
if (value.length < 1) {
2522
return Promise.resolve<AdminStatus>({

‎web/src/admin/admin-overview/charts/OutpostStatusChart.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ import { customElement } from "lit/decorators.js";
1616

1717
@customElement("ak-admin-status-chart-outpost")
1818
export class OutpostStatusChart extends AKChart<SummarizedSyncStatus[]> {
19+
public override ariaLabel = msg("Outpost status chart");
20+
1921
getChartType(): string {
2022
return "doughnut";
2123
}

‎web/src/admin/admin-overview/charts/SyncStatusChart.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ export interface SummarizedSyncStatus {
2929

3030
@customElement("ak-admin-status-chart-sync")
3131
export class SyncStatusChart extends AKChart<SummarizedSyncStatus[]> {
32+
public override ariaLabel = msg("Synchronization status chart");
33+
3234
getChartType(): string {
3335
return "doughnut";
3436
}

0 commit comments

Comments
 (0)