diff --git a/__test__/__snapshots__/date-picker.test.js.snap b/__test__/__snapshots__/date-picker.test.js.snap
index f60a4c5f..a2bce5cf 100644
--- a/__test__/__snapshots__/date-picker.test.js.snap
+++ b/__test__/__snapshots__/date-picker.test.js.snap
@@ -159,6 +159,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell not-current-month"
         data-row-col="0,0"
+        role="button"
+        tabindex="0"
         title="2019-09-29"
       >
         <div>
@@ -168,6 +170,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell not-current-month"
         data-row-col="0,1"
+        role="button"
+        tabindex="0"
         title="2019-09-30"
       >
         <div>
@@ -177,6 +181,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="0,2"
+        role="button"
+        tabindex="0"
         title="2019-10-01"
       >
         <div>
@@ -186,6 +192,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="0,3"
+        role="button"
+        tabindex="0"
         title="2019-10-02"
       >
         <div>
@@ -195,6 +203,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="0,4"
+        role="button"
+        tabindex="0"
         title="2019-10-03"
       >
         <div>
@@ -204,6 +214,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="0,5"
+        role="button"
+        tabindex="0"
         title="2019-10-04"
       >
         <div>
@@ -213,6 +225,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="0,6"
+        role="button"
+        tabindex="0"
         title="2019-10-05"
       >
         <div>
@@ -235,6 +249,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="1,0"
+        role="button"
+        tabindex="0"
         title="2019-10-06"
       >
         <div>
@@ -244,6 +260,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="1,1"
+        role="button"
+        tabindex="0"
         title="2019-10-07"
       >
         <div>
@@ -253,6 +271,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="1,2"
+        role="button"
+        tabindex="0"
         title="2019-10-08"
       >
         <div>
@@ -262,6 +282,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="1,3"
+        role="button"
+        tabindex="0"
         title="2019-10-09"
       >
         <div>
@@ -271,6 +293,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="1,4"
+        role="button"
+        tabindex="0"
         title="2019-10-10"
       >
         <div>
@@ -280,6 +304,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="1,5"
+        role="button"
+        tabindex="0"
         title="2019-10-11"
       >
         <div>
@@ -289,6 +315,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="1,6"
+        role="button"
+        tabindex="0"
         title="2019-10-12"
       >
         <div>
@@ -311,6 +339,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell active"
         data-row-col="2,0"
+        role="button"
+        tabindex="0"
         title="2019-10-13"
       >
         <div>
@@ -320,6 +350,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="2,1"
+        role="button"
+        tabindex="0"
         title="2019-10-14"
       >
         <div>
@@ -329,6 +361,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="2,2"
+        role="button"
+        tabindex="0"
         title="2019-10-15"
       >
         <div>
@@ -338,6 +372,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="2,3"
+        role="button"
+        tabindex="0"
         title="2019-10-16"
       >
         <div>
@@ -347,6 +383,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="2,4"
+        role="button"
+        tabindex="0"
         title="2019-10-17"
       >
         <div>
@@ -356,6 +394,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="2,5"
+        role="button"
+        tabindex="0"
         title="2019-10-18"
       >
         <div>
@@ -365,6 +405,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="2,6"
+        role="button"
+        tabindex="0"
         title="2019-10-19"
       >
         <div>
@@ -387,6 +429,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="3,0"
+        role="button"
+        tabindex="0"
         title="2019-10-20"
       >
         <div>
@@ -396,6 +440,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="3,1"
+        role="button"
+        tabindex="0"
         title="2019-10-21"
       >
         <div>
@@ -405,6 +451,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="3,2"
+        role="button"
+        tabindex="0"
         title="2019-10-22"
       >
         <div>
@@ -414,6 +462,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="3,3"
+        role="button"
+        tabindex="0"
         title="2019-10-23"
       >
         <div>
@@ -423,6 +473,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="3,4"
+        role="button"
+        tabindex="0"
         title="2019-10-24"
       >
         <div>
@@ -432,6 +484,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="3,5"
+        role="button"
+        tabindex="0"
         title="2019-10-25"
       >
         <div>
@@ -441,6 +495,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="3,6"
+        role="button"
+        tabindex="0"
         title="2019-10-26"
       >
         <div>
@@ -463,6 +519,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="4,0"
+        role="button"
+        tabindex="0"
         title="2019-10-27"
       >
         <div>
@@ -472,6 +530,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="4,1"
+        role="button"
+        tabindex="0"
         title="2019-10-28"
       >
         <div>
@@ -481,6 +541,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="4,2"
+        role="button"
+        tabindex="0"
         title="2019-10-29"
       >
         <div>
@@ -490,6 +552,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="4,3"
+        role="button"
+        tabindex="0"
         title="2019-10-30"
       >
         <div>
@@ -499,6 +563,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell"
         data-row-col="4,4"
+        role="button"
+        tabindex="0"
         title="2019-10-31"
       >
         <div>
@@ -508,6 +574,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell not-current-month"
         data-row-col="4,5"
+        role="button"
+        tabindex="0"
         title="2019-11-01"
       >
         <div>
@@ -517,6 +585,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell not-current-month"
         data-row-col="4,6"
+        role="button"
+        tabindex="0"
         title="2019-11-02"
       >
         <div>
@@ -539,6 +609,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell not-current-month"
         data-row-col="5,0"
+        role="button"
+        tabindex="0"
         title="2019-11-03"
       >
         <div>
@@ -548,6 +620,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell not-current-month"
         data-row-col="5,1"
+        role="button"
+        tabindex="0"
         title="2019-11-04"
       >
         <div>
@@ -557,6 +631,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell not-current-month"
         data-row-col="5,2"
+        role="button"
+        tabindex="0"
         title="2019-11-05"
       >
         <div>
@@ -566,6 +642,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell not-current-month"
         data-row-col="5,3"
+        role="button"
+        tabindex="0"
         title="2019-11-06"
       >
         <div>
@@ -575,6 +653,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell not-current-month"
         data-row-col="5,4"
+        role="button"
+        tabindex="0"
         title="2019-11-07"
       >
         <div>
@@ -584,6 +664,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell not-current-month"
         data-row-col="5,5"
+        role="button"
+        tabindex="0"
         title="2019-11-08"
       >
         <div>
@@ -593,6 +675,8 @@ exports[`DatePicker prop: formatter 1`] = `
       <td
         class="cell not-current-month"
         data-row-col="5,6"
+        role="button"
+        tabindex="0"
         title="2019-11-09"
       >
         <div>
diff --git a/__test__/__snapshots__/table-date.test.js.snap b/__test__/__snapshots__/table-date.test.js.snap
index 53cb0fe5..211c0156 100644
--- a/__test__/__snapshots__/table-date.test.js.snap
+++ b/__test__/__snapshots__/table-date.test.js.snap
@@ -108,6 +108,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="0,0"
+            role="button"
+            tabindex="0"
             title="29/09/2019"
           >
             <div>
@@ -117,6 +119,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="0,1"
+            role="button"
+            tabindex="0"
             title="30/09/2019"
           >
             <div>
@@ -126,6 +130,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="0,2"
+            role="button"
+            tabindex="0"
             title="01/10/2019"
           >
             <div>
@@ -135,6 +141,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="0,3"
+            role="button"
+            tabindex="0"
             title="02/10/2019"
           >
             <div>
@@ -144,6 +152,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="0,4"
+            role="button"
+            tabindex="0"
             title="03/10/2019"
           >
             <div>
@@ -153,6 +163,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="0,5"
+            role="button"
+            tabindex="0"
             title="04/10/2019"
           >
             <div>
@@ -162,6 +174,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="0,6"
+            role="button"
+            tabindex="0"
             title="05/10/2019"
           >
             <div>
@@ -177,6 +191,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="1,0"
+            role="button"
+            tabindex="0"
             title="06/10/2019"
           >
             <div>
@@ -186,6 +202,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="1,1"
+            role="button"
+            tabindex="0"
             title="07/10/2019"
           >
             <div>
@@ -195,6 +213,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="1,2"
+            role="button"
+            tabindex="0"
             title="08/10/2019"
           >
             <div>
@@ -204,6 +224,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="1,3"
+            role="button"
+            tabindex="0"
             title="09/10/2019"
           >
             <div>
@@ -213,6 +235,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="1,4"
+            role="button"
+            tabindex="0"
             title="10/10/2019"
           >
             <div>
@@ -222,6 +246,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="1,5"
+            role="button"
+            tabindex="0"
             title="11/10/2019"
           >
             <div>
@@ -231,6 +257,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="1,6"
+            role="button"
+            tabindex="0"
             title="12/10/2019"
           >
             <div>
@@ -246,6 +274,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="2,0"
+            role="button"
+            tabindex="0"
             title="13/10/2019"
           >
             <div>
@@ -255,6 +285,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="2,1"
+            role="button"
+            tabindex="0"
             title="14/10/2019"
           >
             <div>
@@ -264,6 +296,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="2,2"
+            role="button"
+            tabindex="0"
             title="15/10/2019"
           >
             <div>
@@ -273,6 +307,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="2,3"
+            role="button"
+            tabindex="0"
             title="16/10/2019"
           >
             <div>
@@ -282,6 +318,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="2,4"
+            role="button"
+            tabindex="0"
             title="17/10/2019"
           >
             <div>
@@ -291,6 +329,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="2,5"
+            role="button"
+            tabindex="0"
             title="18/10/2019"
           >
             <div>
@@ -300,6 +340,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="2,6"
+            role="button"
+            tabindex="0"
             title="19/10/2019"
           >
             <div>
@@ -315,6 +357,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="3,0"
+            role="button"
+            tabindex="0"
             title="20/10/2019"
           >
             <div>
@@ -324,6 +368,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="3,1"
+            role="button"
+            tabindex="0"
             title="21/10/2019"
           >
             <div>
@@ -333,6 +379,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="3,2"
+            role="button"
+            tabindex="0"
             title="22/10/2019"
           >
             <div>
@@ -342,6 +390,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="3,3"
+            role="button"
+            tabindex="0"
             title="23/10/2019"
           >
             <div>
@@ -351,6 +401,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="3,4"
+            role="button"
+            tabindex="0"
             title="24/10/2019"
           >
             <div>
@@ -360,6 +412,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="3,5"
+            role="button"
+            tabindex="0"
             title="25/10/2019"
           >
             <div>
@@ -369,6 +423,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="3,6"
+            role="button"
+            tabindex="0"
             title="26/10/2019"
           >
             <div>
@@ -384,6 +440,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="4,0"
+            role="button"
+            tabindex="0"
             title="27/10/2019"
           >
             <div>
@@ -393,6 +451,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="4,1"
+            role="button"
+            tabindex="0"
             title="28/10/2019"
           >
             <div>
@@ -402,6 +462,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="4,2"
+            role="button"
+            tabindex="0"
             title="29/10/2019"
           >
             <div>
@@ -411,6 +473,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="4,3"
+            role="button"
+            tabindex="0"
             title="30/10/2019"
           >
             <div>
@@ -420,6 +484,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="4,4"
+            role="button"
+            tabindex="0"
             title="31/10/2019"
           >
             <div>
@@ -429,6 +495,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="4,5"
+            role="button"
+            tabindex="0"
             title="01/11/2019"
           >
             <div>
@@ -438,6 +506,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="4,6"
+            role="button"
+            tabindex="0"
             title="02/11/2019"
           >
             <div>
@@ -453,6 +523,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="5,0"
+            role="button"
+            tabindex="0"
             title="03/11/2019"
           >
             <div>
@@ -462,6 +534,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="5,1"
+            role="button"
+            tabindex="0"
             title="04/11/2019"
           >
             <div>
@@ -471,6 +545,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="5,2"
+            role="button"
+            tabindex="0"
             title="05/11/2019"
           >
             <div>
@@ -480,6 +556,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="5,3"
+            role="button"
+            tabindex="0"
             title="06/11/2019"
           >
             <div>
@@ -489,6 +567,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="5,4"
+            role="button"
+            tabindex="0"
             title="07/11/2019"
           >
             <div>
@@ -498,6 +578,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="5,5"
+            role="button"
+            tabindex="0"
             title="08/11/2019"
           >
             <div>
@@ -507,6 +589,8 @@ exports[`TableDate corrent render 1`] = `
           <td
             class="cell"
             data-row-col="5,6"
+            role="button"
+            tabindex="0"
             title="09/11/2019"
           >
             <div>
diff --git a/__test__/__snapshots__/table-month.test.js.snap b/__test__/__snapshots__/table-month.test.js.snap
index 3524fc75..9d3b4469 100644
--- a/__test__/__snapshots__/table-month.test.js.snap
+++ b/__test__/__snapshots__/table-month.test.js.snap
@@ -49,6 +49,8 @@ exports[`TableMonth correct render 1`] = `
         <td
           class="cell"
           data-month="0"
+          role="button"
+          tabindex="0"
         >
           <div>
             Jan
@@ -57,6 +59,8 @@ exports[`TableMonth correct render 1`] = `
         <td
           class="cell"
           data-month="1"
+          role="button"
+          tabindex="0"
         >
           <div>
             Feb
@@ -65,6 +69,8 @@ exports[`TableMonth correct render 1`] = `
         <td
           class="cell"
           data-month="2"
+          role="button"
+          tabindex="0"
         >
           <div>
             Mar
@@ -75,6 +81,8 @@ exports[`TableMonth correct render 1`] = `
         <td
           class="cell"
           data-month="3"
+          role="button"
+          tabindex="0"
         >
           <div>
             Apr
@@ -83,6 +91,8 @@ exports[`TableMonth correct render 1`] = `
         <td
           class="cell"
           data-month="4"
+          role="button"
+          tabindex="0"
         >
           <div>
             May
@@ -91,6 +101,8 @@ exports[`TableMonth correct render 1`] = `
         <td
           class="cell"
           data-month="5"
+          role="button"
+          tabindex="0"
         >
           <div>
             Jun
@@ -101,6 +113,8 @@ exports[`TableMonth correct render 1`] = `
         <td
           class="cell"
           data-month="6"
+          role="button"
+          tabindex="0"
         >
           <div>
             Jul
@@ -109,6 +123,8 @@ exports[`TableMonth correct render 1`] = `
         <td
           class="cell"
           data-month="7"
+          role="button"
+          tabindex="0"
         >
           <div>
             Aug
@@ -117,6 +133,8 @@ exports[`TableMonth correct render 1`] = `
         <td
           class="cell"
           data-month="8"
+          role="button"
+          tabindex="0"
         >
           <div>
             Sep
@@ -127,6 +145,8 @@ exports[`TableMonth correct render 1`] = `
         <td
           class="cell active"
           data-month="9"
+          role="button"
+          tabindex="0"
         >
           <div>
             Oct
@@ -135,6 +155,8 @@ exports[`TableMonth correct render 1`] = `
         <td
           class="cell"
           data-month="10"
+          role="button"
+          tabindex="0"
         >
           <div>
             Nov
@@ -143,6 +165,8 @@ exports[`TableMonth correct render 1`] = `
         <td
           class="cell"
           data-month="11"
+          role="button"
+          tabindex="0"
         >
           <div>
             Dec
diff --git a/__test__/__snapshots__/table-year.test.js.snap b/__test__/__snapshots__/table-year.test.js.snap
index dda92aa9..6b087115 100644
--- a/__test__/__snapshots__/table-year.test.js.snap
+++ b/__test__/__snapshots__/table-year.test.js.snap
@@ -50,16 +50,22 @@ exports[`TableYear decade=2010 1`] = `
     >
       <tr>
         <td
+          aria-hidden="false"
           class="cell"
           data-year="2010"
+          role="button"
+          tabindex="0"
         >
           <div>
             2010
           </div>
         </td>
         <td
+          aria-hidden="false"
           class="cell"
           data-year="2011"
+          role="button"
+          tabindex="0"
         >
           <div>
             2011
@@ -68,16 +74,22 @@ exports[`TableYear decade=2010 1`] = `
       </tr>
       <tr>
         <td
+          aria-hidden="false"
           class="cell"
           data-year="2012"
+          role="button"
+          tabindex="0"
         >
           <div>
             2012
           </div>
         </td>
         <td
+          aria-hidden="false"
           class="cell"
           data-year="2013"
+          role="button"
+          tabindex="0"
         >
           <div>
             2013
@@ -86,16 +98,22 @@ exports[`TableYear decade=2010 1`] = `
       </tr>
       <tr>
         <td
+          aria-hidden="false"
           class="cell"
           data-year="2014"
+          role="button"
+          tabindex="0"
         >
           <div>
             2014
           </div>
         </td>
         <td
+          aria-hidden="false"
           class="cell"
           data-year="2015"
+          role="button"
+          tabindex="0"
         >
           <div>
             2015
@@ -104,16 +122,22 @@ exports[`TableYear decade=2010 1`] = `
       </tr>
       <tr>
         <td
+          aria-hidden="false"
           class="cell"
           data-year="2016"
+          role="button"
+          tabindex="0"
         >
           <div>
             2016
           </div>
         </td>
         <td
+          aria-hidden="false"
           class="cell"
           data-year="2017"
+          role="button"
+          tabindex="0"
         >
           <div>
             2017
@@ -122,16 +146,22 @@ exports[`TableYear decade=2010 1`] = `
       </tr>
       <tr>
         <td
+          aria-hidden="false"
           class="cell"
           data-year="2018"
+          role="button"
+          tabindex="0"
         >
           <div>
             2018
           </div>
         </td>
         <td
+          aria-hidden="false"
           class="cell"
           data-year="2019"
+          role="button"
+          tabindex="0"
         >
           <div>
             2019
diff --git a/__test__/date-picker.test.js b/__test__/date-picker.test.js
index 4827831b..f8825a3d 100644
--- a/__test__/date-picker.test.js
+++ b/__test__/date-picker.test.js
@@ -23,8 +23,9 @@ describe('DatePicker', () => {
     const bodyWrapper = createWrapper(document.body);
     await bodyWrapper.trigger('mousedown');
     expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(false);
-    // expect focus input should show the popop
+    // expect keydown down should show the popop
     await input.trigger('focus');
+    await input.trigger('keydown.down');
     expect(wrapper.find('.mx-datepicker-popup').exists()).toBe(true);
     // expoce keydown tab should hide the popup
     await input.trigger('keydown.tab');
@@ -265,7 +266,6 @@ describe('DatePicker', () => {
     // click the date expect popup don't close
     vm.handleSelectDate(new Date(2018, 5, 5));
     expect(wrapper.emitted().input).toBeUndefined();
-    expect(vm.popupVisible).toBe(true);
     await btn.trigger('click');
     expect(wrapper.emitted().input[0][0]).toEqual(new Date(2018, 5, 5));
     expect(vm.popupVisible).toBe(false);
diff --git a/src/calendar/calendar-panel.js b/src/calendar/calendar-panel.js
index f4ba2fce..0a3d5578 100644
--- a/src/calendar/calendar-panel.js
+++ b/src/calendar/calendar-panel.js
@@ -66,6 +66,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    range: {
+      type: Boolean,
+      default: false,
+    },
+    rangeIndex: {
+      type: Number,
+      default: 0,
+    },
   },
   data() {
     const panels = ['date', 'month', 'year'];
@@ -249,6 +257,7 @@ export default {
           calendar={innerCalendar}
           getCellClasses={this.getYearClasses}
           getYearPanel={this.getYearPanel}
+          isDisabled={this.isDisabled}
           onSelect={this.handleSelectYear}
           onChangecalendar={this.handleCalendarChange}
         />
@@ -260,6 +269,7 @@ export default {
           disabledCalendarChanger={this.disabledCalendarChanger}
           calendar={innerCalendar}
           getCellClasses={this.getMonthClasses}
+          isDisabled={this.isDisabled}
           onSelect={this.handleSelectMonth}
           onChangepanel={this.handelPanelChange}
           onChangecalendar={this.handleCalendarChange}
@@ -273,6 +283,9 @@ export default {
         calendar={innerCalendar}
         getCellClasses={this.getDateClasses}
         getRowClasses={this.getWeekState}
+        isDisabled={this.isDisabled}
+        range={this.range}
+        rangeIndex={this.rangeIndex}
         titleFormat={this.titleFormat}
         showWeekNumber={
           typeof this.showWeekNumber === 'boolean' ? this.showWeekNumber : this.type === 'week'
diff --git a/src/calendar/calendar-range.js b/src/calendar/calendar-range.js
index 7cfdb888..a430e77c 100644
--- a/src/calendar/calendar-range.js
+++ b/src/calendar/calendar-range.js
@@ -148,6 +148,8 @@ export default {
         getClasses: this.getRangeClasses,
         // don't update when range is true
         partialUpdate: false,
+        rangeIndex: index,
+        range: true,
       };
       const on = {
         select: this.handleSelect,
diff --git a/src/calendar/icon-button.vue b/src/calendar/icon-button.vue
index 10438714..58e06e23 100644
--- a/src/calendar/icon-button.vue
+++ b/src/calendar/icon-button.vue
@@ -1,6 +1,7 @@
 <template>
   <button
     type="button"
+    :aria-label="ariaLabel"
     :disabled="disabled"
     :class="[
       `${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-${type}`,
@@ -17,6 +18,7 @@
 <script>
 export default {
   props: {
+    ariaLabel: String,
     type: String,
     disabled: Boolean,
   },
diff --git a/src/calendar/table-date.vue b/src/calendar/table-date.vue
index 04390424..be1306b2 100644
--- a/src/calendar/table-date.vue
+++ b/src/calendar/table-date.vue
@@ -3,24 +3,16 @@
     <div :class="`${prefixClass}-calendar-header`">
       <icon-button
         type="double-left"
+        :aria-label="locale.prevYear"
         :disabled="isDisabledArrows('last-year')"
         @click="handleIconDoubleLeftClick"
       ></icon-button>
       <icon-button
         type="left"
+        :aria-label="locale.prevMonth"
         :disabled="isDisabledArrows('last-month')"
         @click="handleIconLeftClick"
       ></icon-button>
-      <icon-button
-        type="double-right"
-        :disabled="isDisabledArrows('next-year')"
-        @click="handleIconDoubleRightClick"
-      ></icon-button>
-      <icon-button
-        type="right"
-        :disabled="isDisabledArrows('next-month')"
-        @click="handleIconRightClick"
-      ></icon-button>
       <span :class="`${prefixClass}-calendar-header-label`">
         <button
           v-for="item in yearMonth"
@@ -34,6 +26,18 @@
           {{ item.label }}
         </button>
       </span>
+      <icon-button
+        type="right"
+        :aria-label="locale.nextMonth"
+        :disabled="isDisabledArrows('next-month')"
+        @click="handleIconRightClick"
+      ></icon-button>
+      <icon-button
+        type="double-right"
+        :aria-label="locale.nextYear"
+        :disabled="isDisabledArrows('next-year')"
+        @click="handleIconDoubleRightClick"
+      ></icon-button>
     </div>
     <div :class="`${prefixClass}-calendar-content`">
       <table :class="`${prefixClass}-table ${prefixClass}-table-date`">
@@ -43,7 +47,7 @@
             <th v-for="day in days" :key="day">{{ day }}</th>
           </tr>
         </thead>
-        <tbody @click="handleCellClick">
+        <tbody @click="handleCellClick" @keydown.enter="handleCellClick">
           <tr
             v-for="(row, i) in dates"
             :key="i"
@@ -58,13 +62,23 @@
             </td>
             <td
               v-for="(cell, j) in row"
+              :id="handleId(i, j)"
               :key="j"
-              :data-row-col="`${i},${j}`"
+              :ref="handleRefName(cell, i, j)"
               class="cell"
+              role="button"
               :class="getCellClasses(cell)"
+              :data-row-col="`${i},${j}`"
+              :disabled="isDisabled(cell)"
+              :tabindex="handleTabIndex(cell)"
               :title="getCellTitle(cell)"
               @mouseenter="handleMouseEnter(cell)"
               @mouseleave="handleMouseLeave(cell)"
+              @keydown.tab.prevent.stop
+              @keydown.up.prevent="handleArrowUp(cell, i, j)"
+              @keydown.down.prevent="handleArrowDown(cell, i, j)"
+              @keydown.left.prevent="handleArrowLeft(cell, i, j)"
+              @keydown.right.prevent="handleArrowRight(cell, i, j)"
             >
               <div>{{ cell.getDate() }}</div>
             </td>
@@ -111,6 +125,10 @@ export default {
       type: Date,
       default: () => new Date(),
     },
+    isDisabled: {
+      type: Function,
+      default: () => false,
+    },
     showWeekNumber: {
       type: Boolean,
       default: false,
@@ -127,6 +145,14 @@ export default {
       type: Function,
       default: () => [],
     },
+    range: {
+      type: Boolean,
+      default: false,
+    },
+    rangeIndex: {
+      type: Number,
+      default: 0,
+    },
   },
   computed: {
     firstDayOfWeek() {
@@ -159,6 +185,15 @@ export default {
       });
       return chunk(arr, 7);
     },
+    locale() {
+      return this.getLocale();
+    },
+    refsArray() {
+      if (this.$refs) {
+        return Object.entries(this.$refs);
+      }
+      return [];
+    },
   },
   methods: {
     isDisabledArrows(type) {
@@ -183,6 +218,96 @@ export default {
       }
       return this.disabledCalendarChanger(date, type);
     },
+    handleArrowUp(cell, row, column) {
+      if (row === 0) {
+        return;
+      }
+      const refName = this.handleRefName(cell, row - 1, column);
+      const ref = this.$refs[refName]?.[0];
+      if (ref) {
+        ref.focus();
+      }
+    },
+    handleArrowDown(cell, row, column) {
+      if (row === this.dates.length - 1) {
+        return;
+      }
+      const refName = this.handleRefName(cell, row + 1, column);
+      const ref = this.$refs[refName]?.[0];
+      if (ref) {
+        ref.focus();
+      }
+    },
+    handleArrowLeft(cell, row, column) {
+      const currentRefName = this.handleRefName(cell, row, column);
+      const firstRef = this.refsArray[0];
+      if (currentRefName !== firstRef[0]) {
+        const refName = this.handleRefName(cell, row, column - 1);
+        const ref = this.$refs[refName]?.[0];
+        if (ref) {
+          ref.focus();
+        }
+      } else if (this.range) {
+        let index = 0;
+        if (this.rangeIndex === 0) {
+          this.handleIconLeftClick();
+        } else {
+          index = this.rangeIndex - 1;
+        }
+        const lastRow = this.dates[this.dates.length - 1];
+        const cellName = `#range-date-${index}-cell-${this.dates.length - 1}-${lastRow.length - 1}`;
+        const cellElement = document.querySelector(cellName);
+        if (cellElement) {
+          cellElement.focus();
+        }
+      } else {
+        this.$nextTick(() => {
+          this.handleIconLeftClick();
+          const lastRef = this.refsArray[this.refsArray.length - 1];
+          if (lastRef.length) {
+            const element = lastRef[1];
+            if (element.length) {
+              element[0].focus();
+            }
+          }
+        });
+      }
+    },
+    handleArrowRight(cell, row, column) {
+      const currentRefName = this.handleRefName(cell, row, column);
+      const lastRef = this.refsArray[this.refsArray.length - 1];
+      if (currentRefName !== lastRef[0]) {
+        const refName = this.handleRefName(cell, row, column + 1);
+        const ref = this.$refs[refName]?.[0];
+        if (ref) {
+          ref.focus();
+        }
+      } else if (this.range) {
+        let index = 0;
+        if (this.rangeIndex === 0) {
+          index = this.rangeIndex + 1;
+        } else {
+          index = this.rangeIndex - 1;
+          this.handleIconRightClick();
+        }
+        const cellName = `#range-date-${index}-cell-0-0`;
+        const cellElement = document.querySelector(cellName);
+        if (cellElement) {
+          cellElement.focus();
+        }
+      } else {
+        this.$nextTick(() => {
+          this.handleIconLeftClick();
+          const firstRef = this.refsArray[0];
+          if (firstRef.length) {
+            const element = firstRef[1];
+            if (element.length) {
+              element[0].focus();
+            }
+          }
+        });
+      }
+    },
     handleIconLeftClick() {
       this.$emit(
         'changecalendar',
@@ -246,6 +371,25 @@ export default {
     getWeekNumber(date) {
       return this.getWeek(date, this.getLocale().formatLocale);
     },
+    handleRefName(cellDate, row, col) {
+      if (!this.isDisabled(cellDate)) {
+        if (this.range) {
+          return `range-date-${this.rangeIndex}-cell-${row}-${col}`;
+        }
+        return `date-cell-${row}-${col}`;
+      }
+      return undefined;
+    },
+    handleId(row, col) {
+      if (this.range) {
+        return `range-date-${this.rangeIndex}-cell-${row}-${col}`;
+      }
+      return undefined;
+    },
+    handleTabIndex(cellDate) {
+      const response = this.isDisabled(cellDate);
+      return response ? -1 : 0;
+    },
   },
 };
 </script>
diff --git a/src/calendar/table-month.vue b/src/calendar/table-month.vue
index 21f940a9..c58a5e63 100644
--- a/src/calendar/table-month.vue
+++ b/src/calendar/table-month.vue
@@ -3,14 +3,10 @@
     <div :class="`${prefixClass}-calendar-header`">
       <icon-button
         type="double-left"
+        :aria-label="locale.prev"
         :disabled="isDisabledArrows('last-year')"
         @click="handleIconDoubleLeftClick"
       ></icon-button>
-      <icon-button
-        type="double-right"
-        :disabled="isDisabledArrows('next-year')"
-        @click="handleIconDoubleRightClick"
-      ></icon-button>
       <span :class="`${prefixClass}-calendar-header-label`">
         <button
           type="button"
@@ -20,16 +16,35 @@
           {{ calendarYear }}
         </button>
       </span>
+      <icon-button
+        type="double-right"
+        :aria-label="locale.next"
+        :disabled="isDisabledArrows('next-year')"
+        @click="handleIconDoubleRightClick"
+      ></icon-button>
     </div>
     <div :class="`${prefixClass}-calendar-content`">
-      <table :class="`${prefixClass}-table ${prefixClass}-table-month`" @click="handleClick">
+      <table
+        :class="`${prefixClass}-table ${prefixClass}-table-month`"
+        @click="handleClick"
+        @keydown.enter="handleClick"
+      >
         <tr v-for="(row, i) in months" :key="i">
           <td
             v-for="(cell, j) in row"
             :key="j"
-            :data-month="cell.month"
+            :ref="handleRefName(cell, i, j)"
             class="cell"
+            role="button"
+            :disabled="isDisabled(cell)"
+            :tabindex="handleTabIndex(cell)"
+            :data-month="cell.month"
             :class="getCellClasses(cell.month)"
+            @keydown.tab.prevent.stop
+            @keydown.up.prevent="handleArrowUp(cell, i, j)"
+            @keydown.down.prevent="handleArrowDown(cell, i, j)"
+            @keydown.left.prevent="handleArrowLeft(cell, i, j)"
+            @keydown.right.prevent="handleArrowRight(cell, i, j)"
           >
             <div>{{ cell.text }}</div>
           </td>
@@ -43,7 +58,7 @@
 import { chunk } from '../util/base';
 import IconButton from './icon-button';
 import { getLocale } from '../locale';
-import { setYear } from '../util/date';
+import { createDate, setYear } from '../util/date';
 
 export default {
   name: 'TableMonth',
@@ -69,19 +84,32 @@ export default {
       type: Function,
       default: () => [],
     },
+    isDisabled: {
+      type: Function,
+      default: () => false,
+    },
   },
   computed: {
     calendarYear() {
       return this.calendar.getFullYear();
     },
     months() {
-      const locale = this.getLocale();
+      const { locale } = this;
       const monthsLocale = locale.months || locale.formatLocale.monthsShort;
       const months = monthsLocale.map((text, month) => {
         return { text, month };
       });
       return chunk(months, 3);
     },
+    locale() {
+      return this.getLocale();
+    },
+    refsArray() {
+      if (this.$refs) {
+        return Object.entries(this.$refs);
+      }
+      return [];
+    },
   },
   methods: {
     isDisabledArrows(type) {
@@ -99,6 +127,66 @@ export default {
       }
       return this.disabledCalendarChanger(date, type);
     },
+    handleArrowUp(cell, row, column) {
+      if (row === 0) {
+        return;
+      }
+      const refName = this.handleRefName(cell, row - 1, column);
+      const ref = this.$refs[refName]?.[0];
+      if (ref) {
+        ref.focus();
+      }
+    },
+    handleArrowDown(cell, row, column) {
+      if (row === this.months.length - 1) {
+        return;
+      }
+      const refName = this.handleRefName(cell, row + 1, column);
+      const ref = this.$refs[refName]?.[0];
+      if (ref) {
+        ref.focus();
+      }
+    },
+    handleArrowLeft(cell, row, column) {
+      const currentRefName = this.handleRefName(cell, row, column);
+      const firstRef = this.refsArray[0];
+      if (currentRefName !== firstRef[0]) {
+        const refName = this.handleRefName(cell, row, column - 1);
+        const ref = this.$refs[refName]?.[0];
+        if (ref) {
+          ref.focus();
+        }
+      } else {
+        this.handleIconDoubleLeftClick();
+        const lastRef = this.refsArray[this.refsArray.length - 1];
+        if (lastRef.length) {
+          const element = lastRef[1];
+          if (element.length) {
+            element[0].focus();
+          }
+        }
+      }
+    },
+    handleArrowRight(cell, row, column) {
+      const currentRefName = this.handleRefName(cell, row, column);
+      const lastRef = this.refsArray[this.refsArray.length - 1];
+      if (currentRefName !== lastRef[0]) {
+        const refName = this.handleRefName(cell, row, column + 1);
+        const ref = this.$refs[refName]?.[0];
+        if (ref) {
+          ref.focus();
+        }
+      } else {
+        this.handleIconDoubleRightClick();
+        const firstRef = this.refsArray[0];
+        if (firstRef.length) {
+          const element = firstRef[1];
+          if (element.length) {
+            element[0].focus();
+          }
+        }
+      }
+    },
     handleIconDoubleLeftClick() {
       this.$emit(
         'changecalendar',
@@ -126,6 +214,17 @@ export default {
         this.$emit('select', parseInt(month, 10));
       }
     },
+    handleRefName(cellDate, row, col) {
+      const date = createDate(cellDate, 0);
+      if (!this.isDisabled(date)) {
+        return `year-cell-${row}-${col}`;
+      }
+      return undefined;
+    },
+    handleTabIndex(cellDate) {
+      const date = createDate(cellDate, 0);
+      return this.isDisabled(date) ? -1 : 0;
+    },
   },
 };
 </script>
diff --git a/src/calendar/table-year.vue b/src/calendar/table-year.vue
index dbf9c8d9..99f1647b 100644
--- a/src/calendar/table-year.vue
+++ b/src/calendar/table-year.vue
@@ -3,29 +3,44 @@
     <div :class="`${prefixClass}-calendar-header`">
       <icon-button
         type="double-left"
+        :aria-label="locale.prev"
         :disabled="isDisabledArrows('last-decade')"
         @click="handleIconDoubleLeftClick"
       ></icon-button>
-      <icon-button
-        type="double-right"
-        :disabled="isDisabledArrows('next-decade')"
-        @click="handleIconDoubleRightClick"
-      ></icon-button>
       <span :class="`${prefixClass}-calendar-header-label`">
         <span>{{ firstYear }}</span>
         <span :class="`${prefixClass}-calendar-decade-separator`"></span>
         <span>{{ lastYear }}</span>
       </span>
+      <icon-button
+        type="double-right"
+        :aria-label="locale.next"
+        :disabled="isDisabledArrows('next-decade')"
+        @click="handleIconDoubleRightClick"
+      ></icon-button>
     </div>
     <div :class="`${prefixClass}-calendar-content`">
-      <table :class="`${prefixClass}-table ${prefixClass}-table-year`" @click="handleClick">
+      <table
+        :class="`${prefixClass}-table ${prefixClass}-table-year`"
+        @click="handleClick"
+        @keydown.enter="handleClick"
+      >
         <tr v-for="(row, i) in years" :key="i">
           <td
             v-for="(cell, j) in row"
+            :ref="handleRefName(cell, i, j)"
             :key="j"
-            :data-year="cell"
+            aria-hidden="false"
             class="cell"
+            role="button"
+            :tabindex="handleTabIndex(cell)"
+            :data-year="cell"
             :class="getCellClasses(cell)"
+            @keydown.tab.prevent.stop
+            @keydown.up.prevent="handleArrowUp(cell, i, j)"
+            @keydown.down.prevent="handleArrowDown(cell, i, j)"
+            @keydown.left.prevent="handleArrowLeft(cell, i, j)"
+            @keydown.right.prevent="handleArrowRight(cell, i, j)"
           >
             <div>{{ cell }}</div>
           </td>
@@ -38,12 +53,16 @@
 <script>
 import IconButton from './icon-button';
 import { chunk } from '../util/base';
-import { setYear } from '../util/date';
+import { createDate, setYear } from '../util/date';
+import { getLocale } from '../locale';
 
 export default {
   name: 'TableYear',
   components: { IconButton },
   inject: {
+    getLocale: {
+      default: () => getLocale,
+    },
     prefixClass: {
       default: 'mx',
     },
@@ -64,6 +83,10 @@ export default {
     getYearPanel: {
       type: Function,
     },
+    isDisabled: {
+      type: Function,
+      default: () => false,
+    },
   },
   computed: {
     years() {
@@ -80,6 +103,15 @@ export default {
       const last = arr => arr[arr.length - 1];
       return last(last(this.years));
     },
+    locale() {
+      return this.getLocale();
+    },
+    refsArray() {
+      if (this.$refs) {
+        return Object.entries(this.$refs);
+      }
+      return [];
+    },
   },
   methods: {
     isDisabledArrows(type) {
@@ -105,6 +137,66 @@ export default {
       }
       return chunk(years, 2);
     },
+    handleArrowUp(cell, row, column) {
+      if (row === 0) {
+        return;
+      }
+      const refName = this.handleRefName(cell, row - 1, column);
+      const ref = this.$refs[refName]?.[0];
+      if (ref) {
+        ref.focus();
+      }
+    },
+    handleArrowDown(cell, row, column) {
+      if (row === this.years.length - 1) {
+        return;
+      }
+      const refName = this.handleRefName(cell, row + 1, column);
+      const ref = this.$refs[refName]?.[0];
+      if (ref) {
+        ref.focus();
+      }
+    },
+    handleArrowLeft(cell, row, column) {
+      const currentRefName = this.handleRefName(cell, row, column);
+      const firstRef = this.refsArray[0];
+      if (currentRefName !== firstRef[0]) {
+        const refName = this.handleRefName(cell, row, column - 1);
+        const ref = this.$refs[refName]?.[0];
+        if (ref) {
+          ref.focus();
+        }
+      } else {
+        this.handleIconDoubleLeftClick();
+        const lastRef = this.refsArray[this.refsArray.length - 1];
+        if (lastRef.length) {
+          const element = lastRef[1];
+          if (element.length) {
+            element[0].focus();
+          }
+        }
+      }
+    },
+    handleArrowRight(cell, row, column) {
+      const currentRefName = this.handleRefName(cell, row, column);
+      const lastRef = this.refsArray[this.refsArray.length - 1];
+      if (currentRefName !== lastRef[0]) {
+        const refName = this.handleRefName(cell, row, column + 1);
+        const ref = this.$refs[refName]?.[0];
+        if (ref) {
+          ref.focus();
+        }
+      } else {
+        this.handleIconDoubleRightClick();
+        const firstRef = this.refsArray[0];
+        if (firstRef.length) {
+          const element = firstRef[1];
+          if (element.length) {
+            element[0].focus();
+          }
+        }
+      }
+    },
     handleIconDoubleLeftClick() {
       this.$emit(
         'changecalendar',
@@ -127,7 +219,19 @@ export default {
       const year = target.getAttribute('data-year');
       if (year && !target.classList.contains('disabled')) {
         this.$emit('select', parseInt(year, 10));
+        this.selectedYear = parseInt(year, 10);
+      }
+    },
+    handleRefName(cellDate, row, col) {
+      const date = createDate(cellDate, 0);
+      if (!this.isDisabled(date)) {
+        return `year-cell-${row}-${col}`;
       }
+      return undefined;
+    },
+    handleTabIndex(cellDate) {
+      const date = createDate(cellDate, 0);
+      return this.isDisabled(date) ? -1 : 0;
     },
   },
 };
diff --git a/src/date-picker.js b/src/date-picker.js
index 31e106e7..a8c1ad06 100644
--- a/src/date-picker.js
+++ b/src/date-picker.js
@@ -354,6 +354,7 @@ export default {
     handleClear(evt) {
       evt.stopPropagation();
       this.clear();
+      this.$refs.input.focus();
     },
     handleConfirmDate() {
       const value = this.emitValue(this.currentValue);
@@ -380,6 +381,7 @@ export default {
       this.defaultOpen = false;
       this.$emit('close');
       this.$emit('update:open', false);
+      this.$refs.input.focus();
     },
     blur() {
       // when use slot input
@@ -428,10 +430,12 @@ export default {
     handleInputKeydown(evt) {
       const { keyCode } = evt;
       // Tab 9 or Enter 13
-      if (keyCode === 9) {
+      if (keyCode === 9 || keyCode === 27) {
         this.closePopup();
       } else if (keyCode === 13) {
         this.handleInputChange();
+      } else if (keyCode === 40) {
+        this.handleInputFocus();
       }
     },
     handleInputBlur(evt) {
@@ -468,7 +472,7 @@ export default {
       const { value, class: className, ...attrs } = props;
       const events = {
         keydown: this.handleInputKeydown,
-        focus: this.handleInputFocus,
+        focus: this.handleMouseEnter,
         blur: this.handleInputBlur,
         input: this.handleInputInput,
         change: this.handleInputChange,
@@ -493,9 +497,15 @@ export default {
         >
           {input}
           {this.showClearIcon ? (
-            <i class={`${prefixClass}-icon-clear`} onClick={this.handleClear}>
-              {this.renderSlot('icon-clear', <IconClose />)}
-            </i>
+            <button
+              class={`${prefixClass}-button-clear`}
+              aria-label="clear"
+              onClick={this.handleClear}
+            >
+              <i class={`${prefixClass}-icon-clear`}>
+                {this.renderSlot('icon-clear', <IconClose />)}
+              </i>
+            </button>
           ) : (
             <i class={`${prefixClass}-icon-calendar`}>
               {this.renderSlot('icon-calendar', calendarIcon)}
diff --git a/src/locale/en.js b/src/locale/en.js
index 7cf55ef5..399ec0bb 100644
--- a/src/locale/en.js
+++ b/src/locale/en.js
@@ -5,6 +5,12 @@ const lang = {
   yearFormat: 'YYYY',
   monthFormat: 'MMM',
   monthBeforeYear: true,
+  next: 'Next Page',
+  prev: 'Previous Page',
+  nextYear: 'Next Year',
+  prevMonth: 'Previous Month',
+  nextMonth: 'Next Month',
+  prevYear: 'Previous Year',
 };
 
 export default lang;
diff --git a/src/popup.vue b/src/popup.vue
index 731adf6d..63dc1968 100644
--- a/src/popup.vue
+++ b/src/popup.vue
@@ -1,9 +1,13 @@
 <template>
-  <transition :name="`${prefixClass}-zoom-in-down`">
+  <transition :name="`${prefixClass}-zoom-in-down`" @after-enter="afterAnimateIn">
     <div
       v-if="visible"
+      ref="datePickerContainer"
+      role="application"
+      tabindex="-1"
       :class="`${prefixClass}-datepicker-main ${prefixClass}-datepicker-popup`"
       :style="{ top, left, position: 'absolute' }"
+      @keydown.esc="closePopUp"
     >
       <slot></slot>
     </div>
@@ -75,6 +79,9 @@ export default {
     window.removeEventListener('resize', this._displayPopup);
   },
   methods: {
+    afterAnimateIn() {
+      this.$refs.datePickerContainer.focus();
+    },
     handleClickOutside(evt) {
       if (!this.visible) return;
       const { target } = evt;
@@ -96,6 +103,9 @@ export default {
       this.left = left;
       this.top = top;
     },
+    closePopUp(evt) {
+      this.$emit('clickoutside', evt);
+    },
   },
 };
 </script>
diff --git a/src/style/btn.scss b/src/style/btn.scss
index f8e90e95..b8c219b7 100644
--- a/src/style/btn.scss
+++ b/src/style/btn.scss
@@ -9,7 +9,6 @@
   margin: 0;
   cursor: pointer;
   background-color: transparent;
-  outline: none;
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   color: $default-color;
@@ -28,6 +27,11 @@
 .#{$namespace}-btn-text {
   border: 0;
   padding: 0 4px;
-  text-align: left;
+  text-align: center;
   line-height: inherit;
+  min-width: 32px;
+
+  &:focus-visible {
+    outline-offset: -1px;
+  }
 }
diff --git a/src/style/index.scss b/src/style/index.scss
index 6ba834cc..728129d6 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -63,8 +63,23 @@
   }
 }
 
-.#{$namespace}-icon-calendar,
-.#{$namespace}-icon-clear {
+
+.#{$namespace}-button-clear{
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  background: #fff;
+  transform: translateY(-50%);
+  border: none;
+  color: rgba(0, 0, 0, 0.5);
+
+  &:hover,
+  &:focus {
+    color: rgba(0, 0, 0, 0.8);
+  }
+}
+
+.#{$namespace}-icon-calendar {
   position: absolute;
   top: 50%;
   right: 8px;
@@ -75,18 +90,16 @@
   vertical-align: middle;
 }
 
-.#{$namespace}-icon-clear {
-  cursor: pointer;
-  &:hover {
-    color: rgba(0, 0, 0, 0.8);
-  }
-}
 
 .#{$namespace}-datepicker-main {
   font: 14px/1.5 'Helvetica Neue', Helvetica, Arial, 'Microsoft Yahei', sans-serif;
   color: $default-color;
   background-color: #fff;
   border: 1px solid $border-color;
+
+  &:focus{
+    outline: none;
+  }
 }
 
 .#{$namespace}-datepicker-popup {
@@ -154,15 +167,8 @@
   line-height: 34px;
   text-align: center;
   overflow: hidden;
-}
-
-.#{$namespace}-btn-icon-left,
-.#{$namespace}-btn-icon-double-left {
-  float: left;
-}
-.#{$namespace}-btn-icon-right,
-.#{$namespace}-btn-icon-double-right {
-  float: right;
+  display: flex;
+  justify-content: space-between;
 }
 
 .#{$namespace}-calendar-header-label {
@@ -200,6 +206,9 @@
       color: $disabled-color;
       background-color: $disabled-background-color;
     }
+    &.focus {
+      outline: -webkit-focus-ring-color auto 1px;
+    }
   }
 }
 
diff --git a/src/time/list-columns.vue b/src/time/list-columns.vue
index c91634ff..3441906b 100644
--- a/src/time/list-columns.vue
+++ b/src/time/list-columns.vue
@@ -6,12 +6,17 @@
         :data-type="col.type"
         :data-index="i"
         @click="handleSelect"
+        @keydown.enter="handleSelect"
       >
         <li
           v-for="(item, j) in col.list"
           :key="item.value"
+          :ref="`item-${i}-${j}`"
+          :tabindex="isDisabledTime(item.value, col.type) ? '-1' : '0'"
           :data-index="j"
           :class="[`${prefixClass}-time-item`, getClasses(item.value, col.type)]"
+          @keydown.left.prevent="handleArrowLeft(i, j)"
+          @keydown.right.prevent="handleArrowRight(i, j)"
         >
           {{ item.text }}
         </li>
@@ -82,6 +87,10 @@ export default {
       type: Function,
       default: () => [],
     },
+    isDisabledTime: {
+      type: Function,
+      default: () => false,
+    },
     hourOptions: Array,
     minuteOptions: Array,
     secondOptions: Array,
@@ -173,6 +182,24 @@ export default {
         return { text, value };
       });
     },
+    handleArrowLeft(col, row) {
+      if (col <= 0) {
+        return;
+      }
+      const ref = this.$refs[`item-${col - 1}-${row}`]?.[0];
+      if (ref) {
+        ref.focus();
+      }
+    },
+    handleArrowRight(col, row) {
+      if (col >= 2) {
+        return;
+      }
+      const ref = this.$refs[`item-${col + 1}-${row}`]?.[0];
+      if (ref) {
+        ref.focus();
+      }
+    },
     scrollToSelected(duration) {
       const elements = this.$el.querySelectorAll('.active');
       for (let i = 0; i < elements.length; i++) {
diff --git a/src/time/list-options.vue b/src/time/list-options.vue
index c41d6e30..be182a3e 100644
--- a/src/time/list-options.vue
+++ b/src/time/list-options.vue
@@ -3,8 +3,10 @@
     <div
       v-for="item in list"
       :key="item.value"
+      :tabindex="isDisabled(item.value) ? '-1' : '0'"
       :class="[`${prefixClass}-time-option`, getClasses(item.value)]"
       @click="handleSelect(item.value)"
+      @keydown.enter="handleSelect(item.value)"
     >
       {{ item.text }}
     </div>
@@ -63,6 +65,10 @@ export default {
       type: Function,
       default: () => [],
     },
+    isDisabled: {
+      type: Function,
+      default: () => false,
+    },
   },
   computed: {
     list() {
diff --git a/src/time/time-panel.vue b/src/time/time-panel.vue
index bd03876d..3484dc57 100644
--- a/src/time/time-panel.vue
+++ b/src/time/time-panel.vue
@@ -2,6 +2,7 @@
   <div :class="`${prefixClass}-time`">
     <div v-if="showTimeHeader" :class="`${prefixClass}-time-header`">
       <button
+        ref="dateButton"
         type="button"
         :class="`${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-time-header-title`"
         @click="handleClickTitle"
@@ -14,6 +15,7 @@
         v-if="timePickerOptions"
         :date="innerValue"
         :get-classes="getClasses"
+        :is-disabled="isDisabled"
         :options="timePickerOptions"
         :format="innerForamt"
         @select="handleSelect"
@@ -21,6 +23,7 @@
       <list-columns
         v-else
         :date="innerValue"
+        :is-disabled-time="isDisabled"
         :get-classes="getClasses"
         :hour-options="hourOptions"
         :minute-options="minuteOptions"
@@ -157,6 +160,14 @@ export default {
       },
     },
   },
+  mounted() {
+    const ref = this.$refs.dateButton;
+    if (ref) {
+      setTimeout(() => {
+        ref.focus();
+      }, 300);
+    }
+  },
   methods: {
     formatDate(date, fmt) {
       return format(date, fmt, { locale: this.getLocale().formatLocale });