From 001869641dc2b4323a5d6052f71994d1adfaaf4d Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Fri, 6 Jan 2023 12:44:51 +0100
Subject: [PATCH] web: ensure img tags have alt attributes

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 authentik/api/templates/api/browser.html                       | 2 +-
 authentik/core/templates/login/base_full.html                  | 2 +-
 internal/outpost/proxyv2/templates/error.html                  | 2 +-
 web/src/elements/PageHeader.ts                                 | 2 +-
 web/src/elements/sidebar/SidebarBrand.ts                       | 2 +-
 web/src/flow/FlowExecutor.ts                                   | 1 +
 web/src/flow/stages/authenticator_duo/AuthenticatorDuoStage.ts | 2 +-
 web/src/user/user-settings/sources/SourceSettings.ts           | 2 +-
 8 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/authentik/api/templates/api/browser.html b/authentik/api/templates/api/browser.html
index 2c2d500a2..0e7a3d3cd 100644
--- a/authentik/api/templates/api/browser.html
+++ b/authentik/api/templates/api/browser.html
@@ -62,7 +62,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
     allow-spec-url-load="false"
     allow-spec-file-load="false">
     <div slot="nav-logo">
-        <img class="logo" src="{% static 'dist/assets/icons/icon_left_brand.png' %}" />
+        <img  alt="authentik Logo" class="logo" src="{% static 'dist/assets/icons/icon_left_brand.png' %}" />
     </div>
 </rapi-doc>
 <script>
diff --git a/authentik/core/templates/login/base_full.html b/authentik/core/templates/login/base_full.html
index a1c58e7dd..a12de821c 100644
--- a/authentik/core/templates/login/base_full.html
+++ b/authentik/core/templates/login/base_full.html
@@ -60,7 +60,7 @@
     <div class="ak-login-container">
         <header class="pf-c-login__header">
             <div class="pf-c-brand ak-brand">
-                <img src="{{ tenant.branding_logo }}" alt="authentik icon" />
+                <img src="{{ tenant.branding_logo }}" alt="authentik Logo" />
             </div>
         </header>
         {% block main_container %}
diff --git a/internal/outpost/proxyv2/templates/error.html b/internal/outpost/proxyv2/templates/error.html
index 8d89609d5..9a94f6d43 100644
--- a/internal/outpost/proxyv2/templates/error.html
+++ b/internal/outpost/proxyv2/templates/error.html
@@ -42,7 +42,7 @@
             <div class="ak-login-container">
                 <header class="pf-c-login__header">
                     <div class="pf-c-brand ak-brand">
-                        <img src="/outpost.goauthentik.io/static/dist/assets/icons/icon_left_brand.svg" alt="authentik icon" />
+                        <img src="/outpost.goauthentik.io/static/dist/assets/icons/icon_left_brand.svg" alt="authentik Logo" />
                     </div>
                 </header>
                 <main class="pf-c-login__main">
diff --git a/web/src/elements/PageHeader.ts b/web/src/elements/PageHeader.ts
index b7760dc4d..79f6fe418 100644
--- a/web/src/elements/PageHeader.ts
+++ b/web/src/elements/PageHeader.ts
@@ -121,7 +121,7 @@ export class PageHeader extends AKElement {
     renderIcon(): TemplateResult {
         if (this.icon) {
             if (this.iconImage && !this.icon.startsWith("fa://")) {
-                return html`<img class="pf-icon" src="${this.icon}" />&nbsp;`;
+                return html`<img class="pf-icon" src="${this.icon}" alt="page icon" />&nbsp;`;
             }
             const icon = this.icon.replaceAll("fa://", "fa ");
             return html`<i class=${icon}></i>&nbsp;`;
diff --git a/web/src/elements/sidebar/SidebarBrand.ts b/web/src/elements/sidebar/SidebarBrand.ts
index c67112fc4..91fc6dff7 100644
--- a/web/src/elements/sidebar/SidebarBrand.ts
+++ b/web/src/elements/sidebar/SidebarBrand.ts
@@ -97,7 +97,7 @@ export class SidebarBrand extends AKElement {
                 <div class="pf-c-brand ak-brand">
                     <img
                         src="${first(this.tenant.brandingLogo, DefaultTenant.brandingLogo)}"
-                        alt="authentik icon"
+                        alt="authentik Logo"
                         loading="lazy"
                     />
                 </div>
diff --git a/web/src/flow/FlowExecutor.ts b/web/src/flow/FlowExecutor.ts
index 7e8f3dd8a..c5865dda8 100644
--- a/web/src/flow/FlowExecutor.ts
+++ b/web/src/flow/FlowExecutor.ts
@@ -501,6 +501,7 @@ export class FlowExecutor extends AKElement implements StageHost {
                                             <div class="pf-c-brand ak-brand">
                                                 <img
                                                     src="${first(this.tenant?.brandingLogo, "")}"
+                                                    alt="authentik Logo"
                                                 />
                                             </div>
                                         </header>
diff --git a/web/src/flow/stages/authenticator_duo/AuthenticatorDuoStage.ts b/web/src/flow/stages/authenticator_duo/AuthenticatorDuoStage.ts
index 7ecbcb06e..b07b010f7 100644
--- a/web/src/flow/stages/authenticator_duo/AuthenticatorDuoStage.ts
+++ b/web/src/flow/stages/authenticator_duo/AuthenticatorDuoStage.ts
@@ -86,7 +86,7 @@ export class AuthenticatorDuoStage extends BaseStage<
                             >
                         </div>
                     </ak-form-static>
-                    <img src=${this.challenge.activationBarcode} />
+                    <img src=${this.challenge.activationBarcode} alt=${t`Duo activation QR code`} />
                     <p>
                         ${t`Alternatively, if your current device has Duo installed, click on this link:`}
                     </p>
diff --git a/web/src/user/user-settings/sources/SourceSettings.ts b/web/src/user/user-settings/sources/SourceSettings.ts
index fada32011..221055c60 100644
--- a/web/src/user/user-settings/sources/SourceSettings.ts
+++ b/web/src/user/user-settings/sources/SourceSettings.ts
@@ -128,7 +128,7 @@ export class UserSourceSettingsPage extends AKElement {
                             return html`<li class="pf-c-data-list__item">
                                 <div class="pf-c-data-list__item-content">
                                     <div class="pf-c-data-list__cell">
-                                        <img src="${ifDefined(stage.iconUrl)}" />
+                                        <img src="${ifDefined(stage.iconUrl)}" alt=${stage.title} />
                                         ${stage.title}
                                     </div>
                                     <div class="pf-c-data-list__cell">