Merge pull request #41 from reedsy/a11y

A11y

.github/workflows/test.yml

@@ -11,7 +11,10 @@ on:
 jobs:
   build:
     runs-on: ubuntu-22.04
+    if: ${{ github.actor != 'dependabot[bot]' }}
+
     timeout-minutes: 10
+
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -33,6 +36,6 @@ jobs:
         run: npm rebuild && npm run prepare --if-present
       - name: Test
         run: npm test
-      - name: Tag
+      - name: Release
         if: ${{ github.ref == 'refs/heads/main' }}
-        run: ./scripts/tag.sh
+        run: ./scripts/release.sh

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reedsy/vuejs-datepicker",
-  "version": "1.6.2-reedsy-2.1.3",
+  "version": "1.6.2-reedsy-2.1.4",
   "description": "A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations",
   "keywords": [
     "vue",
@@ -65,7 +65,7 @@
     "parse5": "^7.1.2",
     "postcss": "^8.4.21",
     "pre-commit": "^1.2.2",
-    "stylus": "^0.59.0",
+    "stylus": "^0.63.0",
     "vite": "^5.2.12",
     "vue": "^3.4.27"
   }

scripts/tag.sh → scripts/release.sh

@@ -24,3 +24,5 @@ git add --all lib/
 git commit --message "Release version $VERSION"
 git tag $VERSION
 git push origin refs/tags/$VERSION
+
+npm publish

src/components/DateInput.vue

@@ -27,6 +27,7 @@
       :placeholder="placeholder"
       :clear-button="clearButton"
       :disabled="disabled || null"
+      :aria-disabled="disabled || null"
       :required="required"
       :readonly="!typeable"
       autocomplete="off"

src/components/Datepicker.vue

@@ -236,7 +236,7 @@ export default {
   emits: [
     'changedMonth',
     'changedYear',
-    'cleared',  
+    'cleared',
     'closed',
     'highlight-date',
     'selected',

src/components/DaysGrid.vue

@@ -1,7 +1,6 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div
-    role="grid"
     aria-labelledby="month-button"
   >
     <span
@@ -19,10 +18,11 @@
     <span
       v-for="day in days"
       :key="day.timestamp"
+      :aria-selected="day.isSelected"
       class="cell day"
       :class="dayClasses(day)"
+      role="button"
       :tabindex="isFocused(day) ? 0 : -1"
-      :aria-selected="day.isSelected"
       @mouseover="mouseOver(day)"
       @focus="mouseOver(day)"
       @keydown.left.prevent="$emit('focus-previous-day')"

src/components/PickerDay.vue

@@ -21,6 +21,7 @@
         class="prev"
         :aria-label="isRtl ? 'Next Month' : 'Previous Month'"
         :disabled="isLeftNavDisabled || null"
+        :aria-disabled="isLeftNavDisabled || null"
         @click="isRtl ? nextMonth() : previousMonth()"
         @keydown.space.enter.prevent="isRtl ? nextMonth() : previousMonth()"
         @keydown="$emit('keydown', $event)"
@@ -56,6 +57,7 @@
         class="next"
         :aria-label="isRtl ? 'Previous Month' : 'Next Month'"
         :disabled="isRightNavDisabled || null"
+        :aria-disabled="isRightNavDisabled || null"
         @click="isRtl ? previousMonth() : nextMonth()"
         @keydown.space.enter.prevent="isRtl ? previousMonth() : nextMonth()"
         @keydown="$emit('keydown', $event)"

src/components/PickerMonth.vue

@@ -20,6 +20,7 @@
         type="button"
         class="prev"
         :disabled="isLeftNavDisabled || null"
+        :aria-disabled="isLeftNavDisabled || null"
         :aria-label="isRtl ? 'Next Year' : 'Previous Year'"
         @click="isRtl ? nextYear() : previousYear()"
         @keydown.space.enter.prevent="isRtl ? nextYear() : previousYear()"
@@ -44,6 +45,7 @@
         class="next"
         :aria-label="isRtl ? 'Previous Year' : 'Next Year'"
         :disabled="isRightNavDisabled || null"
+        :aria-disabled="isRightNavDisabled || null"
         @click="isRtl ? previousYear() : nextYear()"
         @keydown.space.enter.prevent="isRtl ? previousYear() : nextYear()"
         @keydown="$emit('keydown', $event)"
@@ -52,17 +54,17 @@
       </button>
     </header>
     <div
-      role="grid"
       aria-labelledby="year-button"
     >
       <button
         v-for="month in months"
         :key="month.timestamp"
-        type="button"
+        :aria-selected="month.isSelected"
+        :class="{'selected': month.isSelected, 'disabled': month.isDisabled}"
         class="cell month"
+        role="button"
         :tabindex="month.isFocused ? 0 : -1"
-        :class="{'selected': month.isSelected, 'disabled': month.isDisabled}"
-        :aria-selected="month.isSelected"
+        type="button"
         @keydown.right.prevent="focusNextMonth"
         @keydown.left.prevent="focusPreviousMonth"
         @keydown.down.prevent="focusNextQuarter"

src/components/PickerYear.vue

@@ -20,6 +20,7 @@
         type="button"
         class="prev"
         :disabled="isLeftNavDisabled || null"
+        :aria-disabled="isLeftNavDisabled || null"
         :aria-label="isRtl ? 'Next Decade' : 'Previous Decade'"
         @click="isRtl ? nextDecade() : previousDecade()"
         @keydown.space.enter.prevent="isRtl ? nextDecade() : previousDecade()"
@@ -39,24 +40,25 @@
         class="next"
         :aria-label="isRtl ? 'Previous Decade' : 'Next Decade'"
         :disabled="isRightNavDisabled || null"
+        :aria-disabled="isRightNavDisabled || null"
         @click="isRtl ? previousDecade() : nextDecade()"
         @keydown="$emit('keydown', $event)"
       >
         >
       </button>
     </header>
     <div
-      role="grid"
       aria-labelledby="decade-button"
     >
       <button
         v-for="year in years"
         :key="year.timestamp"
-        type="button"
+        :aria-selected="year.isSelected"
         class="cell year"
-        :tabindex="year.isFocused ? 0 : -1"
         :class="{ 'selected': year.isSelected, 'disabled': year.isDisabled }"
-        :aria-selected="year.isSelected"
+        role="button"
+        :tabindex="year.isFocused ? 0 : -1"
+        type="button"
         @click.stop="selectYear(year)"
         @keydown.right.prevent="focusNextYear"
         @keydown.left.prevent="focusPreviousYear"

src/styles/style.styl

@@ -49,7 +49,7 @@
     .prev
     .next
       width (100 / 7) %
-      text-indent -10000px
+      color transparent
       flex: 0 0 auto
       position relative