PM-9417 - PasswordStrengthComp - A11y improvement - add screen reader announcement for all usages of password strength. (#13515)

apps/browser/src/_locales/en/messages.json

@@ -80,6 +80,15 @@
   "masterPassHint": {
     "message": "Master password hint (optional)"
   },
+  "passwordStrengthScore": {
+    "message": "Password strength score $SCORE$",
+    "placeholders": {
+      "score": {
+        "content": "$1",
+        "example": "4"
+      }
+    }
+  },
   "joinOrganization": {
     "message": "Join organization"
   },

apps/desktop/src/locales/en/messages.json

@@ -704,6 +704,15 @@
   "masterPassHintLabel": {
     "message": "Master password hint"
   },
+  "passwordStrengthScore": {
+    "message": "Password strength score $SCORE$",
+    "placeholders": {
+      "score": {
+        "content": "$1",
+        "example": "4"
+      }
+    }
+  },
   "joinOrganization": {
     "message": "Join organization"
   },

apps/web/src/locales/en/messages.json

@@ -4779,6 +4779,15 @@
   "masterPassPolicyDesc": {
     "message": "Set requirements for master password strength."
   },
+  "passwordStrengthScore": {
+    "message": "Password strength score $SCORE$",
+    "placeholders": {
+      "score": {
+        "content": "$1",
+        "example": "4"
+      }
+    }
+  },
   "twoStepLoginPolicyTitle": {
     "message": "Require two-step login"
   },

libs/angular/src/tools/password-strength/password-strength-v2.component.html

@@ -5,3 +5,7 @@
   [showText]="showText"
   [barWidth]="scoreWidth"
 ></bit-progress>
+
+<div aria-live="polite" class="tw-sr-only">
+  {{ "passwordStrengthScore" | i18n: text }}
+</div>