From 8dead9baf6f82c279394bf479d8599d652e299c4 Mon Sep 17 00:00:00 2001
From: Shane Melton <smelton@bitwarden.com>
Date: Thu, 27 Mar 2025 17:01:58 -0700
Subject: [PATCH] [PM-14426] At-risk password carousel fixes (#13936)

* [PM-19004] Add period to image alt text

* [PM-19298] Add data-testid for carousel confirmation button
---
 apps/browser/src/_locales/en/messages.json           | 12 ++++++------
 .../at-risk-carousel-dialog.component.html           |  7 ++++---
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
index 995b90ec661..2c940ccdf5a 100644
--- a/apps/browser/src/_locales/en/messages.json
+++ b/apps/browser/src/_locales/en/messages.json
@@ -2534,15 +2534,15 @@
     "message": "Your organization passwords are at-risk because they are weak, reused, and/or exposed.",
     "description": "Description of the review at-risk login slide on the at-risk password page carousel"
   },
-  "reviewAtRiskLoginSlideImgAlt": {
-    "message": "Illustration of a list of logins that are at-risk"
+  "reviewAtRiskLoginSlideImgAltPeriod": {
+    "message": "Illustration of a list of logins that are at-risk."
   },
   "generatePasswordSlideDesc": {
     "message": "Quickly generate a strong, unique password with the Bitwarden autofill menu on the at-risk site.",
     "description": "Description of the generate password slide on the at-risk password page carousel"
   },
-  "generatePasswordSlideImgAlt": {
-    "message": "Illustration of the Bitwarden autofill menu displaying a generated password"
+  "generatePasswordSlideImgAltPeriod": {
+    "message": "Illustration of the Bitwarden autofill menu displaying a generated password."
   },
   "updateInBitwarden": {
     "message": "Update in Bitwarden"
@@ -2551,8 +2551,8 @@
     "message": "Bitwarden will then prompt you to update the password in the password manager.",
     "description": "Description of the update in Bitwarden slide on the at-risk password page carousel"
   },
-  "updateInBitwardenSlideImgAlt": {
-    "message": "Illustration of a Bitwarden’s notification prompting the user to update the login"
+  "updateInBitwardenSlideImgAltPeriod": {
+    "message": "Illustration of a Bitwarden’s notification prompting the user to update the login."
   },
   "turnOnAutofill": {
     "message": "Turn on autofill"
diff --git a/apps/browser/src/vault/popup/components/at-risk-carousel-dialog/at-risk-carousel-dialog.component.html b/apps/browser/src/vault/popup/components/at-risk-carousel-dialog/at-risk-carousel-dialog.component.html
index c5e3ea8fb0d..e63b06750c8 100644
--- a/apps/browser/src/vault/popup/components/at-risk-carousel-dialog/at-risk-carousel-dialog.component.html
+++ b/apps/browser/src/vault/popup/components/at-risk-carousel-dialog/at-risk-carousel-dialog.component.html
@@ -6,7 +6,7 @@
           class="tw-max-w-full tw-max-h-40"
           src="../../../../images/at-risk-password-carousel/review_at-risk_logins.light.png"
           appDarkImgSrc="../../../../images/at-risk-password-carousel/review_at-risk_logins.dark.png"
-          [alt]="'reviewAtRiskLoginSlideImgAlt' | i18n"
+          [alt]="'reviewAtRiskLoginSlideImgAltPeriod' | i18n"
         />
         <h2 bitTypography="h2" class="tw-mt-8">{{ "reviewAtRiskLogins" | i18n }}</h2>
         <p bitTypography="body1">
@@ -18,7 +18,7 @@
           class="tw-max-w-full tw-max-h-40"
           src="../../../../images/at-risk-password-carousel/generate_password.light.png"
           appDarkImgSrc="../../../../images/at-risk-password-carousel/generate_password.dark.png"
-          [alt]="'generatePasswordSlideImgAlt' | i18n"
+          [alt]="'generatePasswordSlideImgAltPeriod' | i18n"
         />
         <h2 bitTypography="h2" class="tw-mt-8">{{ "generatePassword" | i18n }}</h2>
         <p bitTypography="body1">
@@ -30,7 +30,7 @@
           class="tw-max-w-full tw-max-h-40"
           src="../../../../images/at-risk-password-carousel/update_login.light.png"
           appDarkImgSrc="../../../../images/at-risk-password-carousel/update_login.dark.png"
-          [alt]="'updateInBitwardenSlideImgAlt' | i18n"
+          [alt]="'updateInBitwardenSlideImgAltPeriod' | i18n"
         />
         <h2 bitTypography="h2" class="tw-mt-8">{{ "updateInBitwarden" | i18n }}</h2>
         <p bitTypography="body1">
@@ -47,6 +47,7 @@
       block
       [disabled]="!dismissBtnEnabled()"
       (click)="dismiss()"
+      data-testid="confirm-carousel-button"
     >
       {{ "reviewAtRiskPasswords" | i18n }}
     </button>