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

@@ -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")

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")

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>`