fix(a11y): clr-password-container show/hide Icon does not have unique…

… label (#1179)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
Clarity uses constants/static text to label the show/ hide icon
corresponding to the password input field, this is not unique for each
clr-password-container input. It currently only ever reads as Show
password / Hide password when using a screen reader.

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: CDE-1179

## What is the new behavior?
Each individual show/hide icon button corresponding to a password field
will now announce the unique label name (associated to that field) in
addition to Show password / Hide password when using a screen reader.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Signed-off-by: Andrea Fernandes <[email protected]>
Co-authored-by: Andrea Fernandes <[email protected]>

projects/angular/clarity.api.md

@@ -2923,8 +2923,12 @@ export class ClrPasswordContainer extends ClrAbstractContainer {
     // (undocumented)
     focusService: FocusService_2;
     // (undocumented)
+    hidePasswordText(label: string): string;
+    // (undocumented)
     show: boolean;
     // (undocumented)
+    showPasswordText(label: string): string;
+    // (undocumented)
     toggle(): void;
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<ClrPasswordContainer, "clr-password-container", never, { "clrToggle": "clrToggle"; }, {}, never, ["label", "[clrPassword]", "clr-control-helper", "clr-control-error", "clr-control-success"], false, never>;

projects/angular/src/forms/password/password-container.spec.ts

@@ -104,10 +104,10 @@ export default function (): void {
 
       it('should provide screen-reader only text for toggle button', () => {
         const button: HTMLButtonElement = containerEl.querySelector('button');
-        expect(button.textContent.trim()).toEqual('Show password');
+        expect(button.textContent.trim()).toEqual('Show password for Hello World');
         button.click();
         fixture.detectChanges();
-        expect(button.textContent.trim()).toEqual('Hide password');
+        expect(button.textContent.trim()).toEqual('Hide password for Hello World');
       });
     });
   });

projects/angular/src/forms/password/password-container.ts

@@ -40,7 +40,7 @@ export const TOGGLE_SERVICE_PROVIDER = { provide: TOGGLE_SERVICE, useFactory: To
           >
             <cds-icon status="info" class="clr-password-eye-icon" [attr.shape]="show ? 'eye-hide' : 'eye'"></cds-icon>
             <span class="clr-sr-only">
-              {{ show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow }}
+              {{ show ? hidePasswordText(label?.labelText) : showPasswordText(label?.labelText) }}
             </span>
           </button>
         </div>
@@ -118,4 +118,12 @@ export class ClrPasswordContainer extends ClrAbstractContainer {
     this.show = !this.show;
     this.toggleService.next(this.show);
   }
+
+  showPasswordText(label: string) {
+    return this.commonStrings.parse(this.commonStrings.keys.passwordShow, { LABEL: label });
+  }
+
+  hidePasswordText(label: string) {
+    return this.commonStrings.parse(this.commonStrings.keys.passwordHide, { LABEL: label });
+  }
 }

projects/angular/src/utils/i18n/common-strings.default.ts

@@ -106,8 +106,8 @@ export const commonStringsDefault: ClrCommonStrings = {
    * Password Input
    * Screen-reader text for the hide/show password field button
    */
-  passwordHide: 'Hide password',
-  passwordShow: 'Show password',
+  passwordHide: 'Hide password for {LABEL}',
+  passwordShow: 'Show password for {LABEL}',
 
   /**
    * Datagrid footer; sr-only text after the number of selected rows.