diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue
index 8803b493..4040dfe4 100644
--- a/src/components/DateInput.vue
+++ b/src/components/DateInput.vue
@@ -2,14 +2,14 @@
   <div :class="{ 'input-group': bootstrapStyling }">
     <slot name="beforeDateInput" />
     <!-- Calendar Button -->
-    <span
+    <button
       v-if="calendarButton"
       :class="{
         'input-group-prepend': bootstrapStyling,
         'calendar-btn-disabled': disabled,
       }"
       class="vdp-datepicker__calendar-button"
-      @click="toggleCalendar"
+      @click="toggleTrapCalendar"
     >
       <span :class="{ 'input-group-text': bootstrapStyling }">
         <slot name="calendarBtn">
@@ -19,7 +19,7 @@
           </i>
         </slot>
       </span>
-    </span>
+    </button>
     <!-- Input -->
     <input
       :id="id"
@@ -64,10 +64,11 @@
 <script>
 import makeDateUtils from '~/utils/DateUtils'
 import inputProps from '~/mixins/inputProps.vue'
+import trapFocus from '~/mixins/trapFocus.vue'
 
 export default {
   name: 'DateInput',
-  mixins: [inputProps],
+  mixins: [inputProps, trapFocus],
   props: {
     isOpen: {
       type: Boolean,
@@ -227,6 +228,14 @@ export default {
       }
       this.$emit(this.isOpen ? 'close-calendar' : 'show-calendar')
     },
+    toggleTrapCalendar() {
+      this.toggleCalendar()
+      if (!this.isOpen) {
+        this.$nextTick().then(() => {
+          this.trapFocus(this.$parent.$refs.popup.$el)
+        })
+      }
+    },
   },
 }
 </script>
diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
index ee4ce12b..47946516 100644
--- a/src/components/Datepicker.vue
+++ b/src/components/Datepicker.vue
@@ -1,5 +1,9 @@
 <template>
-  <div :class="[wrapperClass, isRtl ? 'rtl' : '']" class="vdp-datepicker">
+  <div
+    :class="[wrapperClass, isRtl ? 'rtl' : '']"
+    class="vdp-datepicker"
+    @keyup.escape="close()"
+  >
     <DateInput
       :id="id"
       :autofocus="autofocus"
diff --git a/src/mixins/trapFocus.vue b/src/mixins/trapFocus.vue
new file mode 100644
index 00000000..9ca2ebdc
--- /dev/null
+++ b/src/mixins/trapFocus.vue
@@ -0,0 +1,58 @@
+<script>
+export default {
+  name: 'TrapFocus',
+  data() {
+    return {
+      fistFocusable: null,
+      focusableElements: null,
+      lastFocusable: null,
+      trappedElement: null,
+    }
+  },
+  methods: {
+    findFocusable(el) {
+      return el.querySelectorAll(
+        'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, [tabindex="0"], [contenteditable]',
+      )
+    },
+    keyboardHandler(e) {
+      if (e.key === 'Tab' || e.code === 'Tab') {
+        if (e.shiftKey && document.activeElement === this.fistFocusable) {
+          e.preventDefault()
+          this.lastFocusable.focus()
+        }
+        if (!e.shiftKey && document.activeElement === this.lastFocusable) {
+          e.preventDefault()
+          this.fistFocusable.focus()
+        }
+      }
+    },
+    trapFocus(target = null) {
+      this.$nextTick(function () {
+        if (target) {
+          this.focusableElements = this.findFocusable(target)
+          if (this.focusableElements.length > 0) {
+            [this.fistFocusable] = this.focusableElements
+            this.lastFocusable = this.focusableElements[
+              this.focusableElements.length - 1
+            ]
+            this.fistFocusable.focus()
+
+            this.trappedElement = target
+            this.trappedElement.addEventListener(
+              'keydown',
+              this.keyboardHandler,
+            )
+          }
+        }
+        if (!target && this.trappedElement) {
+          this.trappedElement.removeEventListener(
+            'keydown',
+            this.keyboardHandler,
+          )
+        }
+      })
+    },
+  },
+}
+</script>