From f27b94017a5d59024bcea9f47ce83cba7fa6726c Mon Sep 17 00:00:00 2001
From: Chris Rodriguez <chris.rodriguez@deque.com>
Date: Sat, 25 Jan 2020 09:04:24 -0500
Subject: [PATCH] [ACA-2474] adding instructions to the calendar for use
 (#5387)

* chore: adding instructions to the calendar for use

* chore: updating lockfile

* chore: fixing package

* chore: updated html for test

* chore: adding instructions to the calendar for use

* chore: updating lockfile

* chore: fixing package

* Wchore: updated html for test

* chore: removed unnused random string gen

* chore: synced lockfile; removed unnused prop
---
 .../card-view-dateitem.component.html                  |  4 +++-
 .../card-view-dateitem.component.scss                  | 10 ++++++++++
 lib/core/i18n/en.json                                  |  3 +++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.html b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.html
index e96fe2d4cd..db7cf5b4df 100644
--- a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.html
+++ b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.html
@@ -1,3 +1,4 @@
+<div class="adf-sr-only" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">{{'CORE.METADATA.ACCESSIBILITY.DATEPICKER' | translate}}</div>
 <div [attr.data-automation-id]="'card-dateitem-label-' + property.key" class="adf-property-label" *ngIf="showProperty() || isEditable()">{{ property.label | translate }}</div>
 <div class="adf-property-value">
     <span *ngIf="!isEditable()" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
@@ -32,7 +33,8 @@
         <input class="adf-invisible-date-input"
             [matDatetimepicker]="datetimePicker"
             [value]="valueDate"
-            (dateChange)="onDateChanged($event)">
+            (dateChange)="onDateChanged($event)"
+            [attr.aria-describedby]="'card-' + property.type + '-value-' + property.key">
 
         <mat-datetimepicker #datetimePicker
             [type]="property.type"
diff --git a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
index fc05c11e5d..1ff56ceb36 100644
--- a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
+++ b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
@@ -56,4 +56,14 @@
             }
         }
     }
+
+    .adf-sr-only {
+        display: block;
+        height: 1px;
+        width: 1px;
+        clip: rect(1 1 1 1);
+        clip: rect(1px 1px 1px 1px);
+        overflow: hidden;
+    }
+
 }
diff --git a/lib/core/i18n/en.json b/lib/core/i18n/en.json
index 66ad5159fd..a47d679aed 100644
--- a/lib/core/i18n/en.json
+++ b/lib/core/i18n/en.json
@@ -199,6 +199,9 @@
         "CANCEL": "Cancel",
         "CLEAR": "Clear",
         "TOGGLE": "Toggle value"
+      },
+      "ACCESSIBILITY": {
+        "DATEPICKER": "Use the arrow keys to navigate between dates. Up and down moves to the same day of the week in the previous or next week respectively. Left and right move to the previous and next day respectively. Press Enter or Return to select a date."
       }
     },
     "SEARCH": {