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

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">