@sbc-connect/nuxt-base 0.13.1 → 0.13.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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

package/package.json

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