diff --git a/packages/react-day-picker/src/hooks/useDayRender/useDayRender.test.tsx b/packages/react-day-picker/src/hooks/useDayRender/useDayRender.test.tsx index edd72f81da..b91ec982c2 100644 --- a/packages/react-day-picker/src/hooks/useDayRender/useDayRender.test.tsx +++ b/packages/react-day-picker/src/hooks/useDayRender/useDayRender.test.tsx @@ -296,6 +296,20 @@ describe('when the day is target of focus but outside', () => { }); }); +describe('when the day is focused', () => { + const date = today; + const focusContext: FocusContextValue = { + ...mockedFocusContext, + focusedDay: date + }; + beforeEach(() => { + setup(date, date, {}, { focus: focusContext }); + }); + test('the button should have tabIndex 0', () => { + expect(result.current.buttonProps.tabIndex).toBe(0); + }); +}); + describe('when the day is disabled', () => { const date = today; const dayPickerProps = { diff --git a/packages/react-day-picker/src/hooks/useDayRender/useDayRender.tsx b/packages/react-day-picker/src/hooks/useDayRender/useDayRender.tsx index a4d736cbc8..aad11fc8f7 100644 --- a/packages/react-day-picker/src/hooks/useDayRender/useDayRender.tsx +++ b/packages/react-day-picker/src/hooks/useDayRender/useDayRender.tsx @@ -104,12 +104,15 @@ export function useDayRender( isSameDay(focusContext.focusTarget, day) && !activeModifiers.outside; + const isFocused = + focusContext.focusedDay && isSameDay(focusContext.focusedDay, day); + const buttonProps = { ...divProps, disabled: activeModifiers.disabled, ['aria-pressed']: activeModifiers.selected, ['aria-label']: ariaLabel, - tabIndex: isFocusTarget ? 0 : -1, + tabIndex: isFocused || isFocusTarget ? 0 : -1, ...eventHandlers };