diff --git a/src/datepicker/datepicker-navigation.spec.ts b/src/datepicker/datepicker-navigation.spec.ts
index de5088829f..5ba3c729dc 100644
--- a/src/datepicker/datepicker-navigation.spec.ts
+++ b/src/datepicker/datepicker-navigation.spec.ts
@@ -92,17 +92,35 @@ describe('ngb-datepicker-navigation', () => {
   it('should send navigation events', () => {
     const fixture =
         createTestComponent(`<ngb-datepicker-navigation (navigate)="onNavigate($event)"></ngb-datepicker-navigation>`);
-
-    const links = getNavigationLinks(fixture.nativeElement);
+    const[previousButton, nextButton] = getNavigationLinks(fixture.nativeElement);
+    const previousButtonSpan = previousButton.querySelector<HTMLElement>('span');
+    const nextButtonSpan = nextButton.querySelector<HTMLElement>('span');
     spyOn(fixture.componentInstance, 'onNavigate');
 
     // prev
-    links[0].click();
+    previousButton.click();
+    expect(fixture.componentInstance.onNavigate).toHaveBeenCalledWith(NavigationEvent.PREV);
+    previousButtonSpan.click();
     expect(fixture.componentInstance.onNavigate).toHaveBeenCalledWith(NavigationEvent.PREV);
 
     // next
-    links[1].click();
+    nextButton.click();
     expect(fixture.componentInstance.onNavigate).toHaveBeenCalledWith(NavigationEvent.NEXT);
+    nextButtonSpan.click();
+    expect(fixture.componentInstance.onNavigate).toHaveBeenCalledWith(NavigationEvent.NEXT);
+  });
+
+  it('should retain focus on the navigation links after click', () => {
+    const fixture = createTestComponent(`<ngb-datepicker-navigation></ngb-datepicker-navigation>`);
+    const[previousButton, nextButton] = getNavigationLinks(fixture.nativeElement);
+
+    // prev
+    previousButton.click();
+    expect(document.activeElement).toBe(previousButton);
+
+    // next
+    nextButton.click();
+    expect(document.activeElement).toBe(nextButton);
   });
 
   it('should have buttons of type button', () => {
diff --git a/src/datepicker/datepicker-navigation.ts b/src/datepicker/datepicker-navigation.ts
index 4d033fe626..a9def7bb16 100644
--- a/src/datepicker/datepicker-navigation.ts
+++ b/src/datepicker/datepicker-navigation.ts
@@ -10,7 +10,7 @@ import {NgbDatepickerI18n} from './datepicker-i18n';
   styleUrls: ['./datepicker-navigation.scss'],
   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)="onClickPrev($event)" [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>
@@ -32,7 +32,7 @@ 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)="onClickNext($event)" [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>
@@ -55,4 +55,14 @@ export class NgbDatepickerNavigation {
   @Output() select = new EventEmitter<NgbDate>();
 
   constructor(public i18n: NgbDatepickerI18n) {}
+
+  onClickPrev(event: MouseEvent) {
+    (event.currentTarget as HTMLElement).focus();
+    this.navigate.emit(this.navigation.PREV);
+  }
+
+  onClickNext(event: MouseEvent) {
+    (event.currentTarget as HTMLElement).focus();
+    this.navigate.emit(this.navigation.NEXT);
+  }
 }