From f9911ff00afca55e82f8b542189928950a454046 Mon Sep 17 00:00:00 2001
From: andrej romanov <50377758+auumgn@users.noreply.github.com>
Date: Fri, 8 May 2026 14:11:14 +0300
Subject: [PATCH] PD-5552 a11y fixes

---
 .../two-factor-enable/two-factor-enable.component.html    | 8 ++++++--
 .../two-factor-enable/two-factor-enable.component.scss    | 1 +
 .../two-factor-recovery-codes.component.html              | 5 ++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/app/two-factor-setup/components/two-factor-enable/two-factor-enable.component.html b/src/app/two-factor-setup/components/two-factor-enable/two-factor-enable.component.html
index 96de929fe..a38292e63 100644
--- a/src/app/two-factor-setup/components/two-factor-enable/two-factor-enable.component.html
+++ b/src/app/two-factor-setup/components/two-factor-enable/two-factor-enable.component.html
@@ -57,9 +57,13 @@
     </div>
 
     <div class="verification-section">
-      <p class="step-copy" i18n="@@account.enterVerificationCodeFromAuthApp">
+      <label
+        class="step-copy"
+        for="totp"
+        i18n="@@account.enterVerificationCodeFromAuthApp"
+      >
         Enter the 6-digit verification code from your authentication app
-      </p>
+      </label>
 
       <mat-form-field appearance="outline" class="mat-form-field-min">
         <input
diff --git a/src/app/two-factor-setup/components/two-factor-enable/two-factor-enable.component.scss b/src/app/two-factor-setup/components/two-factor-enable/two-factor-enable.component.scss
index e96a09660..fcfda46df 100644
--- a/src/app/two-factor-setup/components/two-factor-enable/two-factor-enable.component.scss
+++ b/src/app/two-factor-setup/components/two-factor-enable/two-factor-enable.component.scss
@@ -101,6 +101,7 @@ mat-error {
 }
 
 .verification-section .step-copy {
+  display: block;
   margin-bottom: var(--orcid-space-base, 16px);
 }
 
diff --git a/src/app/two-factor-setup/components/two-factor-recovery-codes/two-factor-recovery-codes.component.html b/src/app/two-factor-setup/components/two-factor-recovery-codes/two-factor-recovery-codes.component.html
index deda5abf9..3f2e7fb1c 100644
--- a/src/app/two-factor-setup/components/two-factor-recovery-codes/two-factor-recovery-codes.component.html
+++ b/src/app/two-factor-setup/components/two-factor-recovery-codes/two-factor-recovery-codes.component.html
@@ -11,7 +11,9 @@
   >
     <div class="copy-block">
       <div class="copy-block__intro">
-        <h4 i18n="@@account.yourRecoveryCodesTitle">Your 2FA recovery codes</h4>
+        <h4 id="backup-codes-label" i18n="@@account.yourRecoveryCodesTitle">
+          Your 2FA recovery codes
+        </h4>
         <p i18n="@@account.recoveryCodes">
           Recovery codes can be used to access your ORCID account when you
           aren’t able to use your authentication app. Each recovery code can
@@ -36,6 +38,7 @@ <h4 i18n="@@account.yourRecoveryCodesTitle">Your 2FA recovery codes</h4>
         formControlName="backupCodes"
         rows="10"
         readonly
+        aria-labelledby="backup-codes-label"
       >
       </textarea>
     </div>