From 3f4222e5e42abf20d58844d4f089cb13846d8c56 Mon Sep 17 00:00:00 2001
From: Conor Wright <Conor.Wright@blackbaud.com>
Date: Wed, 7 Mar 2018 17:17:05 -0500
Subject: [PATCH 1/5] Resolving Card action bar still visable after hiding with
 *ngIf #1421

---
 src/modules/card/card-actions.component.scss | 7 +++++++
 src/modules/card/card-actions.component.ts   | 1 +
 src/modules/card/card.component.scss         | 2 --
 3 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 src/modules/card/card-actions.component.scss

diff --git a/src/modules/card/card-actions.component.scss b/src/modules/card/card-actions.component.scss
new file mode 100644
index 000000000..3027c1729
--- /dev/null
+++ b/src/modules/card/card-actions.component.scss
@@ -0,0 +1,7 @@
+@import "../../scss/mixins";
+
+:host {
+    display: block;
+    @include sky-border(light, top);
+    padding: $sky-padding-3_4 0;
+}
\ No newline at end of file
diff --git a/src/modules/card/card-actions.component.ts b/src/modules/card/card-actions.component.ts
index aa955f173..7b6db7f03 100644
--- a/src/modules/card/card-actions.component.ts
+++ b/src/modules/card/card-actions.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'sky-card-actions',
+  styleUrls: ['./card-actions.component.scss'],
   templateUrl: '../shared/simple-content.html'
 })
 export class SkyCardActionsComponent { }
diff --git a/src/modules/card/card.component.scss b/src/modules/card/card.component.scss
index 21a48c63e..5d6759ed6 100644
--- a/src/modules/card/card.component.scss
+++ b/src/modules/card/card.component.scss
@@ -88,10 +88,8 @@
 }
 
 .sky-card-actions {
-    @include sky-border(light, top);
     bottom: 0;
     flex-shrink: 0;
-    padding: $sky-padding-3_4 0;
     text-align: center;
 
     .sky-context-menu-btn {

From a450054956bfa0efa21c71481ea49e9f82c22f08 Mon Sep 17 00:00:00 2001
From: Conor Wright <Conor.Wright@blackbaud.com>
Date: Thu, 8 Mar 2018 10:46:26 -0500
Subject: [PATCH 2/5] Addressed PR style comments

---
 src/modules/card/card-actions.component.scss | 8 ++++----
 src/modules/card/card-actions.component.ts   | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/modules/card/card-actions.component.scss b/src/modules/card/card-actions.component.scss
index 3027c1729..402369a03 100644
--- a/src/modules/card/card-actions.component.scss
+++ b/src/modules/card/card-actions.component.scss
@@ -1,7 +1,7 @@
 @import "../../scss/mixins";
 
 :host {
-    display: block;
-    @include sky-border(light, top);
-    padding: $sky-padding-3_4 0;
-}
\ No newline at end of file
+  display: block;
+  @include sky-border(light, top);
+  padding: $sky-padding-3_4 0;
+}
diff --git a/src/modules/card/card-actions.component.ts b/src/modules/card/card-actions.component.ts
index 7b6db7f03..e23730367 100644
--- a/src/modules/card/card-actions.component.ts
+++ b/src/modules/card/card-actions.component.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'sky-card-actions',
-  styleUrls: ['./card-actions.component.scss'],
-  templateUrl: '../shared/simple-content.html'
+  templateUrl: '../shared/simple-content.html',
+  styleUrls: ['./card-actions.component.scss']
 })
 export class SkyCardActionsComponent { }

From 11e43d54a77d23b0f9d96c3f7e1b4e91a77767dd Mon Sep 17 00:00:00 2001
From: Conor Wright <Conor.Wright@blackbaud.com>
Date: Fri, 22 Jun 2018 08:43:06 -0400
Subject: [PATCH 3/5] added aria label to input directive

---
 src/modules/datepicker/datepicker-input.directive.ts | 8 +++++++-
 src/modules/datepicker/datepicker.component.html     | 3 ++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/modules/datepicker/datepicker-input.directive.ts b/src/modules/datepicker/datepicker-input.directive.ts
index 2cace17c0..aa95761f7 100644
--- a/src/modules/datepicker/datepicker-input.directive.ts
+++ b/src/modules/datepicker/datepicker-input.directive.ts
@@ -8,7 +8,8 @@ import {
   Renderer,
   ElementRef,
   SimpleChanges,
-  OnChanges
+  OnChanges,
+  HostBinding
 } from '@angular/core';
 
 import {
@@ -61,6 +62,10 @@ export class SkyDatepickerInputDirective implements
 
   public pickerChangedSubscription: Subscription;
 
+  @HostBinding('attr.aria-label')
+  @Input()
+  public ariaLabel: string;
+
   @Input()
   public skyDatepickerInput: SkyDatepickerComponent;
 
@@ -98,6 +103,7 @@ export class SkyDatepickerInputDirective implements
         this.writeValue(newDate);
         this._onChange(newDate);
       });
+    this.ariaLabel = this.ariaLabel || 'Date input field. Uses format: ' + this.dateFormat;
   }
 
   public ngOnDestroy() {
diff --git a/src/modules/datepicker/datepicker.component.html b/src/modules/datepicker/datepicker.component.html
index 6f2192d10..e9648416b 100644
--- a/src/modules/datepicker/datepicker.component.html
+++ b/src/modules/datepicker/datepicker.component.html
@@ -4,8 +4,9 @@
 
     <div class="sky-input-group-btn sky-input-group-datepicker-btn">
       <sky-dropdown
-        buttonType="calendar"
         alignment="right"
+        aria-hidden="true"
+        buttonType="calendar"
         [messageStream]="dropdownController">
         <sky-dropdown-menu>
           <sky-datepicker-calendar

From d17948cf834d323c981fbbde3125d3b0926168ef Mon Sep 17 00:00:00 2001
From: Conor Wright <Conor.Wright@blackbaud.com>
Date: Fri, 22 Jun 2018 15:36:57 -0400
Subject: [PATCH 4/5] set aria label on datepicker input

---
 .../datepicker/datepicker-demo.component.html |  1 +
 src/locales/resources_en_US.json              |  4 ++++
 .../datepicker/datepicker-input.directive.ts  | 21 +++++++++++--------
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/demos/datepicker/datepicker-demo.component.html b/src/demos/datepicker/datepicker-demo.component.html
index dd828e38f..824cb65fd 100644
--- a/src/demos/datepicker/datepicker-demo.component.html
+++ b/src/demos/datepicker/datepicker-demo.component.html
@@ -1,6 +1,7 @@
 <div style="max-width: 50%">
   <sky-datepicker #picker>
     <input
+      aria-label="This is a date field."
       [(ngModel)]="selectedDate"
       [skyDatepickerInput]="picker"
       [minDate]="minDate"
diff --git a/src/locales/resources_en_US.json b/src/locales/resources_en_US.json
index 4c04aa136..ef635b023 100644
--- a/src/locales/resources_en_US.json
+++ b/src/locales/resources_en_US.json
@@ -127,6 +127,10 @@
     "_description": "error message shown when an invalid date is entered.",
     "message": "Please enter a valid date"
   },
+  "date_field_default_label": {
+    "_description": "The label for the datepicker component's input field for screen readers when the consumer has not specified a label.",
+    "message": "Date input field."
+  },
   "date_range_picker_at_any_time": {
     "_description": "text for date range picker",
     "message": "At any time"
diff --git a/src/modules/datepicker/datepicker-input.directive.ts b/src/modules/datepicker/datepicker-input.directive.ts
index aa95761f7..d71a28d92 100644
--- a/src/modules/datepicker/datepicker-input.directive.ts
+++ b/src/modules/datepicker/datepicker-input.directive.ts
@@ -8,8 +8,7 @@ import {
   Renderer,
   ElementRef,
   SimpleChanges,
-  OnChanges,
-  HostBinding
+  OnChanges
 } from '@angular/core';
 
 import {
@@ -35,6 +34,9 @@ import {
 import {
   SkyDatepickerConfigService
 } from './datepicker-config.service';
+import {
+  SkyResourcesService
+} from '../resources';
 
 // tslint:disable:no-forward-ref no-use-before-declare
 const SKY_DATEPICKER_VALUE_ACCESSOR = {
@@ -62,10 +64,6 @@ export class SkyDatepickerInputDirective implements
 
   public pickerChangedSubscription: Subscription;
 
-  @HostBinding('attr.aria-label')
-  @Input()
-  public ariaLabel: string;
-
   @Input()
   public skyDatepickerInput: SkyDatepickerComponent;
 
@@ -82,13 +80,13 @@ export class SkyDatepickerInputDirective implements
   public maxDate: Date;
 
   private dateFormatter = new SkyDateFormatter();
-
   private modelValue: Date;
 
   public constructor(
     private renderer: Renderer,
     private elRef: ElementRef,
-    private config: SkyDatepickerConfigService) {
+    private config: SkyDatepickerConfigService,
+    private skyResourceSvc: SkyResourcesService) {
     this.configureOptions();
   }
 
@@ -103,7 +101,12 @@ export class SkyDatepickerInputDirective implements
         this.writeValue(newDate);
         this._onChange(newDate);
       });
-    this.ariaLabel = this.ariaLabel || 'Date input field. Uses format: ' + this.dateFormat;
+    if (!this.elRef.nativeElement.getAttribute('aria-label')) {
+      this.renderer.setElementAttribute(
+        this.elRef.nativeElement,
+        'aria-label',
+        this.skyResourceSvc.getString('date_field_default_label'));
+    }
   }
 
   public ngOnDestroy() {

From 697d78574b438212ff6d21b7200edf43fc08b1c8 Mon Sep 17 00:00:00 2001
From: Conor Wright <Conor.Wright@blackbaud.com>
Date: Fri, 22 Jun 2018 15:49:51 -0400
Subject: [PATCH 5/5] added testing for new datepicker labels

---
 src/demos/datepicker/datepicker-demo.component.html |  1 -
 src/modules/datepicker/datepicker.component.spec.ts | 11 +++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/demos/datepicker/datepicker-demo.component.html b/src/demos/datepicker/datepicker-demo.component.html
index 824cb65fd..dd828e38f 100644
--- a/src/demos/datepicker/datepicker-demo.component.html
+++ b/src/demos/datepicker/datepicker-demo.component.html
@@ -1,7 +1,6 @@
 <div style="max-width: 50%">
   <sky-datepicker #picker>
     <input
-      aria-label="This is a date field."
       [(ngModel)]="selectedDate"
       [skyDatepickerInput]="picker"
       [minDate]="minDate"
diff --git a/src/modules/datepicker/datepicker.component.spec.ts b/src/modules/datepicker/datepicker.component.spec.ts
index ccc356934..08618bc81 100644
--- a/src/modules/datepicker/datepicker.component.spec.ts
+++ b/src/modules/datepicker/datepicker.component.spec.ts
@@ -169,6 +169,17 @@ describe('datepicker', () => {
         .not.toBeNull();
     });
 
+    it('should apply aria-label to the datepicker input when none is provided', () => {
+      fixture.detectChanges();
+      expect(nativeElement.querySelector('input').getAttribute('aria-label')).toBe('Date input field.');
+    });
+
+    it('should not overwrite aria-label on the datepicker input when one is provided', () => {
+      nativeElement.querySelector('input').setAttribute('aria-label', 'This is a date field.');
+      fixture.detectChanges();
+      expect(nativeElement.querySelector('input').getAttribute('aria-label')).toBe('This is a date field.');
+    });
+
     it('should keep the calendar open on mode change', fakeAsync(() => {
       fixture.detectChanges();
       openDatepicker(nativeElement, fixture);