@sbc-connect/nuxt-base 0.13.0 → 0.13.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sbc-connect/nuxt-base
 
+## 0.13.2
+
+### Patch Changes
+
+- [#190](https://github.com/bcgov/connect-nuxt/pull/190) [`4a4846b`](https://github.com/bcgov/connect-nuxt/commit/4a4846b53acb28b5a77cca8f9fb67393ba0132f9) Thanks [@eve-git](https://github.com/eve-git)! - Fix Tab order in Safari skipping the date picker calendar's month/year navigation buttons, and report date input changes to form validation as the user types instead of only on blur
+
+## 0.13.1
+
+### Patch Changes
+
+- [#188](https://github.com/bcgov/connect-nuxt/pull/188) [`6b06486`](https://github.com/bcgov/connect-nuxt/commit/6b06486d052dea23764c696d297f727bb5ad8a6e) Thanks [@eve-git](https://github.com/eve-git)! - Fix Tab focus not reaching the date picker's clear and calendar buttons in Safari
+
 ## 0.13.0
 
 ### Minor Changes

package/app/components/Connect/Input/DatePicker.vue

@@ -26,11 +26,11 @@ const props = defineProps<{
 const { locale } = useI18n()
 
 // wires the input up to the wrapping UFormField (if any): aria-describedby/
-// aria-invalid derived from its help/error text, and blur reported onto the
-// form's validation bus. Calling this here (rather than leaving it to the
+// aria-invalid derived from its help/error text, and blur/input reported onto
+// the form's validation bus. Calling this here (rather than leaving it to the
 // inner UInput) makes the relationship explicit and independent of UInput's
 // own internal wiring.
-const { ariaAttrs, emitFormBlur } = useFormField()
+const { ariaAttrs, emitFormBlur, emitFormInput } = useFormField()
 
 const dateModel = defineModel<string>()
 
@@ -154,7 +154,20 @@ function onDateSelect(date: DateValue | DateRange | DateValue[] | null | undefin
   })
 }
 
+// Reka UI's Calendar.Prev/Calendar.Next header buttons render as plain
+// <button>s with no tabindex, same as the trailing icon buttons above -
+// Safari excludes them from Tab order by default, so without this, Tab skips
+// straight past prev-month/next-month/next-year into the day grid
+function fixHeaderButtonTabOrder() {
+  nextTick(() => {
+    calendarContentRef.value
+      ?.querySelectorAll<HTMLElement>('[data-slot="header"] button')
+      .forEach(button => button.setAttribute('tabindex', '0'))
+  })
+}
+
 function onOpenAutoFocus(e: Event) {
+  fixHeaderButtonTabOrder()
   if (calendarOpenedViaInput) {
     e.preventDefault()
     calendarOpenedViaInput = false
@@ -233,6 +246,10 @@ watch(dateInput, (val: string) => {
   // sync immediately so the parent (and its schema validation) always sees the
   // current value instead of waiting for the debounced auto-formatting below
   syncModelFromLocal()
+  // report the change onto the form's validation bus as it's typed, rather than
+  // only on blur - emitFormInput() is always eager here (see useFormField), so
+  // this revalidates on every keystroke instead of waiting for a first blur
+  emitFormInput()
 
   clearTimeout(debounceTimer)
   if (!val) {
@@ -280,15 +297,23 @@ function clearDate() {
         {{ label }}
       </label>
       <template #trailing>
+        <!-- explicit tabindex="0" on both trailing buttons: Safari excludes plain
+        <button> elements from Tab order by default (unlike Chrome/Firefox), so
+        without this, Tab skips straight past them from the date input -->
+        <!-- .stop on both Enter handlers below: type="button" already blocks native
+        form submission, but consuming apps may wrap this in a dialog/form with its
+        own "Enter activates primary action" keydown listener higher up the tree -
+        stopping propagation keeps Enter fully local to whichever icon is focused -->
         <UButton
           v-if="dateInput && !disabled"
           icon="i-mdi-close"
           type="button"
+          tabindex="0"
           :color="error ? 'error' : 'neutral'"
           variant="ghost"
           class="date-action-button"
           :aria-label="$t('label.clearDate')"
-          @keydown.enter.prevent="clearDate"
+          @keydown.enter.prevent.stop="clearDate"
           @click="clearDate"
         />
         <!-- capture Enter before Reka UI asChild trigger strips the listener -->
@@ -307,12 +332,13 @@ function clearDate() {
           <UButton
             icon="i-mdi-calendar"
             type="button"
+            tabindex="0"
             :disabled="disabled"
             :color="error && !dateInput ? 'error' : 'neutral'"
             variant="ghost"
             class="date-action-button"
             :aria-label="$t('label.openCalendar')"
-            @keydown.enter.prevent="isCalendarOpen = !isCalendarOpen"
+            @keydown.enter.prevent.stop="isCalendarOpen = !isCalendarOpen"
           />
           <template #content>
             <div ref="calendarContentRef">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.13.0",
+  "version": "0.13.2",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",