diff --git a/src/CONST/index.ts b/src/CONST/index.ts index 7f930af355a1d..12c5c1ac16e38 100755 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -8250,6 +8250,12 @@ const CONST = { HOME_PAGE: { WIDGET_ITEM: 'HomePage-WidgetItem', }, + CALENDAR_PICKER: { + YEAR_PICKER: 'CalendarPicker-YearPicker', + PREV_MONTH: 'CalendarPicker-PrevMonth', + NEXT_MONTH: 'CalendarPicker-NextMonth', + DAY: 'CalendarPicker-Day', + }, REPORT_DETAILS: { WORKSPACE_LINK: 'ReportDetails-WorkspaceLink', }, diff --git a/src/components/DatePicker/CalendarPicker/index.tsx b/src/components/DatePicker/CalendarPicker/index.tsx index c92737170c164..f9bf6e4ea0b4e 100644 --- a/src/components/DatePicker/CalendarPicker/index.tsx +++ b/src/components/DatePicker/CalendarPicker/index.tsx @@ -1,6 +1,6 @@ import {addMonths, endOfDay, endOfMonth, format, getYear, isSameDay, parseISO, setDate, setYear, startOfDay, startOfMonth, subMonths} from 'date-fns'; import {Str} from 'expensify-common'; -import React, {useEffect, useRef, useState} from 'react'; +import React, {useCallback, useEffect, useRef, useState} from 'react'; import {View} from 'react-native'; import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; @@ -176,6 +176,8 @@ function CalendarPicker({ const webOnlyMarginStyle = isSmallScreenWidth ? {} : styles.mh1; const calendarContainerStyle = isSmallScreenWidth ? [webOnlyMarginStyle, themeStyles.calendarBodyContainer] : [webOnlyMarginStyle, animatedStyle]; + const getAccessibilityState = useCallback((isSelected: boolean) => ({selected: isSelected}), []); + return ( @@ -271,18 +276,23 @@ function CalendarPicker({ onDayPressed(day); }; const key = `${index}_day-${day}`; - const dateAccessibilityLabel = day ? format(currentDate, 'EEEE, MMMM d, yyyy') : ''; + const fullDate = day ? new Date(currentYearView, currentMonthView, day) : null; + const accessibilityDateLabel = fullDate ? DateUtils.formatToLongDateWithWeekday(fullDate) : ''; return ( {({hovered, pressed}) => (