From e63518d2efcf4831b4d9748c1dd8448a47a62eac Mon Sep 17 00:00:00 2001
From: bmbitwarden <bmcferren@bitwarden.com>
Date: Fri, 19 Dec 2025 13:26:40 -0500
Subject: [PATCH] PM-24189 improved screen reader parsing for special character
 checkbox (#17361)

* PM-24189 improved screen reader parsing for special character checkbox

* PM-24189 resolved voiceOver issue

* PM-24189 resolved voiceOver issue

* PM-27628 resolved pr comment re id and aria labels and comments

* PM-24189 resolved pr comment
---
 .../src/password-settings.component.html        | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/libs/tools/generator/components/src/password-settings.component.html b/libs/tools/generator/components/src/password-settings.component.html
index b435a13fe4c..33958f0c169 100644
--- a/libs/tools/generator/components/src/password-settings.component.html
+++ b/libs/tools/generator/components/src/password-settings.component.html
@@ -52,11 +52,7 @@
             <input bitCheckbox type="checkbox" formControlName="number" (change)="save('number')" />
             <bit-label>{{ "numbersLabel" | i18n }}</bit-label>
           </bit-form-control>
-          <bit-form-control
-            class="!tw-mb-0"
-            attr.aria-description="{{ 'specialCharactersDescription' | i18n }}"
-            title="{{ 'specialCharactersDescription' | i18n }}"
-          >
+          <bit-form-control class="!tw-mb-0" title="{{ 'specialCharactersDescription' | i18n }}">
             <input
               bitCheckbox
               type="checkbox"
@@ -64,10 +60,15 @@
               (change)="save('special')"
             />
             <!-- hard-coded the special characters string because `$` indicates an i18n interpolation,
-            and is handled inconsistently across browsers. Angular template syntax is used to
-            ensure special characters are entity-encoded.
+              and is handled inconsistently across browsers. Angular template syntax is used to
+              ensure special characters are entity-encoded.
             -->
-            <bit-label>{{ "!@#$%^&*" }}</bit-label>
+            <bit-label>
+              <span aria-hidden="true">{{ "!@#$%^&*" }}</span>
+              <span class="tw-sr-only">
+                {{ "specialCharactersDescription" | i18n }}
+              </span>
+            </bit-label>
           </bit-form-control>
         </div>
         <div class="tw-flex">