fix(a11y): signpost close aria label update and allow user to config …

…aria label (#1624)

## 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?

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

Issue Number: CDE-2461

## What is the new behavior?

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

---------

Co-authored-by: Srinivas Padidapelli <[email protected]>
Co-authored-by: GitHub <[email protected]>
Co-authored-by: Srinivas Padidapelli <[email protected]>

.storybook/stories/signpost/signpost.stories.ts

@@ -44,6 +44,7 @@ export default {
   args: {
     // inputs
     clrPosition: 'right-middle',
+    clrSignpostCloseAriaLabel: 'Info Close',
     // story helpers
     content: 'Hello World!',
   },
@@ -52,7 +53,7 @@ export default {
 const template = `
   <div style="padding: 250px; text-align: center">
     <clr-signpost>
-      <clr-signpost-content [clrPosition]="clrPosition">
+      <clr-signpost-content [clrPosition]="clrPosition" [clrSignpostCloseAriaLabel]="clrSignpostCloseAriaLabel">
         {{ content }}
       </clr-signpost-content>
     </clr-signpost>

projects/angular/clarity.api.md

@@ -3633,9 +3633,11 @@ export class ClrSignpostContent extends AbstractPopover implements OnDestroy {
     get position(): string;
     set position(position: string);
     // (undocumented)
+    signpostCloseAriaLabel: string;
+    // (undocumented)
     signpostContentId: string;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<ClrSignpostContent, "clr-signpost-content", never, { "position": "clrPosition"; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrSignpostContent, "clr-signpost-content", never, { "signpostCloseAriaLabel": "clrSignpostCloseAriaLabel"; "position": "clrPosition"; }, {}, never, ["*"], false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrSignpostContent, [null, { optional: true; }, null, null, null, null, null]>;
 }

projects/angular/src/popover/signpost/signpost-content.ts

@@ -40,7 +40,7 @@ const POSITIONS: string[] = [
       <div class="signpost-content-header">
         <button
           type="button"
-          [attr.aria-label]="commonStrings.keys.signpostClose"
+          [attr.aria-label]="signpostCloseAriaLabel || commonStrings.keys.signpostClose"
           class="signpost-action close"
           (click)="close()"
           [attr.aria-controls]="signpostContentId"
@@ -56,6 +56,8 @@ const POSITIONS: string[] = [
   host: { '[class.signpost-content]': 'true', '[id]': 'signpostContentId' },
 })
 export class ClrSignpostContent extends AbstractPopover implements OnDestroy {
+  @Input('clrSignpostCloseAriaLabel') signpostCloseAriaLabel: string;
+
   signpostContentId = uniqueIdFactory();
 
   private document: Document;

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

@@ -44,7 +44,7 @@ export const commonStringsDefault: ClrCommonStrings = {
   showColumnsMenuDescription: 'Show or hide columns menu',
   allColumnsSelected: 'All columns selected',
   signpostToggle: 'Signpost Toggle',
-  signpostClose: 'Signpost Close',
+  signpostClose: 'Close',
   loading: 'Loading',
   // Datagrid
   detailPaneStart: 'Start of row details',