From 14c90da7cf8316e09e9779e380eda68689cee23f Mon Sep 17 00:00:00 2001
From: jpveooys <66470099+jpveooys@users.noreply.github.com>
Date: Mon, 17 Jan 2022 17:06:06 +0000
Subject: [PATCH] fix(DatePickerE): Focus selected date or today when picker
 opens

This makes focusing consistent with the W3 WAI-ARIA date picker example.
---
 .../DatePickerE/DatePickerE.test.tsx          | 42 ++++++++++++-------
 .../components/DatePickerE/DatePickerE.tsx    |  1 +
 .../DatePickerE/useFocusTrapOptions.ts        |  1 +
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/packages/react-component-library/src/components/DatePickerE/DatePickerE.test.tsx b/packages/react-component-library/src/components/DatePickerE/DatePickerE.test.tsx
index 6fcdaa9e97..af525f910e 100644
--- a/packages/react-component-library/src/components/DatePickerE/DatePickerE.test.tsx
+++ b/packages/react-component-library/src/components/DatePickerE/DatePickerE.test.tsx
@@ -16,6 +16,7 @@ import { BORDER_WIDTH } from '../../styled-components'
 import { COMPONENT_SIZE } from '../Forms'
 import { DatePickerE, DatePickerEOnChangeData } from '.'
 import { DATE_VALIDITY } from './constants'
+import { RETURN } from '../../utils/keyCodes'
 
 const NOW = '2019-12-05T11:00:00.000Z'
 const ERROR_BOX_SHADOW = `0 0 0 ${
@@ -590,6 +591,22 @@ describe('DatePickerE', () => {
     })
   })
 
+  describe('when a single date picker with a value is rendered and the picker is opened', () => {
+    beforeEach(() => {
+      wrapper = render(
+        <DatePickerE startDate={new Date('2022-01-18T00:00:00Z')} />
+      )
+
+      userEvent.click(wrapper.getByTestId('datepicker-input-button'))
+    })
+
+    it('focuses the current date', () => {
+      expect(
+        wrapper.getByRole('button', { name: '18th January (Tuesday)' })
+      ).toHaveFocus()
+    })
+  })
+
   describe('when a single date picker is rendered and the picker is opened', () => {
     beforeEach(() => {
       wrapper = render(<DatePickerE />)
@@ -601,33 +618,31 @@ describe('DatePickerE', () => {
       expect(wrapper.getByText('December 2019')).toBeInTheDocument()
     })
 
-    it('focuses the previous month button', () => {
-      return waitFor(() =>
-        expect(
-          wrapper.getByLabelText(PREVIOUS_MONTH_BUTTON_LABEL)
-        ).toHaveFocus()
-      )
+    it('focuses the current date', () => {
+      expect(
+        wrapper.getByRole('button', { name: '5th December (Thursday)' })
+      ).toHaveFocus()
     })
 
-    describe('when Shift-Tab is pressed', () => {
+    describe('when Tab is pressed', () => {
       beforeEach(() => {
-        userEvent.tab({ shift: true })
+        userEvent.tab()
       })
 
       it('traps the focus within the picker', () => {
         expect(
-          wrapper.getByRole('button', { name: '5th December (Thursday)' })
+          wrapper.getByLabelText(PREVIOUS_MONTH_BUTTON_LABEL)
         ).toHaveFocus()
       })
 
-      describe('and Tab is then pressed', () => {
+      describe('and Shift-Tab is then pressed', () => {
         beforeEach(() => {
-          userEvent.tab()
+          userEvent.tab({ shift: true })
         })
 
         it('still traps the focus within the picker', () => {
           expect(
-            wrapper.getByLabelText(PREVIOUS_MONTH_BUTTON_LABEL)
+            wrapper.getByRole('button', { name: '5th December (Thursday)' })
           ).toHaveFocus()
         })
       })
@@ -645,7 +660,6 @@ describe('DatePickerE', () => {
       },
     ])('when the escape key is pressed in $name', ({ selector }) => {
       beforeEach(() => {
-        const element = selector()
         userEvent.type(selector(), '{esc}')
       })
 
@@ -923,7 +937,7 @@ describe('DatePickerE', () => {
     // in range mode
     describe('and return is pressed in the input', () => {
       beforeEach(() => {
-        userEvent.type(input, '{enter}')
+        fireEvent.keyDown(input, { keyCode: RETURN })
       })
 
       it('the input value is unchanged', () => {
diff --git a/packages/react-component-library/src/components/DatePickerE/DatePickerE.tsx b/packages/react-component-library/src/components/DatePickerE/DatePickerE.tsx
index 97f22b66c6..79999a6e1f 100644
--- a/packages/react-component-library/src/components/DatePickerE/DatePickerE.tsx
+++ b/packages/react-component-library/src/components/DatePickerE/DatePickerE.tsx
@@ -342,6 +342,7 @@ export const DatePickerE: React.FC<DatePickerEProps> = ({
               onDayMouseLeave={handleDayBlurOrMouseLeave}
               onDayFocus={handleDayFocusOrMouseEnter}
               onDayBlur={handleDayBlurOrMouseLeave}
+              initialFocus
             />
           </div>
         </FocusTrap>
diff --git a/packages/react-component-library/src/components/DatePickerE/useFocusTrapOptions.ts b/packages/react-component-library/src/components/DatePickerE/useFocusTrapOptions.ts
index 8485cbee05..4f6d9bbed5 100644
--- a/packages/react-component-library/src/components/DatePickerE/useFocusTrapOptions.ts
+++ b/packages/react-component-library/src/components/DatePickerE/useFocusTrapOptions.ts
@@ -21,6 +21,7 @@ export function useFocusTrapOptions(
         isEventTargetDescendantOf(event, clickAllowedElementRefs),
       clickOutsideDeactivates: (event) =>
         !isEventTargetDescendantOf(event, clickAllowedElementRefs),
+      initialFocus: false,
       onDeactivate: close,
     }),
     [clickAllowedElementRefs, close]