Fix first focus

pompomon · Jul 24, 2020 · 3b79abb · 3b79abb
1 parent 3bf7639
commit 3b79abb
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 55 deletions.
diff --git a/packages/fluentui/e2e/tests/datepicker-test.ts b/packages/fluentui/e2e/tests/datepicker-test.ts
@@ -20,8 +20,6 @@ describe('Datepicker', () => {
     await e2e.focusOn(datepickerButton);
     await e2e.pressKey('Enter'); // open calendar
     expect(await e2e.exists(datepickerCalendar)).toBe(true);
-    await e2e.pressKey('Tab'); // TAB to go to the second navigation arrow
-    await e2e.pressKey('Tab'); // TAB to go to the cell
     expect(await e2e.isFocused(datepickerCalendarCell(32))).toBe(true); //32 is a magic number
     expect(await e2e.textOf(datepickerCalendarCell(32))).toBe('23'); //which represents July 23, 2020, cell focused by default
     await e2e.focusOn(datepickerCalendarCell(8)); // 8 is a magic number
@@ -35,8 +33,6 @@ describe('Datepicker', () => {
     await e2e.focusOn(datepickerButton);
     await e2e.pressKey('Enter'); // open calendar
     expect(await e2e.exists(datepickerCalendar)).toBe(true);
-    await e2e.pressKey('Tab'); // TAB to go to the second navigation arrow
-    await e2e.pressKey('Tab'); // TAB to go to the cell
     expect(await e2e.isFocused(datepickerCalendarCell(32))).toBe(true); //32 is a magic number
     expect(await e2e.textOf(datepickerCalendarCell(32))).toBe('23'); // which represents July 23, 2020, cell focused by default
     await e2e.focusOn(datepickerCalendarCell(42)); // 42 is a magic number

diff --git a/packages/fluentui/react-northstar/src/components/Datepicker/Datepicker.tsx b/packages/fluentui/react-northstar/src/components/Datepicker/Datepicker.tsx
@@ -239,7 +239,9 @@ export const Datepicker: ComponentWithAs<'div', DatepickerProps> &
             defaultProps: () => ({
               open,
               content: calendarElement,
-              trapFocus: true,
+              trapFocus: {
+                disableFirstFocus: true,
+              },
               trigger: <Button icon={<CalendarIcon />} title="Open calendar" iconOnly />,
             }),
             overrideProps: (predefinedProps: PopupProps): PopupProps => ({

diff --git a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendar.tsx b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendar.tsx
@@ -338,57 +338,53 @@ export const DatepickerCalendar: ComponentWithAs<'div', DatepickerCalendarProps>
 
   const element = (
     <Ref innerRef={datepickerCalendarRef}>
-      {getA11yProps.unstable_wrapWithFocusZone(
-        <ElementType
-          {...getA11yProps('root', {
-            className: classes.root,
-            ...unhandledProps,
-          })}
-        >
-          {createShorthand(DatepickerCalendarHeader, header, {
-            defaultProps: () => ({
-              label: formatMonthYear(gridNavigatedDate, localizedStrings),
-            }),
-            overrideProps: (predefinedProps: DatepickerCalendarHeaderProps): DatepickerCalendarHeaderProps => ({
-              onPreviousClick: (e, data) => {
-                changeMonth(false);
-                _.invoke(predefinedProps, 'onPreviousClick', e, data);
-              },
-              onNextClick: (e, data) => {
-                changeMonth(true);
-                _.invoke(predefinedProps, 'onNextClick', e, data);
-              },
-            }),
-          })}
-          {createShorthand(
-            Grid,
-            {},
-            {
-              defaultProps: () =>
-                getA11yProps('calendarGrid', {
-                  rows: grid.length - 1,
-                  columns: DAYS_IN_WEEK,
-                  content: (
-                    <>
-                      {_.times(DAYS_IN_WEEK, dayNumber =>
-                        createShorthand(DatepickerCalendarHeaderCell, calendarHeaderCell, {
-                          defaultProps: () =>
-                            getA11yProps('calendarHeaderCell', {
-                              content: localizedStrings.shortDays[(dayNumber + firstDayOfWeek) % DAYS_IN_WEEK],
-                              key: dayNumber,
-                            }),
-                        }),
-                      )}
-                      {/* {renderWeekRow(grid[0], true)} */}
-                      {_.map(grid.slice(1, grid.length - 1), week => renderWeekRow(week))}
-                      {/* {renderWeekRow(grid[grid.length - 1], true)} */}
-                    </>
-                  ),
-                }),
+      <ElementType
+        {...getA11yProps('root', {
+          className: classes.root,
+          ...unhandledProps,
+        })}
+      >
+        {createShorthand(DatepickerCalendarHeader, header, {
+          defaultProps: () => ({
+            label: formatMonthYear(gridNavigatedDate, localizedStrings),
+          }),
+          overrideProps: (predefinedProps: DatepickerCalendarHeaderProps): DatepickerCalendarHeaderProps => ({
+            onPreviousClick: (e, data) => {
+              changeMonth(false);
+              _.invoke(predefinedProps, 'onPreviousClick', e, data);
+            },
+            onNextClick: (e, data) => {
+              changeMonth(true);
+              _.invoke(predefinedProps, 'onNextClick', e, data);
             },
-          )}
-        </ElementType>,
-      )}
+          }),
+        })}
+        {createShorthand(
+          Grid,
+          {},
+          {
+            defaultProps: () =>
+              getA11yProps('calendarGrid', {
+                rows: grid.length - 1,
+                columns: DAYS_IN_WEEK,
+                content: (
+                  <>
+                    {_.times(DAYS_IN_WEEK, dayNumber =>
+                      createShorthand(DatepickerCalendarHeaderCell, calendarHeaderCell, {
+                        defaultProps: () =>
+                          getA11yProps('calendarHeaderCell', {
+                            content: localizedStrings.shortDays[(dayNumber + firstDayOfWeek) % DAYS_IN_WEEK],
+                            key: dayNumber,
+                          }),
+                      }),
+                    )}
+                    {_.map(grid.slice(1, grid.length - 1), week => renderWeekRow(week))}
+                  </>
+                ),
+              }),
+          },
+        )}
+      </ElementType>
     </Ref>
   );
   setEnd();