@coreui/react-pro 5.4.0 → 5.5.0

package/src/components/calendar/CCalendar.tsx

@@ -23,6 +23,30 @@ import {
 import { useForkedRef, useStateWithCallback } from '../../hooks'
 
 export interface CCalendarProps {
+  /**
+   * A string that provides an accessible label for the button that navigates to the next month in the calendar. This label is read by screen readers to describe the action associated with the button.
+   *
+   * @since 5.5.0
+   */
+  ariaNavNextMonthLabel?: string
+  /**
+   * A string that provides an accessible label for the button that navigates to the next year in the calendar. This label is intended for screen readers to help users understand the button's functionality.
+   *
+   * @since 5.5.0
+   */
+  ariaNavNextYearLabel?: string
+  /**
+   * A string that provides an accessible label for the button that navigates to the previous month in the calendar. Screen readers will use this label to explain the purpose of the button.
+   *
+   * @since 5.5.0
+   */
+  ariaNavPrevMonthLabel?: string
+  /**
+   * A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button's function.
+   *
+   * @since 5.5.0
+   */
+  ariaNavPrevYearLabel?: string
   /**
    * Default date of the component
    */
@@ -251,7 +275,11 @@ const Calendar = (props: {
               </th>
             )}
             {weekDays.map(({ date }: { date: Date }, idx: number) => (
-              <th key={idx} className="calendar-cell">
+              <th
+                className="calendar-cell"
+                abbr={date.toLocaleDateString(locale, { weekday: 'long' })}
+                key={idx}
+              >
                 <div className="calendar-header-cell-inner">
                   {typeof weekdayFormat === 'function'
                     ? weekdayFormat(date)
@@ -276,6 +304,7 @@ const Calendar = (props: {
               selectionType,
             )
             const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates)
+            const isSelected = isDateSelected(date, startDate, endDate)
             const current = week.days.some((day) => day.month === 'current')
             return (
               <tr
@@ -286,10 +315,11 @@ const Calendar = (props: {
                     selectionType === 'week' && hoverDate && selectEndDate
                       ? isDateInRange(date, startDate, hoverDate)
                       : isDateInRange(date, hoverDate, endDate),
-                  selected: isDateSelected(date, startDate, endDate),
+                  selected: isSelected,
                 })}
                 key={index}
                 tabIndex={selectionType === 'week' && current && !isDisabled ? 0 : -1}
+                {...(isSelected && { 'aria-selected': true })}
                 {...(selectionType === 'week' &&
                   !isDisabled && {
                     onBlur: () => onCalendarMouseLeave(),
@@ -307,6 +337,7 @@ const Calendar = (props: {
                 )}
                 {week.days.map(({ date, month }: { date: Date; month: string }, idx: number) => {
                   const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates)
+                  const isSelected = isDateSelected(date, startDate, endDate)
                   return month === 'current' || showAdjacementDays ? (
                     <td
                       className={classNames('calendar-cell', {
@@ -319,7 +350,7 @@ const Calendar = (props: {
                               ? isDateInRange(date, startDate, hoverDate)
                               : isDateInRange(date, hoverDate, endDate)),
                           range: month === 'current' && isDateInRange(date, startDate, endDate),
-                          selected: isDateSelected(date, startDate, endDate),
+                          selected: isSelected,
                         }),
                         [month]: true,
                         today: month === 'current' && isToday(date),
@@ -333,6 +364,7 @@ const Calendar = (props: {
                           : -1
                       }
                       title={date.toLocaleDateString(locale)}
+                      {...(isSelected && { 'aria-selected': true })}
                       {...(selectionType === 'day' &&
                         (month === 'current' || selectAdjacementDays) && {
                           onBlur: () => onCalendarMouseLeave(),
@@ -368,11 +400,12 @@ const Calendar = (props: {
                   const monthNumber = index * 3 + idx
                   const date = new Date(calendarDate.getFullYear(), monthNumber, 1)
                   const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates)
+                  const isSelected = isDateSelected(date, startDate, endDate)
                   return (
                     <td
                       className={classNames('calendar-cell', {
                         disabled: isDisabled,
-                        selected: isDateSelected(date, startDate, endDate),
+                        selected: isSelected,
                         'range-hover':
                           selectionType === 'month' &&
                           (hoverDate && selectEndDate
@@ -382,6 +415,7 @@ const Calendar = (props: {
                       })}
                       key={idx}
                       tabIndex={isDisabled ? -1 : 0}
+                      {...(isSelected && { 'aria-selected': true })}
                       {...(!isDisabled && {
                         onBlur: () => onCalendarMouseLeave(),
                         onClick: () => onCalendarClick(date),
@@ -405,11 +439,12 @@ const Calendar = (props: {
                 {row.map((year, idx) => {
                   const date = new Date(year, 0, 1)
                   const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates)
+                  const isSelected = isDateSelected(date, startDate, endDate)
                   return (
                     <td
                       className={classNames('calendar-cell year', {
                         disabled: isDisabled,
-                        selected: isDateSelected(date, startDate, endDate),
+                        selected: isSelected,
                         'range-hover':
                           selectionType === 'year' &&
                           (hoverDate && selectEndDate
@@ -419,6 +454,7 @@ const Calendar = (props: {
                       })}
                       key={idx}
                       tabIndex={isDisabled ? -1 : 0}
+                      {...(isSelected && { 'aria-selected': true })}
                       {...(!isDisabled && {
                         onBlur: () => onCalendarMouseLeave(),
                         onClick: () => onCalendarClick(date),
@@ -443,6 +479,10 @@ const Calendar = (props: {
 }
 
 const Navigation = (props: {
+  ariaNavNextMonthLabel: string
+  ariaNavNextYearLabel: string
+  ariaNavPrevMonthLabel: string
+  ariaNavPrevYearLabel: string
   calendarDate: Date
   locale: string
   navigation: boolean
@@ -457,6 +497,10 @@ const Navigation = (props: {
   view: 'days' | 'months' | 'years'
 }) => {
   const {
+    ariaNavNextMonthLabel,
+    ariaNavNextYearLabel,
+    ariaNavPrevMonthLabel,
+    ariaNavPrevYearLabel,
     calendarDate,
     locale,
     navigation,
@@ -475,13 +519,23 @@ const Navigation = (props: {
     <div className="calendar-nav">
       {navigation && (
         <div className="calendar-nav-prev">
-          <CButton color="transparent" size="sm" onClick={() => onNavigationClick('prev', true)}>
+          <CButton
+            color="transparent"
+            size="sm"
+            aria-label={ariaNavPrevYearLabel}
+            onClick={() => onNavigationClick('prev', true)}
+          >
             {navPrevDoubleIcon ?? (
               <span className="calendar-nav-icon calendar-nav-icon-double-prev" />
             )}
           </CButton>
           {view === 'days' && (
-            <CButton color="transparent" size="sm" onClick={() => onNavigationClick('prev')}>
+            <CButton
+              color="transparent"
+              size="sm"
+              aria-label={ariaNavPrevMonthLabel}
+              onClick={() => onNavigationClick('prev')}
+            >
               {navPrevIcon ?? <span className="calendar-nav-icon calendar-nav-icon-prev" />}
             </CButton>
           )}
@@ -489,6 +543,7 @@ const Navigation = (props: {
       )}
       <div
         className="calendar-nav-date"
+        aria-live="polite"
         {...(navYearFirst && { style: { display: 'flex', justifyContent: 'center' } })}
       >
         {view === 'days' && (
@@ -508,11 +563,21 @@ const Navigation = (props: {
       {navigation && (
         <div className="calendar-nav-next">
           {view === 'days' && (
-            <CButton color="transparent" size="sm" onClick={() => onNavigationClick('next')}>
+            <CButton
+              color="transparent"
+              size="sm"
+              aria-label={ariaNavNextMonthLabel}
+              onClick={() => onNavigationClick('next')}
+            >
               {navNextIcon ?? <span className="calendar-nav-icon calendar-nav-icon-next" />}
             </CButton>
           )}
-          <CButton color="transparent" size="sm" onClick={() => onNavigationClick('next', true)}>
+          <CButton
+            color="transparent"
+            size="sm"
+            aria-label={ariaNavNextYearLabel}
+            onClick={() => onNavigationClick('next', true)}
+          >
             {navNextDoubleIcon ?? (
               <span className="calendar-nav-icon calendar-nav-icon-double-next" />
             )}
@@ -526,6 +591,10 @@ const Navigation = (props: {
 export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
   (
     {
+      ariaNavNextMonthLabel = 'Next month',
+      ariaNavNextYearLabel = 'Next year',
+      ariaNavPrevMonthLabel = 'Previous month',
+      ariaNavPrevYearLabel = 'Previous year',
       startDate,
       endDate,
       calendarDate = startDate || endDate || null,
@@ -928,6 +997,10 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
             return (
               <div className={classNames('calendar', view)} key={index}>
                 <Navigation
+                  ariaNavNextMonthLabel={ariaNavNextMonthLabel}
+                  ariaNavNextYearLabel={ariaNavNextYearLabel}
+                  ariaNavPrevMonthLabel={ariaNavPrevMonthLabel}
+                  ariaNavPrevYearLabel={ariaNavPrevYearLabel}
                   calendarDate={calendarDate}
                   locale={locale}
                   navigation={navigation}
@@ -975,6 +1048,10 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
 )
 
 CCalendar.propTypes = {
+  ariaNavNextMonthLabel: PropTypes.string,
+  ariaNavNextYearLabel: PropTypes.string,
+  ariaNavPrevMonthLabel: PropTypes.string,
+  ariaNavPrevYearLabel: PropTypes.string,
   className: PropTypes.string,
   calendarDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
   calendars: PropTypes.number,

package/src/components/calendar/utils.ts

@@ -19,10 +19,7 @@ export const convertToDateObject = (
     return convertIsoWeekToDate(date as string)
   }
 
-  const _date = new Date(Date.parse(date))
-  const userTimezoneOffset = _date.getTimezoneOffset() * 60_000
-
-  return new Date(_date.getTime() + userTimezoneOffset)
+  return new Date(Date.parse(date))
 }
 
 export const convertToLocalDate = (d: Date, locale: string, options = {}) =>

package/src/components/date-range-picker/CDateRangePicker.tsx

@@ -202,6 +202,10 @@ export interface CDateRangePickerProps
 export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDateRangePickerProps>(
   (
     {
+      ariaNavNextMonthLabel,
+      ariaNavNextYearLabel,
+      ariaNavPrevMonthLabel,
+      ariaNavPrevYearLabel,
       calendars = 2,
       calendarDate,
       cancelButton = 'Cancel',
@@ -601,6 +605,10 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
               </div>
             )}
             <CCalendar
+              ariaNavNextMonthLabel={ariaNavNextMonthLabel}
+              ariaNavNextYearLabel={ariaNavNextYearLabel}
+              ariaNavPrevMonthLabel={ariaNavPrevMonthLabel}
+              ariaNavPrevYearLabel={ariaNavPrevYearLabel}
               calendarDate={_calendarDate}
               calendars={isMobile ? 1 : calendars}
               className="date-picker-calendars"