From 739d3df38e552fe8c55d83a263fcc0a859e59674 Mon Sep 17 00:00:00 2001
From: Srinivas Padidapelli <spadidapelli@gmail.com>
Date: Thu, 5 Dec 2024 20:24:13 +0530
Subject: [PATCH] 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 <padidapellis@padidapell9MD6R.vmware.com>
Co-authored-by: GitHub <noreply@github.com>
Co-authored-by: Srinivas Padidapelli <padidapellis@vmware.com>
---
 .storybook/stories/signpost/signpost.stories.ts           | 3 ++-
 projects/angular/clarity.api.md                           | 4 +++-
 projects/angular/src/popover/signpost/signpost-content.ts | 4 +++-
 projects/angular/src/utils/i18n/common-strings.default.ts | 2 +-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/.storybook/stories/signpost/signpost.stories.ts b/.storybook/stories/signpost/signpost.stories.ts
index e97509541e..39b267c771 100644
--- a/.storybook/stories/signpost/signpost.stories.ts
+++ b/.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>
diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md
index b31353cfa7..4ef3dac9a9 100644
--- a/projects/angular/clarity.api.md
+++ b/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]>;
 }
diff --git a/projects/angular/src/popover/signpost/signpost-content.ts b/projects/angular/src/popover/signpost/signpost-content.ts
index 7ca952bd56..6da43a4323 100644
--- a/projects/angular/src/popover/signpost/signpost-content.ts
+++ b/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;
diff --git a/projects/angular/src/utils/i18n/common-strings.default.ts b/projects/angular/src/utils/i18n/common-strings.default.ts
index 684c6a5539..7e1b2d0cda 100644
--- a/projects/angular/src/utils/i18n/common-strings.default.ts
+++ b/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',