Focus ring now shows up around custom navigation buttons

Author: nkinser

.gitignore

@@ -47,3 +47,6 @@ yarn.lock
 package-lock.json
 
 css/styles.css
+
+# Cache
+.cache/

src/components/DayPickerNavigation.jsx

@@ -126,7 +126,7 @@ function DayPickerNavigation({
       {!isVerticalScrollable && (
         <div
           role="button"
-          tabIndex="0"
+          tabIndex={isDefaultNavPrev ? '0' : null}
           {...css(
             styles.DayPickerNavigation_button,
             isDefaultNavPrev && styles.DayPickerNavigation_button__default,
@@ -164,7 +164,7 @@ function DayPickerNavigation({
 
       <div
         role="button"
-        tabIndex="0"
+        tabIndex={isDefaultNavNext ? '0' : null}
         {...css(
           styles.DayPickerNavigation_button,
           isDefaultNavNext && styles.DayPickerNavigation_button__default,

stories/DayPicker.js

@@ -10,29 +10,37 @@ import {
 } from '../src/constants';
 
 const TestPrevIcon = () => (
-  <span
+  <div
     style={{
       border: '1px solid #dce0e0',
       backgroundColor: '#fff',
       color: '#484848',
+      left: '24px',
       padding: '3px',
+      position: 'absolute',
+      width: '40px',
     }}
+    tabindex="0"
   >
     Prev
-  </span>
+  </div>
 );
 
 const TestNextIcon = () => (
-  <span
+  <div
     style={{
       border: '1px solid #dce0e0',
       backgroundColor: '#fff',
       color: '#484848',
       padding: '3px',
+      position: 'absolute',
+      right: '24px',
+      width: '40px',
     }}
+    tabindex="0"
   >
     Next
-  </span>
+  </div>
 );
 
 const TestCustomInfoPanel = () => (