feat(datepicker): add aria attributes for navigation

Closes #2345
ng-bootstrap · Jun 1, 2018 · cd01d32 · cd01d32
1 parent f266b7f
commit cd01d32
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 8 deletions.
diff --git a/src/datepicker/datepicker-navigation-select.spec.ts b/src/datepicker/datepicker-navigation-select.spec.ts
@@ -11,9 +11,8 @@ import {NgbDate} from './ngb-date';
 const createTestComponent = (html: string) =>
     createGenericTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
 
-function getOptionValues(element: HTMLSelectElement): string[] {
-  return Array.from(element.options).map(x => (x as HTMLOptionElement).value);
-}
+const getOptions = (element: HTMLSelectElement): HTMLOptionElement[] => Array.from(element.options);
+const getOptionValues = (element: HTMLSelectElement): string[] => getOptions(element).map(x => x.value);
 
 function changeSelect(element: HTMLSelectElement, value: string) {
   element.value = value;
@@ -102,12 +101,22 @@ describe('ngb-datepicker-navigation-select', () => {
     expect(getYearSelect(fixture.nativeElement).disabled).toBe(true);
   });
 
+  it('should have correct aria attributes on select boxes', () => {
+    const fixture =
+        createTestComponent(`<ngb-datepicker-navigation-select [date]="date" [months]="[7, 8, 9]" [years]="years">`);
+
+    getOptions(getMonthSelect(fixture.nativeElement)).forEach((option, index) => {
+      expect(option.getAttribute('aria-label')).toBe(fixture.componentInstance.ariaMonths[index]);
+    });
+  });
+
 });
 
 @Component({selector: 'test-cmp', template: ''})
 class TestComponent {
   date = new NgbDate(2016, 8, 22);
   months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+  ariaMonths = ['July', 'August', 'September'];
   years = [2015, 2016, 2017];
 
   onSelect = () => {};

diff --git a/src/datepicker/datepicker-navigation-select.ts b/src/datepicker/datepicker-navigation-select.ts
@@ -22,7 +22,7 @@ import {NgbDatepickerI18n} from './datepicker-i18n';
       class="custom-select"
       [value]="date?.month"
       (change)="changeMonth($event.target.value)">
-        <option *ngFor="let m of months" [value]="m">{{ i18n.getMonthShortName(m) }}</option>
+        <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"

diff --git a/src/datepicker/datepicker-navigation.spec.ts b/src/datepicker/datepicker-navigation.spec.ts
@@ -112,6 +112,16 @@ describe('ngb-datepicker-navigation', () => {
     links.forEach((link) => { expect(link.getAttribute('type')).toBe('button'); });
   });
 
+  it('should have correct titles and aria attributes on buttons', () => {
+    const fixture = createTestComponent(`<ngb-datepicker-navigation></ngb-datepicker-navigation>`);
+
+    const links = getNavigationLinks(fixture.nativeElement);
+    expect(links[0].getAttribute('aria-label')).toBe('Previous month');
+    expect(links[1].getAttribute('aria-label')).toBe('Next month');
+    expect(links[0].getAttribute('title')).toBe('Previous month');
+    expect(links[1].getAttribute('title')).toBe('Next month');
+  });
+
 });
 
 @Component({selector: 'test-cmp', template: ''})

diff --git a/src/datepicker/datepicker-navigation.ts b/src/datepicker/datepicker-navigation.ts
@@ -71,8 +71,9 @@ import {NgbDatepickerI18n} from './datepicker-i18n';
   `],
   template: `
     <div class="ngb-dp-arrow">
-      <button type="button" class="btn btn-link ngb-dp-arrow-btn"
-              (click)="!!navigate.emit(navigation.PREV)" [disabled]="prevDisabled">
+      <button type="button" class="btn btn-link ngb-dp-arrow-btn" (click)="!!navigate.emit(navigation.PREV)" [disabled]="prevDisabled"
+              i18n-aria-label="@@ngb.datepicker.previous-month" aria-label="Previous month"
+              i18n-title="@@ngb.datepicker.previous-month" title="Previous month">
         <span class="ngb-dp-navigation-chevron"></span>
       </button>
     </div>
@@ -92,8 +93,9 @@ import {NgbDatepickerI18n} from './datepicker-i18n';
       <div class="ngb-dp-arrow" *ngIf="i !== months.length - 1"></div>
     </ng-template>
     <div class="ngb-dp-arrow right">
-      <button type="button" class="btn btn-link ngb-dp-arrow-btn"
-              (click)="!!navigate.emit(navigation.NEXT)" [disabled]="nextDisabled">
+      <button type="button" class="btn btn-link ngb-dp-arrow-btn" (click)="!!navigate.emit(navigation.NEXT)" [disabled]="nextDisabled"
+              i18n-aria-label="@@ngb.datepicker.next-month" aria-label="Next month"
+              i18n-title="@@ngb.datepicker.next-month" title="Next month">
         <span class="ngb-dp-navigation-chevron"></span>
       </button>
     </div>