feat(datepicker): add aria-labels and titles for navigation select el…

…ements

Closes #2636
Fixes #2543

src/datepicker/datepicker-navigation-select.spec.ts

@@ -101,7 +101,7 @@ describe('ngb-datepicker-navigation-select', () => {
     expect(getYearSelect(fixture.nativeElement).disabled).toBe(true);
   });
 
-  it('should have correct aria attributes on select boxes', () => {
+  it('should have correct aria attributes on select options', () => {
     const fixture =
         createTestComponent(`<ngb-datepicker-navigation-select [date]="date" [months]="[7, 8, 9]" [years]="years">`);
 
@@ -110,6 +110,24 @@ describe('ngb-datepicker-navigation-select', () => {
     });
   });
 
+  it('should have correct aria attributes on select elements', () => {
+    const fixture =
+        createTestComponent(`<ngb-datepicker-navigation-select [date]="date" [months]="[7, 8, 9]" [years]="years">`);
+
+    expect(getMonthSelect(fixture.nativeElement).getAttribute('aria-label')).toBe('Select month');
+    expect(getYearSelect(fixture.nativeElement).getAttribute('aria-label')).toBe('Select year');
+
+  });
+
+  it('should have correct title attributes on select elements', () => {
+    const fixture =
+        createTestComponent(`<ngb-datepicker-navigation-select [date]="date" [months]="[7, 8, 9]" [years]="years">`);
+
+    expect(getMonthSelect(fixture.nativeElement).getAttribute('title')).toBe('Select month');
+    expect(getYearSelect(fixture.nativeElement).getAttribute('title')).toBe('Select year');
+
+  });
+
 });
 
 @Component({selector: 'test-cmp', template: ''})

src/datepicker/datepicker-navigation-select.ts

@@ -22,12 +22,16 @@ import {NgbDatepickerI18n} from './datepicker-i18n';
       [disabled]="disabled"
       class="custom-select"
       [value]="date?.month"
+      i18n-aria-label="@@ngb.datepicker.select-month" aria-label="Select month"
+      i18n-title="@@ngb.datepicker.select-month" title="Select month"
       (change)="changeMonth($event.target.value)">
         <option *ngFor="let m of months" [attr.aria-label]="i18n.getMonthFullName(m)" [value]="m">{{ i18n.getMonthShortName(m) }}</option>
     </select><select
       [disabled]="disabled"
       class="custom-select"
       [value]="date?.year"
+      i18n-aria-label="@@ngb.datepicker.select-year" aria-label="Select year"
+      i18n-title="@@ngb.datepicker.select-year" title="Select year"
       (change)="changeYear($event.target.value)">
         <option *ngFor="let y of years" [value]="y">{{ i18n.getYearNumerals(y) }}</option>
     </select>