@coreui/react-pro 5.21.0 → 5.23.0

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

@@ -31,8 +31,32 @@ export interface CTimePickerProps
    * @since 4.8.0
    */
   ampm?: 'auto' | boolean
+  /**
+   * Accessible label for the hours selection element.
+   */
+  ariaSelectHoursLabel?: string
+  /**
+   * Accessible label for the AM/PM selection element.
+   *
+   * @since 5.22.0
+   */
+  ariaSelectMeridiemLabel?: string
+  /**
+   * Accessible label for the minutes selection element.
+   *
+   * @since 5.22.0
+   */
+  ariaSelectMinutesLabel?: string
+  /**
+   * Accessible label for the seconds selection element.
+   *
+   * @since 5.22.0
+   */
+  ariaSelectSecondsLabel?: string
   /**
    * A string of all className you want applied to the component.
+   *
+   * @since 5.22.0
    */
   className?: string
   /**
@@ -158,6 +182,10 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
   (
     {
       ampm = 'auto',
+      ariaSelectHoursLabel = 'Select hours',
+      ariaSelectMeridiemLabel = 'Select AM/PM',
+      ariaSelectMinutesLabel = 'Select minutes',
+      ariaSelectSecondsLabel = 'Select seconds',
       cancelButton = 'Cancel',
       cancelButtonColor = 'primary',
       cancelButtonSize = 'sm',
@@ -204,11 +232,13 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
   ) => {
     const formRef = useRef<HTMLFormElement>(null)
     const inputRef = useRef<HTMLInputElement>(null)
+    const timePickerBodyRef = useRef<HTMLDivElement>(null)
+    const columnRefs = useRef<(HTMLDivElement | null)[]>([])
 
     const [date, setDate] = useState<Date | null>(convertTimeToDate(time))
     const [initialDate, setInitialDate] = useState<Date | null>(null)
     const [isValid, setIsValid] = useState(valid ?? (invalid === true ? false : undefined))
-    const [_ampm, setAmPm] = useState<AmPm>(date ? getAmPm(new Date(date), locale) : 'am')
+    const [_ampm, setAmPm] = useState<AmPm | null>(date ? getAmPm(new Date(date), locale) : null)
     const [_visible, setVisible] = useState(visible)
 
     const [localizedTimePartials, setLocalizedTimePartials] = useState<LocalizedTimePartials>({
@@ -293,21 +323,32 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       }
     }, inputOnChangeDelay)
 
-    const handleTimeChange = (set: 'hours' | 'minutes' | 'seconds' | 'toggle', value: string) => {
+    const handleTimeChange = (set: 'hours' | 'minutes' | 'seconds' | 'meridiem', value: string) => {
       const _date = date || new Date('1970-01-01')
 
-      if (set === 'toggle') {
+      if (set === 'meridiem') {
+        const currentHours = _date.getHours()
+
         if (value === 'am') {
-          _date.setHours(_date.getHours() - 12)
+          setAmPm('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)
+          setAmPm('pm')
+          // Convert AM hours (0-11) to PM hours (12-23)
+          if (currentHours < 12) {
+            _date.setHours(currentHours + 12)
+          }
         }
       }
 
       if (set === 'hours') {
         if (localizedTimePartials && localizedTimePartials.hour12) {
-          _date.setHours(convert12hTo24h(_ampm, Number.parseInt(value)))
+          _date.setHours(convert12hTo24h(_ampm ?? 'am', Number.parseInt(value)))
         } else {
           _date.setHours(Number.parseInt(value))
         }
@@ -343,7 +384,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           (typeof indicator === 'boolean' ? (
             <div
               className="time-picker-indicator"
-              {...(disabled !== false && {
+              {...(!disabled && {
                 onClick: () => setVisible(!_visible),
                 onKeyDown: (event) => {
                   if (event.key === 'Enter') {
@@ -380,6 +421,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
               handleTimeChange('hours', event.target.value)
             }
             value={getSelectedHour(date, locale)}
+            aria-label={ariaSelectHoursLabel}
           >
             {localizedTimePartials &&
               localizedTimePartials.listOfHours.map((option, index) => (
@@ -398,6 +440,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
                   handleTimeChange('minutes', event.target.value)
                 }
                 value={getSelectedMinutes(date)}
+                aria-label={ariaSelectMinutesLabel}
               >
                 {localizedTimePartials &&
                   localizedTimePartials.listOfMinutes.map((option, index) => (
@@ -418,6 +461,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
                   handleTimeChange('seconds', event.target.value)
                 }
                 value={getSelectedSeconds(date)}
+                aria-label={ariaSelectSecondsLabel}
               >
                 {localizedTimePartials &&
                   localizedTimePartials.listOfSeconds.map((option, index) => (
@@ -433,9 +477,10 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
               className="time-picker-inline-select"
               disabled={disabled}
               onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
-                handleTimeChange('toggle', event.target.value)
+                handleTimeChange('meridiem', event.target.value)
               }
-              value={_ampm}
+              value={_ampm ?? 'am'}
+              aria-label={ariaSelectMeridiemLabel}
             >
               <option value="am">AM</option>
               <option value="pm">PM</option>
@@ -527,38 +572,64 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
             className={classNames('time-picker-body', {
               ['time-picker-roll']: variant === 'roll',
             })}
+            {...(variant !== 'select' && { role: 'group' })}
+            ref={timePickerBodyRef}
           >
             {variant === 'select' ? (
               <TimePickerSelect />
             ) : (
               <>
                 <CTimePickerRollCol
+                  ariaLabel={ariaSelectHoursLabel}
+                  columnIndex={0}
+                  columnRefs={columnRefs.current}
                   elements={localizedTimePartials && localizedTimePartials.listOfHours}
                   onClick={(index: number) => handleTimeChange('hours', index.toString())}
                   selected={getSelectedHour(date, locale, ampm)}
+                  ref={(node: HTMLDivElement | null) => {
+                    columnRefs.current[0] = node
+                  }}
                 />
                 {minutes && (
                   <CTimePickerRollCol
+                    ariaLabel={ariaSelectMinutesLabel}
+                    columnIndex={1}
+                    columnRefs={columnRefs.current}
                     elements={localizedTimePartials && localizedTimePartials.listOfMinutes}
                     onClick={(index: number) => handleTimeChange('minutes', index.toString())}
                     selected={getSelectedMinutes(date)}
+                    ref={(node: HTMLDivElement | null) => {
+                      columnRefs.current[1] = node
+                    }}
                   />
                 )}
                 {seconds && (
                   <CTimePickerRollCol
+                    ariaLabel={ariaSelectSecondsLabel}
+                    columnIndex={minutes ? 2 : 1}
+                    columnRefs={columnRefs.current}
                     elements={localizedTimePartials && localizedTimePartials.listOfSeconds}
                     onClick={(index: number) => handleTimeChange('seconds', index.toString())}
                     selected={getSelectedSeconds(date)}
+                    ref={(node: HTMLDivElement | null) => {
+                      columnRefs.current[minutes ? 2 : 1] = node
+                    }}
                   />
                 )}
                 {localizedTimePartials && localizedTimePartials.hour12 && (
                   <CTimePickerRollCol
+                    ariaLabel={ariaSelectMeridiemLabel}
+                    columnIndex={(minutes ? 1 : 0) + (seconds ? 1 : 0) + 1}
+                    columnRefs={columnRefs.current}
                     elements={[
                       { value: 'am', label: 'AM' },
                       { value: 'pm', label: 'PM' },
                     ]}
-                    onClick={(value: string) => handleTimeChange('toggle', value)}
+                    onClick={(value: string) => handleTimeChange('meridiem', value)}
                     selected={_ampm}
+                    ref={(node: HTMLDivElement | null) => {
+                      columnRefs.current[(minutes ? 1 : 0) + (seconds ? 1 : 0) + 1] = node
+                    }}
                   />
                 )}
               </>

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

@@ -1,8 +1,9 @@
-import React, { forwardRef, useEffect, useRef } from 'react'
+import React, { forwardRef, useCallback, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { useForkedRef, useIsVisible } from '../../hooks'
+import { getNextActiveElement, isRTL } from '../../utils'
 
 export interface Element {
   value: number | string
@@ -10,52 +11,134 @@ export interface Element {
 }
 
 export interface CTimePickerRollColProps {
+  ariaLabel?: string
+  columnIndex: number
+  columnRefs: (HTMLDivElement | null)[]
   elements: Element[]
   onClick?: (value: number | string) => void
   selected?: number | string | null
 }
 
 export const CTimePickerRollCol = forwardRef<HTMLDivElement, CTimePickerRollColProps>(
-  ({ elements, onClick, selected }, ref) => {
-    const init = useRef(true)
+  ({ ariaLabel, columnIndex, columnRefs, elements, onClick, selected }, ref) => {
     const colRef = useRef<HTMLDivElement>(null)
+    const firstRender = useRef(true)
     const forkedRef = useForkedRef(ref, colRef)
     const isVisible = useIsVisible(colRef)
 
     useEffect(() => {
+      if (isVisible) {
+        setRoll(firstRender.current ? 'instant' : 'smooth')
+
+        firstRender.current = false
+      }
+    }, [isVisible, selected])
+
+    const moveFocusToNextColumn = useCallback(() => {
+      const columns = columnRefs
+      if (columns?.length === 0) {
+        return
+      }
+
+      if (columnIndex < columns.length - 1) {
+        const column = columns[columnIndex + 1]
+        ;(column?.querySelector('.time-picker-roll-cell[tabindex="0"') as HTMLElement).focus()
+      }
+    }, [columnIndex, columnRefs])
+
+    const moveFocusToPreviousColumn = useCallback(() => {
+      const columns = columnRefs
+      if (columns?.length === 0) {
+        return
+      }
+
+      if (columnIndex > 0) {
+        const column = columns[columnIndex - 1]
+        ;(column?.querySelector('.time-picker-roll-cell[tabindex="0"') as HTMLElement).focus()
+      }
+    }, [columnIndex, columnRefs])
+
+    const setRoll = useCallback((behavior: 'instant' | 'smooth') => {
       const nodeEl = colRef.current?.querySelector('.selected')
-      if (isVisible && nodeEl && nodeEl instanceof HTMLElement) {
+      if (nodeEl && nodeEl instanceof HTMLElement) {
         colRef.current?.scrollTo({
           top: nodeEl.offsetTop,
-          behavior: init.current ? 'auto' : 'smooth',
+          behavior: behavior,
         })
       }
+    }, [])
 
-      if (isVisible) {
-        init.current = false
-      }
-    }, [isVisible, selected])
+    const handleKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>, value: number | string) => {
+        if (event.code === 'Space' || event.key === 'Enter') {
+          event.preventDefault()
+          onClick?.(value)
+          moveFocusToNextColumn()
+          return
+        }
 
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>, value: number | string) => {
-      if (event.code === 'Space' || event.key === 'Enter') {
-        event.preventDefault()
-        onClick?.(value)
-      }
-    }
+        if (colRef.current && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+          event.preventDefault()
+          const target = event.target as HTMLElement
+          const items = [
+            ...colRef.current.querySelectorAll('.time-picker-roll-cell'),
+          ] as HTMLElement[]
+
+          getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus()
+          return
+        }
+
+        if (colRef.current && (event.key === 'Home' || event.key === 'End')) {
+          event.preventDefault()
+          const items = [
+            ...colRef.current.querySelectorAll('.time-picker-roll-cell'),
+          ] as HTMLElement[]
+          const index = event.key === 'Home' ? 0 : items.length - 1
+          items[index].focus()
+          return
+        }
+
+        if (colRef.current && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+          event.preventDefault()
+          const rtl = isRTL(colRef.current)
+          const shouldGoLeft =
+            (event.key === 'ArrowLeft' && !rtl) || (event.key === 'ArrowRight' && rtl)
+          if (shouldGoLeft) {
+            moveFocusToPreviousColumn()
+          } else {
+            moveFocusToNextColumn()
+          }
+        }
+      },
+      [onClick, moveFocusToNextColumn, moveFocusToPreviousColumn]
+    )
 
     return (
-      <div className="time-picker-roll-col" ref={forkedRef}>
+      <div
+        className="time-picker-roll-col"
+        onBlur={(event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) {
+            setRoll('smooth')
+          }
+        }}
+        role="listbox"
+        aria-label={ariaLabel}
+        ref={forkedRef}
+      >
         {elements.map((element, index) => {
+          const isSelected = element.value === selected
           return (
             <div
               className={classNames('time-picker-roll-cell', {
-                selected: element.value === selected,
+                selected: isSelected,
               })}
               key={index}
               onClick={() => onClick?.(element.value)}
               onKeyDown={(event) => handleKeyDown(event, element.value)}
-              role="button"
-              tabIndex={0}
+              role="option"
+              tabIndex={isSelected ? 0 : selected ? -1 : index === 0 ? 0 : -1}
+              aria-label={element.label.toString()}
+              aria-selected={isSelected}
             >
               {element.label}
             </div>
@@ -63,7 +146,7 @@ export const CTimePickerRollCol = forwardRef<HTMLDivElement, CTimePickerRollColP
         })}
       </div>
     )
-  },
+  }
 )
 
 CTimePickerRollCol.propTypes = {