Merge branch 'main' into aromanovv/PD-5548-add-2fa-creation-dates

Author: aromanovv

CHANGELOG.md

@@ -1,3 +1,21 @@
+## v2.134.0 - 2026-05-15
+
+[Full Changelog](https://github.com/ORCID/orcid-angular/compare/v2.133.14...v2.134.0)
+
+## v2.133.14 - 2026-05-14
+
+[Full Changelog](https://github.com/ORCID/orcid-angular/compare/v2.133.13...v2.133.14)
+
+- [#2837](https://github.com/ORCID/orcid-angular/pull/2837): Transifex: update translations
+
+## v2.133.13 - 2026-05-08
+
+[Full Changelog](https://github.com/ORCID/orcid-angular/compare/v2.133.12...v2.133.13)
+
+## v2.133.12 - 2026-05-08
+
+[Full Changelog](https://github.com/ORCID/orcid-angular/compare/v2.133.11...v2.133.12)
+
 ## v2.133.11 - 2026-05-08
 
 [Full Changelog](https://github.com/ORCID/orcid-angular/compare/v2.133.10...v2.133.11)

src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.html

@@ -13,15 +13,12 @@
   </app-alert-message>
   } @if (!twoFactorInfo?.enabled) {
   <div class="two-factor-panel">
-    <p
-      class="two-factor-panel__copy two-factor-panel__copy--intro"
-      i18n="@@account.addExtraSecurity"
-    >
+    <p class="two-factor-panel__copy" i18n="@@account.addExtraSecurity">
       Add extra security to your ORCID account by enabling two-factor
       authentication (2FA).
     </p>
     <a
-      class="two-factor-panel__link"
+      class="two-factor-panel__link mb-6"
       href="https://support.orcid.org/hc/en-us/articles/360006971673"
       rel="noopener noreferrer"
       target="_blank"

src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.scss

@@ -6,7 +6,7 @@
 .two-factor-panel {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 8px;
 }
 
 .two-factor-panel--enabled {
@@ -35,10 +35,6 @@
   margin: 0;
 }
 
-.two-factor-panel__copy--intro {
-  margin-top: var(--orcid-space-l, 32px);
-}
-
 .two-factor-panel__link {
   display: inline-flex;
   align-items: center;

src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.scss-theme.scss

@@ -19,6 +19,16 @@
   small {
     color: mat.m2-get-contrast-color-from-palette($primary, 200);
   }
+  
+  .two-factor-panel__enable-button {
+    color: $orcid-light-primary-text !important;
+    background: $brand-secondary-dark !important;
+  }
+
+  .two-factor-panel__disable-button {
+    background-color: $state-warning-darkest !important;
+    color: white !important;
+  }
 }
 
 @include settings-security-two-factor-auth-theme($orcid-app-theme);

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

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);
 }
 

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>