Fix datepicker no labels

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"

src/modules/datepicker/datepicker-input.directive.ts

@@ -34,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 = {
@@ -80,13 +83,13 @@ export class SkyDatepickerInputDirective implements
   public startingDay: number = 0;
 
   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();
   }
 
@@ -101,6 +104,12 @@ export class SkyDatepickerInputDirective implements
         this.writeValue(newDate);
         this._onChange(newDate);
       });
+    if (!this.elRef.nativeElement.getAttribute('aria-label')) {
+      this.renderer.setElementAttribute(
+        this.elRef.nativeElement,
+        'aria-label',
+        this.skyResourceSvc.getString('date_field_default_label'));
+    }
   }
 
   public ngOnDestroy() {

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

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);