@coreui/vue-pro 5.14.0 → 5.16.0

package/src/components/offcanvas/COffcanvas.ts

@@ -1,6 +1,7 @@
 import { defineComponent, h, ref, RendererElement, Transition, watch, withDirectives } from 'vue'
 
 import { CBackdrop } from '../backdrop'
+import { CFocusTrap } from '../focus-trap'
 
 import { vVisible } from '../../directives/v-c-visible'
 import { executeAfterTransition } from '../../utils/transition'
@@ -103,7 +104,7 @@ const COffcanvas = defineComponent({
       () => props.visible,
       () => {
         visible.value = props.visible
-      },
+      }
     )
 
     watch(visible, () => {
@@ -161,41 +162,44 @@ const COffcanvas = defineComponent({
     }
 
     return () => [
-      h(
-        Transition,
-        {
-          appear: visible.value,
-          css: false,
-          onEnter: (el, done) => handleEnter(el, done),
-          onAfterEnter: () => handleAfterEnter(),
-          onLeave: (el, done) => handleLeave(el, done),
-          onAfterLeave: (el) => handleAfterLeave(el),
-        },
-        () =>
-          withDirectives(
-            h(
-              'div',
-              {
-                ...attrs,
-                class: [
-                  {
-                    [`offcanvas${
-                      typeof props.responsive === 'boolean' ? '' : '-' + props.responsive
-                    }`]: props.responsive,
-                    [`offcanvas-${props.placement}`]: props.placement,
-                  },
-                  attrs.class,
-                ],
-                onKeydown: (event: KeyboardEvent) => handleKeyDown(event),
-                ref: offcanvasRef,
-                role: 'dialog',
-                tabindex: -1,
-                ...(props.dark && { 'data-coreui-theme': 'dark' }),
-              },
-              slots.default && slots.default(),
-            ),
-            [[vVisible, props.visible]],
-          ),
+      h(CFocusTrap, { active: visible.value && Boolean(props.backdrop) }, () =>
+        h(
+          Transition,
+          {
+            appear: visible.value,
+            css: false,
+            onEnter: (el, done) => handleEnter(el, done),
+            onAfterEnter: () => handleAfterEnter(),
+            onLeave: (el, done) => handleLeave(el, done),
+            onAfterLeave: (el) => handleAfterLeave(el),
+          },
+          () =>
+            withDirectives(
+              h(
+                'div',
+                {
+                  ...attrs,
+                  class: [
+                    {
+                      [`offcanvas${
+                        typeof props.responsive === 'boolean' ? '' : '-' + props.responsive
+                      }`]: props.responsive,
+                      [`offcanvas-${props.placement}`]: props.placement,
+                    },
+                    attrs.class,
+                  ],
+                  onKeydown: (event: KeyboardEvent) => handleKeyDown(event),
+                  ref: offcanvasRef,
+                  role: 'dialog',
+                  tabindex: -1,
+                  ...(props.dark && { 'data-coreui-theme': 'dark' }),
+                },
+                slots.default && slots.default()
+              ),
+
+              [[vVisible, props.visible]]
+            )
+        )
       ),
       props.backdrop &&
         h(CBackdrop, {

package/src/components/picker/CPicker.ts

@@ -2,6 +2,7 @@ import { cloneVNode, defineComponent, h, PropType, ref, watch } from 'vue'
 import { createPopper } from '@popperjs/core'
 
 import { CConditionalTeleport } from '../conditional-teleport'
+import { CFocusTrap } from '../focus-trap'
 
 import { isRTL } from '../../utils'
 
@@ -63,7 +64,7 @@ const CPicker = defineComponent({
       () => props.visible,
       () => {
         visible.value = props.visible
-      },
+      }
     )
 
     watch(visible, () => {
@@ -142,62 +143,67 @@ const CPicker = defineComponent({
       default: {
         return () =>
           h(
-            'div',
-            {
-              class: [
-                attrs.class,
-                {
-                  show: visible.value,
-                },
-              ],
-              ref: pickerRef,
-            },
-            [
-              /**
-               * @slot Location for the toggler element.
-               */
-              slots.toggler &&
-                slots.toggler().map((slot) =>
-                  cloneVNode(slot, {
-                    onClick: () => {
-                      if (!props.disabled && !visible.value) {
-                        visible.value = true
-                      }
-                    },
-                    ref: (el) => {
-                      togglerRef.value = el
-                    },
-                  }),
-                ),
+            CFocusTrap,
+            { active: visible.value, ...(props.teleport && { additionalContainer: dropdownRef }) },
+            () =>
               h(
-                CConditionalTeleport,
+                'div',
                 {
-                  teleport: props.teleport,
+                  class: [
+                    attrs.class,
+                    {
+                      show: visible.value,
+                    },
+                  ],
+                  ref: pickerRef,
                 },
-                {
-                  default: () =>
-                    h(
-                      'div',
-                      {
-                        class: [
-                          props.dropdownClassNames,
+                [
+                  /**
+                   * @slot Location for the toggler element.
+                   */
+                  slots.toggler &&
+                    slots.toggler().map((slot) =>
+                      cloneVNode(slot, {
+                        onClick: () => {
+                          if (!props.disabled && !visible.value) {
+                            visible.value = true
+                          }
+                        },
+                        ref: (el) => {
+                          togglerRef.value = el
+                        },
+                      })
+                    ),
+                  h(
+                    CConditionalTeleport,
+                    {
+                      teleport: props.teleport,
+                    },
+                    {
+                      default: () =>
+                        h(
+                          'div',
                           {
-                            show: props.teleport && visible.value,
+                            class: [
+                              props.dropdownClassNames,
+                              {
+                                show: props.teleport && visible.value,
+                              },
+                            ],
+                            ref: dropdownRef,
                           },
-                        ],
-                        ref: dropdownRef,
-                      },
-                      [
-                        slots.default && slots.default(),
-                        /**
-                         * @slot Location for the footer element.
-                         */
-                        props.footer && slots.footer && slots.footer(),
-                      ],
-                    ),
-                },
-              ),
-            ],
+                          [
+                            slots.default && slots.default(),
+                            /**
+                             * @slot Location for the footer element.
+                             */
+                            props.footer && slots.footer && slots.footer(),
+                          ]
+                        ),
+                    }
+                  ),
+                ]
+              )
           )
       }
     }

package/src/components/time-picker/CTimePicker.ts

@@ -25,6 +25,28 @@ import { Color } from '../props'
 const CTimePicker = defineComponent({
   name: 'CTimePicker',
   props: {
+    /**
+     * Accessible label for the hours selection element.
+     */
+    ariaSelectHoursLabel: String,
+    /**
+     * Accessible label for the AM/PM selection element.
+     *
+     * @since 5.16.0
+     */
+    ariaSelectMeridiemLabel: String,
+    /**
+     * Accessible label for the minutes selection element.
+     *
+     * @since 5.16.0
+     */
+    ariaSelectMinutesLabel: String,
+    /**
+     * Accessible label for the seconds selection element.
+     *
+     * @since 5.16.0
+     */
+    ariaSelectSecondsLabel: String,
     /**
      * Set if the component should use the 12/24 hour format. If `true` forces the interface to a 12-hour format. If `false` forces the interface into a 24-hour format. If `auto` the current locale will determine the 12 or 24-hour interface by default locales.
      *
@@ -339,9 +361,11 @@ const CTimePicker = defineComponent({
   setup(props, { emit, attrs, slots }) {
     const formRef = ref()
     const inputRef = ref()
-
+    const columnRefs = ref<(HTMLElement | null)[]>([])
     const date = ref<Date | null>(convertTimeToDate(props.time))
-    const ampm = ref<'am' | 'pm'>(date.value ? getAmPm(new Date(date.value), props.locale) : 'am')
+    const ampm = ref<'am' | 'pm' | null>(
+      date.value ? getAmPm(new Date(date.value), props.locale) : null
+    )
     const initialDate = ref<Date | null>(null)
     const visible = ref(props.visible)
     const localizedTimePartials = ref<LocalizedTimePartials>({
@@ -354,6 +378,10 @@ const CTimePicker = defineComponent({
       props.valid ?? (props.invalid === true ? false : undefined)
     )
 
+    const setColumnRef = (index: number, el: HTMLElement | null) => {
+      columnRefs.value[index] = el
+    }
+
     watch(
       () => props.time,
       () => {
@@ -421,22 +449,32 @@ const CTimePicker = defineComponent({
       isValid.value = false
     }
 
-    const handleTimeChange = (set: 'hours' | 'minutes' | 'seconds' | 'toggle', value: string) => {
+    const handleTimeChange = (set: 'hours' | 'minutes' | 'seconds' | 'meridiem', value: string) => {
       const _date = date.value || new Date('1970-01-01')
 
-      if (set === 'toggle') {
+      if (set === 'meridiem') {
+        const currentHours = _date.getHours()
+
         if (value === 'am') {
-          _date.setHours(_date.getHours() - 12)
+          ampm.value = 'am'
+          // Convert PM hours (12-23) to AM hours (0-11)
+          if (currentHours >= 12) {
+            _date.setHours(currentHours - 12)
+          }
         }
 
         if (value === 'pm') {
-          _date.setHours(_date.getHours() + 12)
+          ampm.value = 'pm'
+          // Convert AM hours (0-11) to PM hours (12-23)
+          if (currentHours < 12) {
+            _date.setHours(currentHours + 12)
+          }
         }
       }
 
       if (set === 'hours') {
         if (localizedTimePartials.value && localizedTimePartials.value.hour12) {
-          _date.setHours(convert12hTo24h(ampm.value, Number.parseInt(value)))
+          _date.setHours(convert12hTo24h(ampm.value ?? 'am', Number.parseInt(value)))
         } else {
           _date.setHours(Number.parseInt(value))
         }
@@ -463,24 +501,23 @@ const CTimePicker = defineComponent({
           disabled: props.disabled,
           id: props.id,
           name: props.name,
-          onInput: (event: Event) =>
-            useDebouncedCallback(() => {
-              if (isValidTime((event.target as HTMLInputElement).value)) {
-                const _date = convertTimeToDate((event.target as HTMLInputElement).value)
-                date.value = _date
+          onInput: useDebouncedCallback((event: Event) => {
+            if (isValidTime((event.target as HTMLInputElement).value)) {
+              const _date = convertTimeToDate((event.target as HTMLInputElement).value)
+              date.value = _date
 
-                if (_date) {
-                  emit('change', _date.toTimeString(), _date.toLocaleTimeString(props.locale), _date)
-                  emit('update:time', _date.toLocaleTimeString(props.locale))
-                } else {
-                  emit('change', null)
-                  emit('update:time', null)
-                }
+              if (_date) {
+                emit('change', _date.toTimeString(), _date.toLocaleTimeString(props.locale), _date)
+                emit('update:time', _date.toLocaleTimeString(props.locale))
               } else {
                 emit('change', null)
                 emit('update:time', null)
               }
-            }, props.inputOnChangeDelay),
+            } else {
+              emit('change', null)
+              emit('update:time', null)
+            }
+          }, props.inputOnChangeDelay),
           placeholder: props.placeholder,
           readonly: props.inputReadOnly,
           ref: inputRef,
@@ -528,6 +565,7 @@ const CTimePicker = defineComponent({
           onChange: (event: Event) =>
             handleTimeChange('hours', (event.target as HTMLSelectElement).value),
           ...(date.value && { value: getSelectedHour(date.value, props.locale) }),
+          'aria-label': props.ariaSelectHoursLabel,
         },
         localizedTimePartials.value &&
           localizedTimePartials.value.listOfHours.map((option) =>
@@ -550,6 +588,7 @@ const CTimePicker = defineComponent({
             onChange: (event: Event) =>
               handleTimeChange('minutes', (event.target as HTMLSelectElement).value),
             ...(date.value && { value: getSelectedMinutes(date.value) }),
+            'aria-label': props.ariaSelectMinutesLabel,
           },
           localizedTimePartials.value &&
             localizedTimePartials.value.listOfMinutes?.map((option) =>
@@ -572,6 +611,7 @@ const CTimePicker = defineComponent({
             onChange: (event: Event) =>
               handleTimeChange('seconds', (event.target as HTMLSelectElement).value),
             ...(date.value && { value: getSelectedSeconds(date.value) }),
+            'aria-label': props.ariaSelectSecondsLabel,
           },
           localizedTimePartials.value &&
             localizedTimePartials.value.listOfSeconds?.map((option) =>
@@ -592,8 +632,9 @@ const CTimePicker = defineComponent({
             class: 'time-picker-inline-select',
             disabled: props.disabled,
             onChange: (event: Event) =>
-              handleTimeChange('toggle', (event.target as HTMLSelectElement).value),
+              handleTimeChange('meridiem', (event.target as HTMLSelectElement).value),
             value: ampm.value,
+            'aria-label': props.ariaSelectMeridiemLabel,
           },
           [
             h(
@@ -616,31 +657,47 @@ const CTimePicker = defineComponent({
 
     const TimePickerRoll = () => [
       h(CTimePickerRollCol, {
+        ariaLabel: props.ariaSelectHoursLabel,
+        columnIndex: 0,
+        columnRefs: columnRefs.value,
         elements: localizedTimePartials.value && localizedTimePartials.value.listOfHours,
         onClick: (index: number) => handleTimeChange('hours', index.toString()),
         selected: getSelectedHour(date.value, props.locale, props.ampm),
+        setColumnRef,
       }),
       props.minutes &&
         h(CTimePickerRollCol, {
+          ariaLabel: props.ariaSelectMinutesLabel,
+          columnIndex: 1,
+          columnRefs: columnRefs.value,
           elements: localizedTimePartials.value && localizedTimePartials.value.listOfMinutes,
           onClick: (index: number) => handleTimeChange('minutes', index.toString()),
           selected: getSelectedMinutes(date.value),
+          setColumnRef,
         }),
       props.seconds &&
         h(CTimePickerRollCol, {
+          ariaLabel: props.ariaSelectSecondsLabel,
+          columnIndex: props.minutes ? 2 : 1,
+          columnRefs: columnRefs.value,
           elements: localizedTimePartials.value && localizedTimePartials.value.listOfSeconds,
           onClick: (index: number) => handleTimeChange('seconds', index.toString()),
           selected: getSelectedSeconds(date.value),
+          setColumnRef,
         }),
       localizedTimePartials.value &&
         localizedTimePartials.value.hour12 &&
         h(CTimePickerRollCol, {
+          ariaLabel: props.ariaSelectMeridiemLabel,
+          columnIndex: (props.minutes ? 1 : 0) + (props.seconds ? 1 : 0) + 1,
+          columnRefs: columnRefs.value,
           elements: [
             { value: 'am', label: 'AM' },
             { value: 'pm', label: 'PM' },
           ],
-          onClick: (value: string) => handleTimeChange('toggle', value),
+          onClick: (value: string) => handleTimeChange('meridiem', value),
           selected: ampm.value,
+          setColumnRef,
         }),
     ]
 
@@ -712,6 +769,7 @@ const CTimePicker = defineComponent({
                           ['time-picker-roll']: props.variant === 'roll',
                         },
                       ],
+                      ...(props.variant !== 'select' && { role: 'group' }),
                     },
                     props.variant === 'select' ? TimePickerSelect() : TimePickerRoll()
                   ),

package/src/components/time-picker/CTimePickerRollCol.ts

@@ -1,6 +1,7 @@
 import { defineComponent, h, onUpdated, PropType, ref, watch } from 'vue'
 
 import { useIsVisible } from '../../composables'
+import { getNextActiveElement, isRTL } from '../../utils'
 
 export interface Element {
   value: number | string
@@ -10,13 +11,18 @@ export interface Element {
 const CTimePickerRollCol = defineComponent({
   name: 'CTimePickerRollCol',
   props: {
+    ariaLabel: String,
+    columnIndex: Number,
+    columnRefs: {
+      type: Array as PropType<(HTMLElement | null)[]>,
+      default: () => [],
+    },
     elements: {
       type: Array as PropType<Element[]>,
       required: true,
     },
-    selected: {
-      type: [Number, String],
-    },
+    selected: [Number, String, null],
+    setColumnRef: Function as PropType<(index: number, el: HTMLElement | null) => void>,
   },
   emits: ['click'],
   setup(props, { emit }) {
@@ -29,7 +35,7 @@ const CTimePickerRollCol = defineComponent({
       if (isVisible.value && nodeEl && nodeEl instanceof HTMLElement) {
         colRef.value?.scrollTo({
           top: nodeEl.offsetTop,
-          behavior: init.value ? 'auto' : 'smooth',
+          behavior: init.value ? 'instant' : 'smooth',
         })
       }
     }
@@ -42,35 +48,107 @@ const CTimePickerRollCol = defineComponent({
       }
     })
 
+    watch(colRef, () => {
+      if (props.columnIndex !== undefined && props.setColumnRef) {
+        props.setColumnRef(props.columnIndex, colRef.value || null)
+      }
+    }, { immediate: true })
+
     onUpdated(() => {
       scrollToSelectedElement()
     })
 
+    const moveFocusToNextColumn = () => {
+      if (!props.columnRefs || props.columnIndex === undefined) return
+
+      if (props.columnIndex < props.columnRefs.length - 1) {
+        const column = props.columnRefs[props.columnIndex + 1]
+        const focusableCell = column?.querySelector('.time-picker-roll-cell[tabindex="0"]') as HTMLElement
+        focusableCell?.focus()
+      }
+    }
+
+    const moveFocusToPreviousColumn = () => {
+      if (!props.columnRefs || props.columnIndex === undefined) return
+
+      if (props.columnIndex > 0) {
+        const column = props.columnRefs[props.columnIndex - 1]
+        const focusableCell = column?.querySelector('.time-picker-roll-cell[tabindex="0"]') as HTMLElement
+        focusableCell?.focus()
+      }
+    }
+
     const handleKeyDown = (event: KeyboardEvent, value: number | string) => {
       if (event.code === 'Space' || event.key === 'Enter') {
         event.preventDefault()
         emit('click', value)
+        moveFocusToNextColumn()
+        return
+      }
+
+      if (colRef.value && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+        event.preventDefault()
+        const target = event.target as HTMLElement
+        const items = [...colRef.value.querySelectorAll('.time-picker-roll-cell')] as HTMLElement[]
+
+        getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus()
+        return
+      }
+
+      if (colRef.value && (event.key === 'Home' || event.key === 'End')) {
+        event.preventDefault()
+        const items = [...colRef.value.querySelectorAll('.time-picker-roll-cell')] as HTMLElement[]
+        const index = event.key === 'Home' ? 0 : items.length - 1
+        items[index]?.focus()
+        return
+      }
+
+      if (colRef.value && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+        event.preventDefault()
+        const rtl = isRTL(colRef.value)
+        const shouldGoLeft =
+          (event.key === 'ArrowLeft' && !rtl) || (event.key === 'ArrowRight' && rtl)
+        if (shouldGoLeft) {
+          moveFocusToPreviousColumn()
+        } else {
+          moveFocusToNextColumn()
+        }
       }
     }
 
     return () =>
       h(
         'div',
-        { class: 'time-picker-roll-col', ref: colRef },
-        props.elements.map((element) => {
+        {
+          class: 'time-picker-roll-col',
+          onFocusout: (event: FocusEvent) => {
+            const currentTarget = event.currentTarget as HTMLElement
+            const relatedTarget = event.relatedTarget as HTMLElement | null
+            if (currentTarget && (!relatedTarget || !currentTarget.contains(relatedTarget))) {
+              scrollToSelectedElement()
+            }
+          },
+          ref: colRef,
+          role: 'listbox',
+          'aria-label': props.ariaLabel,
+        },
+        props.elements.map((element, index) => {
+          const isSelected = element.value === props.selected
           return h(
             'div',
             {
               class: [
                 'time-picker-roll-cell',
                 {
-                  selected: element.value === props.selected,
+                  selected: isSelected,
                 },
               ],
               onClick: () => emit('click', element.value),
               onKeydown: (event: KeyboardEvent) => handleKeyDown(event, element.value),
-              role: 'button',
-              tabindex: 0,
+              role: 'option',
+              tabindex: isSelected ? 0 : props.selected ? -1 : index === 0 ? 0 : -1,
+              'aria-label': element.label.toString(),
+              'aria-selected': isSelected,
             },
             element.label
           )

package/src/composables/useDebouncedCallback.ts

@@ -12,5 +12,5 @@ export const useDebouncedCallback = <F extends Function>(callback: F, delay: num
     timeout.value = setTimeout(handler, delay)
   }
 
-  return debouncedFn()
+  return debouncedFn
 }