From 5ba7c6aa96b500ec10e5580c71c566f7a57f0ada Mon Sep 17 00:00:00 2001 From: daledah Date: Fri, 23 Jan 2026 12:49:12 +0700 Subject: [PATCH 1/4] fix: currently selected date is not announced --- src/components/DatePicker/CalendarPicker/index.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/DatePicker/CalendarPicker/index.tsx b/src/components/DatePicker/CalendarPicker/index.tsx index c92737170c164..51e00bc5960ba 100644 --- a/src/components/DatePicker/CalendarPicker/index.tsx +++ b/src/components/DatePicker/CalendarPicker/index.tsx @@ -17,6 +17,9 @@ import generateMonthMatrix from './generateMonthMatrix'; import type CalendarPickerListItem from './types'; import YearPickerModal from './YearPickerModal'; +const SELECTED_ACCESSIBILITY_STATE = {selected: true} as const; +const UNSELECTED_ACCESSIBILITY_STATE = {selected: false} as const; + type CalendarPickerProps = { /** An initial value of date string */ value?: Date | string; @@ -271,14 +274,17 @@ 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 ( Date: Mon, 26 Jan 2026 15:16:03 +0700 Subject: [PATCH 2/4] Use useCallback instead --- src/components/DatePicker/CalendarPicker/index.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/DatePicker/CalendarPicker/index.tsx b/src/components/DatePicker/CalendarPicker/index.tsx index 51e00bc5960ba..dd3f0169cc97a 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'; @@ -17,9 +17,6 @@ import generateMonthMatrix from './generateMonthMatrix'; import type CalendarPickerListItem from './types'; import YearPickerModal from './YearPickerModal'; -const SELECTED_ACCESSIBILITY_STATE = {selected: true} as const; -const UNSELECTED_ACCESSIBILITY_STATE = {selected: false} as const; - type CalendarPickerProps = { /** An initial value of date string */ value?: Date | string; @@ -179,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 ( Date: Wed, 4 Feb 2026 00:31:33 +0700 Subject: [PATCH 3/4] fix lint --- src/CONST/index.ts | 6 ++++++ src/components/DatePicker/CalendarPicker/index.tsx | 4 ++++ 2 files changed, 10 insertions(+) diff --git a/src/CONST/index.ts b/src/CONST/index.ts index d67db1e45eaba..b6c32e0420696 100755 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -8209,6 +8209,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', + }, }, DOMAIN: { diff --git a/src/components/DatePicker/CalendarPicker/index.tsx b/src/components/DatePicker/CalendarPicker/index.tsx index dd3f0169cc97a..d362c21589aa8 100644 --- a/src/components/DatePicker/CalendarPicker/index.tsx +++ b/src/components/DatePicker/CalendarPicker/index.tsx @@ -197,6 +197,7 @@ function CalendarPicker({ testID="currentYearButton" accessibilityLabel={`${currentYearView}, ${translate('common.currentYear')}`} role={CONST.ROLE.BUTTON} + sentryLabel={CONST.SENTRY_LABEL.CALENDAR_PICKER.YEAR_PICKER} > @@ -288,6 +291,7 @@ function CalendarPicker({ accessible={!!day} dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} role={CONST.ROLE.BUTTON} + sentryLabel={CONST.SENTRY_LABEL.CALENDAR_PICKER.DAY} > {({hovered, pressed}) => ( Date: Sat, 7 Feb 2026 19:58:58 +0700 Subject: [PATCH 4/4] fix duplicate label --- src/components/DatePicker/CalendarPicker/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/DatePicker/CalendarPicker/index.tsx b/src/components/DatePicker/CalendarPicker/index.tsx index d362c21589aa8..f9bf6e4ea0b4e 100644 --- a/src/components/DatePicker/CalendarPicker/index.tsx +++ b/src/components/DatePicker/CalendarPicker/index.tsx @@ -285,6 +285,7 @@ function CalendarPicker({ onPress={handleOnPress} style={themeStyles.calendarDayRoot} accessibilityLabel={accessibilityDateLabel} + accessibilityHint="" accessibilityState={getAccessibilityState(isSelected)} aria-selected={isSelected} tabIndex={day ? 0 : -1}