Aria attributes

src/components/DateInput.vue

@@ -2,8 +2,11 @@
   <div :class="{ 'input-group': bootstrapStyling }">
     <slot name="beforeDateInput" />
     <!-- Calendar Button -->
-    <span
+    <button
       v-if="calendarButton"
+      :aria-controls="`vdp-datepicker-${uid}`"
+      :aria-expanded="`${isOpen ? 'true' : 'false'}`"
+      :aria-label="`${isOpen ? 'Close' : 'Open'} Datepicker`"
       :class="{
         'input-group-prepend': bootstrapStyling,
         'calendar-btn-disabled': disabled,
@@ -19,7 +22,7 @@
           </i>
         </slot>
       </span>
-    </span>
+    </button>
     <!-- Input -->
     <input
       :id="id"
@@ -87,6 +90,10 @@ export default {
         return {}
       },
     },
+    uid: {
+      type: Number,
+      default: null,
+    },
   },
   data() {
     const constructedDateUtils = makeDateUtils(this.useUtc)

src/components/Datepicker.vue

@@ -28,6 +28,7 @@
       :tabindex="tabindex"
       :translation="translation"
       :typeable="typeable"
+      :uid="_uid"
       :use-utc="useUtc"
       @blur="onBlur"
       @clear-date="clearDate"
@@ -52,6 +53,7 @@
     >
       <div
         v-if="isOpen"
+        :id="`vdp-datepicker-${_uid}`"
         ref="datepicker"
         :class="pickerClasses"
         @mousedown.prevent
@@ -64,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"

src/components/PickerDay.vue

@@ -5,6 +5,7 @@
       :config="headerConfig"
       :next="nextMonth"
       :previous="previousMonth"
+      control-label="month"
     >
       <span
         :class="allowedToShowView('month') ? 'up' : ''"
@@ -20,15 +21,16 @@
       <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"
+        :aria-label="`Select ${formatDate(day)}`"
         class="cell day"
         :class="dayClasses(day)"
         @click="selectDate(day)"
       >
         {{ dayCellContent(day) }}
-      </span>
+      </button>
     </div>
     <slot name="calendarFooterDay" />
   </div>

src/components/PickerHeader.vue

@@ -1,24 +1,26 @@
 <template>
   <header v-if="config.showHeader">
-    <span
+    <button
       class="prev"
+      :aria-label="`${config.isRtl ? 'next' : 'previous'} ${controlLabel}`"
       :class="{ disabled: isLeftNavDisabled }"
       @click="config.isRtl ? next() : previous()"
     >
       <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 }"
       @click="config.isRtl ? previous() : next()"
     >
       <slot name="nextIntervalBtn">
         <span class="default">&gt;</span>
       </slot>
-    </span>
+    </button>
   </header>
 </template>
 
@@ -37,6 +39,10 @@ export default {
         }
       },
     },
+    controlLabel: {
+      type: String,
+      default: null,
+    },
     next: {
       type: Function,
       required: true,

src/components/PickerMonth.vue

@@ -5,6 +5,7 @@
       :config="headerConfig"
       :next="nextYear"
       :previous="previousYear"
+      control-label="year"
     >
       <span
         class="month__year_btn"
@@ -16,15 +17,16 @@
       <slot slot="nextIntervalBtn" name="nextIntervalBtn" />
       <slot slot="prevIntervalBtn" name="prevIntervalBtn" />
     </PickerHeader>
-    <span
+    <button
       v-for="month in months"
       :key="month.timestamp"
+      :aria-label="`Select ${formatDate(month)}`"
       :class="{ selected: month.isSelected, disabled: month.isDisabled }"
       class="cell month"
       @click.stop="selectMonth(month)"
     >
       {{ month.month }}
-    </span>
+    </button>
     <slot name="calendarFooterMonth" />
   </div>
 </template>

src/components/PickerYear.vue

@@ -5,6 +5,7 @@
       :config="headerConfig"
       :next="nextDecade"
       :previous="previousDecade"
+      control-label="decade"
     >
       <span>
         {{ pageTitleYear }}
@@ -13,15 +14,16 @@
       <slot slot="prevIntervalBtn" name="prevIntervalBtn" />
     </PickerHeader>
 
-    <span
+    <button
       v-for="year in years"
       :key="year.timestamp"
+      :aria-label="`Select ${formatDate(year)}`"
       :class="{ selected: year.isSelected, disabled: year.isDisabled }"
       class="cell year"
       @click.stop="selectYear(year)"
     >
       {{ year.year }}
-    </span>
+    </button>
     <slot name="calendarFooterYear" />
   </div>
 </template>

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
      */

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;
+}

src/styles/style.scss

@@ -1,3 +1,5 @@
+@import "mixins";
+
 .rtl {
   direction: rtl;
 }
@@ -44,6 +46,8 @@
 
     .prev,
     .next {
+      background: transparent;
+      border: none;
       float: left;
       max-height: 40px;
       position: relative;
@@ -116,6 +120,7 @@
   }
 
   .cell {
+    background: transparent;
     border: 1px solid transparent;
     display: inline-block;
     height: 40px;
@@ -196,6 +201,7 @@
 
 .vdp-datepicker__clear-button,
 .vdp-datepicker__calendar-button {
+  @include button-reset;
   cursor: pointer;
   font-style: normal;
 

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()