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

… label (backport to next) (#1196)

Backport cabb89d from #1179. <br> ## 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?

&lt;!-- Please check the one that applies to this PR using
&quot;x&quot;. --&gt;

- [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.

&lt;!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. --&gt;

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

&lt;!-- If this PR contains a breaking change, please describe the
impact and migration path for existing applications below. --&gt;

## Other information

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

projects/angular/clarity.api.md

@@ -2919,8 +2919,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 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

@@ -108,8 +108,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.