Merge pull request #3 from iknox27/fix-focus-keyboard-a11y-time

feat(a11y): add keyboard focus for time and datetime
mengxiong10 · Oct 19, 2023 · 6cc0fd8 · 6cc0fd8
2 parents 458f9fd + 82b1566
commit 6cc0fd8
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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,13 +15,15 @@
         v-if="timePickerOptions"
         :date="innerValue"
         :get-classes="getClasses"
+        :is-disabled="isDisabled"
         :options="timePickerOptions"
         :format="innerForamt"
         @select="handleSelect"
       ></list-options>
       <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 });