From 3a450d7c2b58f7725cc77db8d6d56b4da9ff7492 Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Mon, 8 Feb 2021 11:20:45 -0500
Subject: [PATCH 01/22] Change span to button to allow element to have focus

---
 src/components/DateInput.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue
index 8803b493..1fb998c1 100644
--- a/src/components/DateInput.vue
+++ b/src/components/DateInput.vue
@@ -2,7 +2,7 @@
   <div :class="{ 'input-group': bootstrapStyling }">
     <slot name="beforeDateInput" />
     <!-- Calendar Button -->
-    <span
+    <button
       v-if="calendarButton"
       :class="{
         'input-group-prepend': bootstrapStyling,
@@ -19,7 +19,7 @@
           </i>
         </slot>
       </span>
-    </span>
+    </button>
     <!-- Input -->
     <input
       :id="id"

From 03fa142643ebaa5e30514a7f9cb104946bf24ddf Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Mon, 8 Feb 2021 11:22:08 -0500
Subject: [PATCH 02/22] Adds dynamic open/close datepicker aria-label

---
 src/components/DateInput.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue
index 1fb998c1..d181ab7b 100644
--- a/src/components/DateInput.vue
+++ b/src/components/DateInput.vue
@@ -4,6 +4,7 @@
     <!-- Calendar Button -->
     <button
       v-if="calendarButton"
+      :aria-label="`${isOpen ? 'Close' : 'Open'} Datepicker`"
       :class="{
         'input-group-prepend': bootstrapStyling,
         'calendar-btn-disabled': disabled,

From 32939f31c02bd652e347eeb9358fb1d6f1328bec Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Mon, 8 Feb 2021 11:29:12 -0500
Subject: [PATCH 03/22] Update test spec to not look for calendar button as a
 specific element

---
 test/unit/specs/Datepicker/Datepicker.spec.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/unit/specs/Datepicker/Datepicker.spec.js b/test/unit/specs/Datepicker/Datepicker.spec.js
index 54a509c5..2caf3804 100755
--- a/test/unit/specs/Datepicker/Datepicker.spec.js
+++ b/test/unit/specs/Datepicker/Datepicker.spec.js
@@ -68,7 +68,7 @@ describe('Datepicker mounted', () => {
       calendarButton: true,
     })
 
-    const calendarButton = wrapper.find('span.vdp-datepicker__calendar-button')
+    const calendarButton = wrapper.find('.vdp-datepicker__calendar-button')
 
     await calendarButton.trigger('click')
     expect(wrapper.vm.isOpen).toBeTruthy()
@@ -83,7 +83,7 @@ describe('Datepicker mounted', () => {
       showCalendarOnFocus: true,
     })
 
-    const calendarButton = wrapper.find('span.vdp-datepicker__calendar-button')
+    const calendarButton = wrapper.find('.vdp-datepicker__calendar-button')
 
     await calendarButton.trigger('click')
     expect(wrapper.vm.isOpen).toBeTruthy()
@@ -99,7 +99,7 @@ describe('Datepicker mounted', () => {
     })
 
     const input = wrapper.find('input')
-    const calendarButton = wrapper.find('span.vdp-datepicker__calendar-button')
+    const calendarButton = wrapper.find('.vdp-datepicker__calendar-button')
 
     await input.trigger('focus')
     expect(wrapper.vm.isOpen).toBeTruthy()

From a1bfb61e864967fe9ba0dbd68ba3089857481cc6 Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Mon, 8 Feb 2021 11:37:32 -0500
Subject: [PATCH 04/22] Adds and implements button reset styles to maintain
 existing appearance

---
 src/styles/mixins.scss | 22 ++++++++++++++++++++++
 src/styles/style.scss  |  3 +++
 2 files changed, 25 insertions(+)
 create mode 100644 src/styles/mixins.scss

diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
new file mode 100644
index 00000000..97b42caa
--- /dev/null
+++ b/src/styles/mixins.scss
@@ -0,0 +1,22 @@
+@mixin button-reset {
+	background: transparent;
+	border: none;
+	margin: 0;
+	overflow: visible;
+	padding: 0;
+	width: auto;
+
+	/* Inherit font & color from ancestor */
+	color: inherit;
+	font: inherit;
+
+	/* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
+	line-height: normal;
+
+	/* Corrects font smoothing for webkit */
+	-webkit-font-smoothing: inherit;
+	-moz-osx-font-smoothing: inherit;
+
+	/* Corrects inability to style clickable `input` types in iOS */
+	-webkit-appearance: none;
+}
\ No newline at end of file
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 54081a69..55743ebc 100755
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -1,3 +1,5 @@
+@import "mixins";
+
 .rtl {
   direction: rtl;
 }
@@ -196,6 +198,7 @@
 
 .vdp-datepicker__clear-button,
 .vdp-datepicker__calendar-button {
+  @include button-reset;
   cursor: pointer;
   font-style: normal;
 

From b9c542eb03900f6e907c3525e3ce6c927bc7b29f Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Wed, 10 Feb 2021 13:04:18 -0500
Subject: [PATCH 05/22] Set background to none to unset default styling

---
 src/styles/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/style.scss b/src/styles/style.scss
index 55743ebc..bb23fa08 100755
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -118,6 +118,7 @@
   }
 
   .cell {
+    background: none;
     border: 1px solid transparent;
     display: inline-block;
     height: 40px;

From 6c8b967318e763acff6af7a5dc84f9ae6768f6e7 Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Wed, 10 Feb 2021 13:05:26 -0500
Subject: [PATCH 06/22] Use button instead of span

---
 src/components/PickerDay.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PickerDay.vue b/src/components/PickerDay.vue
index 73748171..4b952090 100644
--- a/src/components/PickerDay.vue
+++ b/src/components/PickerDay.vue
@@ -20,7 +20,7 @@
       <span v-for="d in daysOfWeek" :key="d.timestamp" class="cell day-header">
         {{ d }}
       </span>
-      <span
+      <button
         v-for="day in days"
         :key="day.timestamp"
         class="cell day"
@@ -28,7 +28,7 @@
         @click="selectDate(day)"
       >
         {{ dayCellContent(day) }}
-      </span>
+      </button>
     </div>
     <slot name="calendarFooterDay" />
   </div>

From 19e96160364e94cb86ec2d5f7a5087d8eda60e5a Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Wed, 10 Feb 2021 13:10:28 -0500
Subject: [PATCH 07/22] Adds dynamic aria-label using LocaleDateString

---
 src/components/PickerDay.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/components/PickerDay.vue b/src/components/PickerDay.vue
index 4b952090..4101796c 100644
--- a/src/components/PickerDay.vue
+++ b/src/components/PickerDay.vue
@@ -22,6 +22,7 @@
       </span>
       <button
         v-for="day in days"
+        :aria-label="`Select ${localDateString(day)}`"
         :key="day.timestamp"
         class="cell day"
         :class="dayClasses(day)"
@@ -301,6 +302,16 @@ export default {
         this.selectedDate && this.utils.compareDates(this.selectedDate, dObj)
       )
     },
+    localDateString(day) {
+      const options = {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      }
+      
+      return new Date(day.timestamp).toLocaleDateString(undefined, options)
+    },
     /**
      * Defines the objects within the days array
      * @param  {id}  id

From f3ea70dca14fa045efe43e0bf01a543ec79fc9c0 Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Wed, 10 Feb 2021 13:14:10 -0500
Subject: [PATCH 08/22] Use button instead of span, adds dynamic aria-label
 using LocaleDateString

---
 src/components/PickerMonth.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/PickerMonth.vue b/src/components/PickerMonth.vue
index 8a6e3922..e5f8c915 100644
--- a/src/components/PickerMonth.vue
+++ b/src/components/PickerMonth.vue
@@ -16,15 +16,16 @@
       <slot slot="nextIntervalBtn" name="nextIntervalBtn" />
       <slot slot="prevIntervalBtn" name="prevIntervalBtn" />
     </PickerHeader>
-    <span
+    <button
       v-for="month in months"
+      :aria-label="`Select ${localDateString(month)}`"
       :key="month.timestamp"
       :class="{ selected: month.isSelected, disabled: month.isDisabled }"
       class="cell month"
       @click.stop="selectMonth(month)"
     >
       {{ month.month }}
-    </span>
+    </button>
     <slot name="calendarFooterMonth" />
   </div>
 </template>
@@ -128,6 +129,14 @@ export default {
         month === this.utils.getMonth(this.selectedDate)
       )
     },
+    localDateString(day) {
+      const options = {
+        year: 'numeric',
+        month: 'long',
+      }
+      
+      return new Date(day.timestamp).toLocaleDateString(undefined, options)
+    },
     /**
      * Increments the year
      */

From 3c61064e572c8299e7ead61d77f470303d9b20cd Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Wed, 10 Feb 2021 15:04:40 -0500
Subject: [PATCH 09/22] Use month instead of day for parameter

---
 src/components/PickerMonth.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PickerMonth.vue b/src/components/PickerMonth.vue
index e5f8c915..ec099588 100644
--- a/src/components/PickerMonth.vue
+++ b/src/components/PickerMonth.vue
@@ -129,13 +129,13 @@ export default {
         month === this.utils.getMonth(this.selectedDate)
       )
     },
-    localDateString(day) {
+    localDateString(month) {
       const options = {
         year: 'numeric',
         month: 'long',
       }
       
-      return new Date(day.timestamp).toLocaleDateString(undefined, options)
+      return new Date(month.timestamp).toLocaleDateString(undefined, options)
     },
     /**
      * Increments the year

From 1b586e9856605d9469ebdb47d7c608e8050eed96 Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Wed, 10 Feb 2021 15:04:54 -0500
Subject: [PATCH 10/22] Use button instead of span, adds dynamic aria-label
 using LocaleDateString

---
 src/components/PickerYear.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/PickerYear.vue b/src/components/PickerYear.vue
index 108d6627..614e7cf5 100644
--- a/src/components/PickerYear.vue
+++ b/src/components/PickerYear.vue
@@ -13,15 +13,16 @@
       <slot slot="prevIntervalBtn" name="prevIntervalBtn" />
     </PickerHeader>
 
-    <span
+    <button
       v-for="year in years"
+      :aria-label="`Select ${localDateString(year)}`"
       :key="year.timestamp"
       :class="{ selected: year.isSelected, disabled: year.isDisabled }"
       class="cell year"
       @click.stop="selectYear(year)"
     >
       {{ year.year }}
-    </span>
+    </button>
     <slot name="calendarFooterYear" />
   </div>
 </template>
@@ -146,6 +147,13 @@ export default {
         this.selectedDate && year === this.utils.getFullYear(this.selectedDate)
       )
     },
+    localDateString(year) {
+      const options = {
+        year: 'numeric',
+      }
+      
+      return new Date(year.timestamp).toLocaleDateString(undefined, options)
+    },
     /**
      * Increments the decade
      */

From ebf4fd2b2644878fa87df10d26c9bb0cbe760c6b Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Wed, 10 Feb 2021 15:13:38 -0500
Subject: [PATCH 11/22] Adds aria-expanded

---
 src/components/DateInput.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue
index d181ab7b..6b75e85c 100644
--- a/src/components/DateInput.vue
+++ b/src/components/DateInput.vue
@@ -4,6 +4,7 @@
     <!-- Calendar Button -->
     <button
       v-if="calendarButton"
+      :aria-expanded="`${isOpen ? 'true' : 'false'}`"
       :aria-label="`${isOpen ? 'Close' : 'Open'} Datepicker`"
       :class="{
         'input-group-prepend': bootstrapStyling,

From d6c963e746e60a79fe3eea684f3cc3b54fe27570 Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Wed, 10 Feb 2021 15:27:01 -0500
Subject: [PATCH 12/22] Adds uid prop, consumed for aria-controls

---
 src/components/DateInput.vue  | 5 +++++
 src/components/Datepicker.vue | 2 ++
 2 files changed, 7 insertions(+)

diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue
index 6b75e85c..80ce4b98 100644
--- a/src/components/DateInput.vue
+++ b/src/components/DateInput.vue
@@ -4,6 +4,7 @@
     <!-- Calendar Button -->
     <button
       v-if="calendarButton"
+      :aria-controls="`vdp-datepicker-${uid}`"
       :aria-expanded="`${isOpen ? 'true' : 'false'}`"
       :aria-label="`${isOpen ? 'Close' : 'Open'} Datepicker`"
       :class="{
@@ -89,6 +90,10 @@ export default {
         return {}
       },
     },
+    uid: {
+      type: String,
+      default: null
+    }
   },
   data() {
     const constructedDateUtils = makeDateUtils(this.useUtc)
diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
index ee4ce12b..9c7defec 100644
--- a/src/components/Datepicker.vue
+++ b/src/components/Datepicker.vue
@@ -28,6 +28,7 @@
       :tabindex="tabindex"
       :translation="translation"
       :typeable="typeable"
+      :uid="_uid"
       :use-utc="useUtc"
       @blur="onBlur"
       @clear-date="clearDate"
@@ -54,6 +55,7 @@
         v-if="isOpen"
         ref="datepicker"
         :class="pickerClasses"
+        :id="`vdp-datepicker-${_uid}`"
         @mousedown.prevent
       >
         <template v-if="isOpen">

From dfee9a58518412950906d0088dc445231871afef Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Wed, 10 Feb 2021 16:04:58 -0500
Subject: [PATCH 13/22] Fix uid prop type

---
 src/components/DateInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue
index 80ce4b98..65530463 100644
--- a/src/components/DateInput.vue
+++ b/src/components/DateInput.vue
@@ -91,7 +91,7 @@ export default {
       },
     },
     uid: {
-      type: String,
+      type: Number,
       default: null
     }
   },

From 9a81f790c7092b605cede42d13daa47decce2a23 Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Wed, 10 Feb 2021 16:11:15 -0500
Subject: [PATCH 14/22] Implements previous and next aria-labels

---
 src/components/PickerDay.vue    | 1 +
 src/components/PickerHeader.vue | 8 +++++++-
 src/components/PickerMonth.vue  | 1 +
 src/components/PickerYear.vue   | 1 +
 4 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/PickerDay.vue b/src/components/PickerDay.vue
index 4101796c..593b8411 100644
--- a/src/components/PickerDay.vue
+++ b/src/components/PickerDay.vue
@@ -5,6 +5,7 @@
       :config="headerConfig"
       :next="nextMonth"
       :previous="previousMonth"
+      control-label="month"
     >
       <span
         :class="allowedToShowView('month') ? 'up' : ''"
diff --git a/src/components/PickerHeader.vue b/src/components/PickerHeader.vue
index 4253abf6..e2b7608f 100644
--- a/src/components/PickerHeader.vue
+++ b/src/components/PickerHeader.vue
@@ -2,6 +2,7 @@
   <header v-if="config.showHeader">
     <span
       class="prev"
+      :aria-label="`${config.isRtl ? 'next' : 'previous'} ${controlLabel}`"
       :class="{ disabled: isLeftNavDisabled }"
       @click="config.isRtl ? next() : previous()"
     >
@@ -12,6 +13,7 @@
     <slot />
     <span
       class="next"
+      :aria-label="`${config.isRtl ? 'previous' : 'next'} ${controlLabel}`"
       :class="{ disabled: isRightNavDisabled }"
       @click="config.isRtl ? previous() : next()"
     >
@@ -37,6 +39,10 @@ export default {
         }
       },
     },
+    controlLabel: {
+      type: String,
+      default: null,
+    },
     next: {
       type: Function,
       required: true,
@@ -44,7 +50,7 @@ export default {
     previous: {
       type: Function,
       required: true,
-    },
+    }
   },
   computed: {
     /**
diff --git a/src/components/PickerMonth.vue b/src/components/PickerMonth.vue
index ec099588..a85bf425 100644
--- a/src/components/PickerMonth.vue
+++ b/src/components/PickerMonth.vue
@@ -5,6 +5,7 @@
       :config="headerConfig"
       :next="nextYear"
       :previous="previousYear"
+       control-label="year"
     >
       <span
         class="month__year_btn"
diff --git a/src/components/PickerYear.vue b/src/components/PickerYear.vue
index 614e7cf5..92fcd035 100644
--- a/src/components/PickerYear.vue
+++ b/src/components/PickerYear.vue
@@ -5,6 +5,7 @@
       :config="headerConfig"
       :next="nextDecade"
       :previous="previousDecade"
+       control-label="decade"
     >
       <span>
         {{ pageTitleYear }}

From ce09c216f6af89c9d2012b9c76b35fae3c7b3dfe Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Wed, 10 Feb 2021 16:12:56 -0500
Subject: [PATCH 15/22] Code formatting

---
 src/components/PickerMonth.vue | 2 +-
 src/components/PickerYear.vue  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PickerMonth.vue b/src/components/PickerMonth.vue
index a85bf425..e239a9ee 100644
--- a/src/components/PickerMonth.vue
+++ b/src/components/PickerMonth.vue
@@ -5,7 +5,7 @@
       :config="headerConfig"
       :next="nextYear"
       :previous="previousYear"
-       control-label="year"
+      control-label="year"
     >
       <span
         class="month__year_btn"
diff --git a/src/components/PickerYear.vue b/src/components/PickerYear.vue
index 92fcd035..5ac43a44 100644
--- a/src/components/PickerYear.vue
+++ b/src/components/PickerYear.vue
@@ -5,7 +5,7 @@
       :config="headerConfig"
       :next="nextDecade"
       :previous="previousDecade"
-       control-label="decade"
+      control-label="decade"
     >
       <span>
         {{ pageTitleYear }}

From 014b93a2490147124438baa3355457746a5d400f Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Wed, 10 Feb 2021 16:20:01 -0500
Subject: [PATCH 16/22] Change prev and next buttons to buttons

---
 src/components/PickerHeader.vue | 8 ++++----
 src/styles/style.scss           | 2 ++
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/PickerHeader.vue b/src/components/PickerHeader.vue
index e2b7608f..20aeb275 100644
--- a/src/components/PickerHeader.vue
+++ b/src/components/PickerHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <header v-if="config.showHeader">
-    <span
+    <button
       class="prev"
       :aria-label="`${config.isRtl ? 'next' : 'previous'} ${controlLabel}`"
       :class="{ disabled: isLeftNavDisabled }"
@@ -9,9 +9,9 @@
       <slot name="prevIntervalBtn">
         <span class="default">&lt;</span>
       </slot>
-    </span>
+    </button>
     <slot />
-    <span
+    <button
       class="next"
       :aria-label="`${config.isRtl ? 'previous' : 'next'} ${controlLabel}`"
       :class="{ disabled: isRightNavDisabled }"
@@ -20,7 +20,7 @@
       <slot name="nextIntervalBtn">
         <span class="default">&gt;</span>
       </slot>
-    </span>
+    </button>
   </header>
 </template>
 
diff --git a/src/styles/style.scss b/src/styles/style.scss
index bb23fa08..58d0d922 100755
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -46,6 +46,8 @@
 
     .prev,
     .next {
+      background: none;
+      border: none;
       float: left;
       max-height: 40px;
       position: relative;

From 19320e48047fdb6f20fd00fce0ccf57518c66c1d Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Wed, 10 Feb 2021 16:35:33 -0500
Subject: [PATCH 17/22] Use background transparent instead of none

---
 src/styles/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/style.scss b/src/styles/style.scss
index 58d0d922..de0b9049 100755
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -46,7 +46,7 @@
 
     .prev,
     .next {
-      background: none;
+      background: transparent;
       border: none;
       float: left;
       max-height: 40px;
@@ -120,7 +120,7 @@
   }
 
   .cell {
-    background: none;
+    background: transparent;
     border: 1px solid transparent;
     display: inline-block;
     height: 40px;

From 1aacaee813d5acb87a891add9d026513ed12b4ad Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Wed, 10 Feb 2021 16:45:15 -0500
Subject: [PATCH 18/22] Lint fixes

---
 src/components/DateInput.vue    | 4 ++--
 src/components/Datepicker.vue   | 2 +-
 src/components/PickerDay.vue    | 2 +-
 src/components/PickerHeader.vue | 2 +-
 src/components/PickerMonth.vue  | 2 +-
 src/components/PickerYear.vue   | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue
index 65530463..aa334bdd 100644
--- a/src/components/DateInput.vue
+++ b/src/components/DateInput.vue
@@ -92,8 +92,8 @@ export default {
     },
     uid: {
       type: Number,
-      default: null
-    }
+      default: null,
+    },
   },
   data() {
     const constructedDateUtils = makeDateUtils(this.useUtc)
diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
index 9c7defec..8a9e7d2e 100644
--- a/src/components/Datepicker.vue
+++ b/src/components/Datepicker.vue
@@ -54,8 +54,8 @@
       <div
         v-if="isOpen"
         ref="datepicker"
-        :class="pickerClasses"
         :id="`vdp-datepicker-${_uid}`"
+        :class="pickerClasses"
         @mousedown.prevent
       >
         <template v-if="isOpen">
diff --git a/src/components/PickerDay.vue b/src/components/PickerDay.vue
index 593b8411..d5864ced 100644
--- a/src/components/PickerDay.vue
+++ b/src/components/PickerDay.vue
@@ -23,8 +23,8 @@
       </span>
       <button
         v-for="day in days"
-        :aria-label="`Select ${localDateString(day)}`"
         :key="day.timestamp"
+        :aria-label="`Select ${localDateString(day)}`"
         class="cell day"
         :class="dayClasses(day)"
         @click="selectDate(day)"
diff --git a/src/components/PickerHeader.vue b/src/components/PickerHeader.vue
index 20aeb275..34d290be 100644
--- a/src/components/PickerHeader.vue
+++ b/src/components/PickerHeader.vue
@@ -50,7 +50,7 @@ export default {
     previous: {
       type: Function,
       required: true,
-    }
+    },
   },
   computed: {
     /**
diff --git a/src/components/PickerMonth.vue b/src/components/PickerMonth.vue
index e239a9ee..6aa9f308 100644
--- a/src/components/PickerMonth.vue
+++ b/src/components/PickerMonth.vue
@@ -19,8 +19,8 @@
     </PickerHeader>
     <button
       v-for="month in months"
-      :aria-label="`Select ${localDateString(month)}`"
       :key="month.timestamp"
+      :aria-label="`Select ${localDateString(month)}`"
       :class="{ selected: month.isSelected, disabled: month.isDisabled }"
       class="cell month"
       @click.stop="selectMonth(month)"
diff --git a/src/components/PickerYear.vue b/src/components/PickerYear.vue
index 5ac43a44..dc956d65 100644
--- a/src/components/PickerYear.vue
+++ b/src/components/PickerYear.vue
@@ -16,8 +16,8 @@
 
     <button
       v-for="year in years"
-      :aria-label="`Select ${localDateString(year)}`"
       :key="year.timestamp"
+      :aria-label="`Select ${localDateString(year)}`"
       :class="{ selected: year.isSelected, disabled: year.isDisabled }"
       class="cell year"
       @click.stop="selectYear(year)"

From 8c6e4e4b0b401f6834fbdb499185e7f4492bf774 Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Wed, 10 Feb 2021 16:51:17 -0500
Subject: [PATCH 19/22] Lint fixes

---
 src/components/Datepicker.vue  | 2 +-
 src/components/PickerDay.vue   | 1 -
 src/components/PickerMonth.vue | 1 -
 src/components/PickerYear.vue  | 1 -
 4 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
index 8a9e7d2e..93cdae11 100644
--- a/src/components/Datepicker.vue
+++ b/src/components/Datepicker.vue
@@ -53,8 +53,8 @@
     >
       <div
         v-if="isOpen"
-        ref="datepicker"
         :id="`vdp-datepicker-${_uid}`"
+        ref="datepicker"
         :class="pickerClasses"
         @mousedown.prevent
       >
diff --git a/src/components/PickerDay.vue b/src/components/PickerDay.vue
index d5864ced..e7843e9c 100644
--- a/src/components/PickerDay.vue
+++ b/src/components/PickerDay.vue
@@ -310,7 +310,6 @@ export default {
         month: 'long',
         day: 'numeric',
       }
-      
       return new Date(day.timestamp).toLocaleDateString(undefined, options)
     },
     /**
diff --git a/src/components/PickerMonth.vue b/src/components/PickerMonth.vue
index 6aa9f308..98989400 100644
--- a/src/components/PickerMonth.vue
+++ b/src/components/PickerMonth.vue
@@ -135,7 +135,6 @@ export default {
         year: 'numeric',
         month: 'long',
       }
-      
       return new Date(month.timestamp).toLocaleDateString(undefined, options)
     },
     /**
diff --git a/src/components/PickerYear.vue b/src/components/PickerYear.vue
index dc956d65..78b22d16 100644
--- a/src/components/PickerYear.vue
+++ b/src/components/PickerYear.vue
@@ -152,7 +152,6 @@ export default {
       const options = {
         year: 'numeric',
       }
-      
       return new Date(year.timestamp).toLocaleDateString(undefined, options)
     },
     /**

From e143b535a9a125b92e925931523d263687df26b5 Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Tue, 23 Feb 2021 18:14:41 -0500
Subject: [PATCH 20/22] Adds format prop and formatDate method

---
 src/mixins/pickerMixin.vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/mixins/pickerMixin.vue b/src/mixins/pickerMixin.vue
index fe14bcc9..e55437ce 100644
--- a/src/mixins/pickerMixin.vue
+++ b/src/mixins/pickerMixin.vue
@@ -17,6 +17,10 @@ export default {
         return {}
       },
     },
+    format: {
+      type: [String, Function],
+      default: 'dd MMM yyyy',
+    },
     isRtl: {
       type: Boolean,
       default: false,
@@ -79,6 +83,15 @@ export default {
     },
   },
   methods: {
+    formatDate(date) {
+      return typeof this.format === 'function'
+        ? this.format(new Date(date.timestamp))
+        : this.utils.formatDate(
+            new Date(date.timestamp),
+            this.format,
+            this.translation,
+          )
+    },
     /**
      * Emit an event to show the month picker
      */

From f09273b8415ba01b25cd8d8bb3253bda158efda2 Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Tue, 23 Feb 2021 18:15:10 -0500
Subject: [PATCH 21/22] Add format argument to Datepicker

---
 src/components/Datepicker.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Datepicker.vue b/src/components/Datepicker.vue
index 93cdae11..68230938 100644
--- a/src/components/Datepicker.vue
+++ b/src/components/Datepicker.vue
@@ -66,6 +66,7 @@
             :day-cell-content="dayCellContent"
             :disabled-dates="disabledDates"
             :first-day-of-week="firstDayOfWeek"
+            :format="format"
             :highlighted="highlighted"
             :is-rtl="isRtl"
             :page-date="pageDate"

From c21ccfca02516c9d53382330ce8e76393c78ff45 Mon Sep 17 00:00:00 2001
From: Matt Thomas <mthomas@guggenheim.org>
Date: Tue, 23 Feb 2021 18:15:36 -0500
Subject: [PATCH 22/22] Implement use of format for aria-label

---
 src/components/PickerDay.vue   | 11 +----------
 src/components/PickerMonth.vue |  9 +--------
 src/components/PickerYear.vue  |  8 +-------
 3 files changed, 3 insertions(+), 25 deletions(-)

diff --git a/src/components/PickerDay.vue b/src/components/PickerDay.vue
index e7843e9c..20faebc8 100644
--- a/src/components/PickerDay.vue
+++ b/src/components/PickerDay.vue
@@ -24,7 +24,7 @@
       <button
         v-for="day in days"
         :key="day.timestamp"
-        :aria-label="`Select ${localDateString(day)}`"
+        :aria-label="`Select ${formatDate(day)}`"
         class="cell day"
         :class="dayClasses(day)"
         @click="selectDate(day)"
@@ -303,15 +303,6 @@ export default {
         this.selectedDate && this.utils.compareDates(this.selectedDate, dObj)
       )
     },
-    localDateString(day) {
-      const options = {
-        weekday: 'long',
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-      }
-      return new Date(day.timestamp).toLocaleDateString(undefined, options)
-    },
     /**
      * Defines the objects within the days array
      * @param  {id}  id
diff --git a/src/components/PickerMonth.vue b/src/components/PickerMonth.vue
index 98989400..f4be2906 100644
--- a/src/components/PickerMonth.vue
+++ b/src/components/PickerMonth.vue
@@ -20,7 +20,7 @@
     <button
       v-for="month in months"
       :key="month.timestamp"
-      :aria-label="`Select ${localDateString(month)}`"
+      :aria-label="`Select ${formatDate(month)}`"
       :class="{ selected: month.isSelected, disabled: month.isDisabled }"
       class="cell month"
       @click.stop="selectMonth(month)"
@@ -130,13 +130,6 @@ export default {
         month === this.utils.getMonth(this.selectedDate)
       )
     },
-    localDateString(month) {
-      const options = {
-        year: 'numeric',
-        month: 'long',
-      }
-      return new Date(month.timestamp).toLocaleDateString(undefined, options)
-    },
     /**
      * Increments the year
      */
diff --git a/src/components/PickerYear.vue b/src/components/PickerYear.vue
index 78b22d16..cbaf1fcd 100644
--- a/src/components/PickerYear.vue
+++ b/src/components/PickerYear.vue
@@ -17,7 +17,7 @@
     <button
       v-for="year in years"
       :key="year.timestamp"
-      :aria-label="`Select ${localDateString(year)}`"
+      :aria-label="`Select ${formatDate(year)}`"
       :class="{ selected: year.isSelected, disabled: year.isDisabled }"
       class="cell year"
       @click.stop="selectYear(year)"
@@ -148,12 +148,6 @@ export default {
         this.selectedDate && year === this.utils.getFullYear(this.selectedDate)
       )
     },
-    localDateString(year) {
-      const options = {
-        year: 'numeric',
-      }
-      return new Date(year.timestamp).toLocaleDateString(undefined, options)
-    },
     /**
      * Increments the decade
      */