fix: Set tabIndex to -1 when day is both outside and selected (gpbl#1567

)

packages/react-day-picker/src/hooks/useDayRender/useDayRender.test.tsx

@@ -302,3 +302,20 @@ describe('when the day is selected', () => {
  expect(result.current.buttonProps['aria-pressed']).toBe(true);
  });
 });
+
+describe('when the day is target of focus and both selected and outside', () => {
+ const date = today;
+ const focusContext: FocusContextValue = {
+ ...mockedFocusContext,
+ focusTarget: date
+ };
+ const dayPickerProps = {
+ selected: date
+ };
+ beforeEach(() => {
+ setup(date, addMonths(date, 1), dayPickerProps, { focus: focusContext });
+ });
+ test('the button should have tabIndex -1', () => {
+ expect(result.current.buttonProps.tabIndex).toBe(-1);
+ });
+});

packages/react-day-picker/src/hooks/useDayRender/useDayRender.tsx

@@ -99,8 +99,17 @@ export function useDayRender(
  'aria-label': ariaLabel
  };
 
+ const isOutsideAndSelected = Boolean(
+ activeModifiers.selected && activeModifiers.outside
+ );
+
+ // If a day is both outside and selected, the equivalent "inside" day must also be present on one
+ // of the displayed calendars, and we do not want to have multiple days with tabIndex="0" because
+ // it can break tabbed navigation (https://github.com/gpbl/react-day-picker/issues/1567)
  const isFocusTarget = Boolean(
- focusContext.focusTarget && isSameDay(focusContext.focusTarget, day)
+ focusContext.focusTarget &&
+ isSameDay(focusContext.focusTarget, day) &&
+ !isOutsideAndSelected
  );
  const buttonProps = {
  ...divProps,