From f6024a23efb2a37cedb797f7a093afd2c3d5bfca Mon Sep 17 00:00:00 2001
From: Dominic R <dominic@goauthentik.io>
Date: Tue, 5 May 2026 20:31:17 -0400
Subject: [PATCH] web: fix identification stage OUIA attributes (#22049)

* web: fix identification stage OUIA attributes

* tests/e2e: update OUIA selectors for identification stage

Match the rename of ouiaId to data-ouia-component-id in
IdentificationStage.ts so the enroll and recovery flow tests can
locate the links again.
---
 tests/e2e/test_flows_enroll.py                         |  8 ++++++--
 tests/e2e/test_flows_recovery.py                       | 10 ++++++++--
 .../flow/stages/identification/IdentificationStage.ts  |  6 +++---
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/tests/e2e/test_flows_enroll.py b/tests/e2e/test_flows_enroll.py
index 5d016db45e..6a63179fb7 100644
--- a/tests/e2e/test_flows_enroll.py
+++ b/tests/e2e/test_flows_enroll.py
@@ -111,8 +111,12 @@ class TestFlowsEnroll(SeleniumTestCase):
         identification_stage = self.get_shadow_root("ak-stage-identification", flow_executor)
         wait = WebDriverWait(identification_stage, self.wait_timeout)
 
-        wait.until(ec.presence_of_element_located((By.CSS_SELECTOR, "a[ouiaId='enroll']")))
-        identification_stage.find_element(By.CSS_SELECTOR, "a[ouiaId='enroll']").click()
+        wait.until(
+            ec.presence_of_element_located((By.CSS_SELECTOR, "a[data-ouia-component-id='enroll']"))
+        )
+        identification_stage.find_element(
+            By.CSS_SELECTOR, "a[data-ouia-component-id='enroll']"
+        ).click()
 
         # First prompt stage
         flow_executor = self.get_shadow_root("ak-flow-executor")
diff --git a/tests/e2e/test_flows_recovery.py b/tests/e2e/test_flows_recovery.py
index 5334eeaaa6..5f7cc43585 100644
--- a/tests/e2e/test_flows_recovery.py
+++ b/tests/e2e/test_flows_recovery.py
@@ -27,8 +27,14 @@ class TestFlowsRecovery(SeleniumTestCase):
         identification_stage = self.get_shadow_root("ak-stage-identification", flow_executor)
         wait = WebDriverWait(identification_stage, self.wait_timeout)
 
-        wait.until(ec.presence_of_element_located((By.CSS_SELECTOR, "a[ouiaId='recovery']")))
-        identification_stage.find_element(By.CSS_SELECTOR, "a[ouiaId='recovery']").click()
+        wait.until(
+            ec.presence_of_element_located(
+                (By.CSS_SELECTOR, "a[data-ouia-component-id='recovery']")
+            )
+        )
+        identification_stage.find_element(
+            By.CSS_SELECTOR, "a[data-ouia-component-id='recovery']"
+        ).click()
 
         # First prompt stage
         flow_executor = self.get_shadow_root("ak-flow-executor")
diff --git a/web/src/flow/stages/identification/IdentificationStage.ts b/web/src/flow/stages/identification/IdentificationStage.ts
index 46c6af2752..0f08465093 100644
--- a/web/src/flow/stages/identification/IdentificationStage.ts
+++ b/web/src/flow/stages/identification/IdentificationStage.ts
@@ -386,7 +386,7 @@ export class IdentificationStage extends BaseStage<
         return html`<a
             href=${url}
             class="pf-c-button pf-m-secondary pf-m-block"
-            ouiaId="passwordless"
+            data-ouia-component-id="passwordless"
         >
             ${msg("Use a security key")}
         </a> `;
@@ -475,12 +475,12 @@ export class IdentificationStage extends BaseStage<
             ${enrollUrl
                 ? html`<div class="pf-c-login__main-footer-band-item">
                       ${msg("Need an account?")}
-                      <a href="${enrollUrl}" ouiaId="enroll">${msg("Sign up.")}</a>
+                      <a href="${enrollUrl}" data-ouia-component-id="enroll">${msg("Sign up.")}</a>
                   </div>`
                 : nothing}
             ${recoveryUrl
                 ? html`<div class="pf-c-login__main-footer-band-item">
-                      <a href="${recoveryUrl}" ouiaId="recovery"
+                      <a href="${recoveryUrl}" data-ouia-component-id="recovery"
                           >${msg("Forgot username or password?")}</a
                       >
                   </div>`