diff --git a/src/locales/resources_en_US.json b/src/locales/resources_en_US.json index 6940c7438..affb8ee33 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 540def210..6ed7b11ff 100644 --- a/src/modules/datepicker/datepicker-input.directive.ts +++ b/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() { diff --git a/src/modules/datepicker/datepicker.component.html b/src/modules/datepicker/datepicker.component.html index b72883e53..47517366d 100644 --- a/src/modules/datepicker/datepicker.component.html +++ b/src/modules/datepicker/datepicker.component.html @@ -4,8 +4,9 @@