fix(DatePickerE): Focus selected date or today when picker opens

This makes focusing consistent with the W3 WAI-ARIA date picker example.
Royal-Navy · May 6, 2022 · 374beb0 · 374beb0
1 parent 8eb3e48
commit 374beb0
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/packages/react-component-library/src/components/DatePicker/DatePicker.test.tsx b/packages/react-component-library/src/components/DatePicker/DatePicker.test.tsx
@@ -593,6 +593,22 @@ describe('DatePicker', () => {
  })
  })
 
+ describe('when a single date picker with a value is rendered and the picker is opened', () => {
+ beforeEach(() => {
+ wrapper = render(
+ <DatePicker startDate={new Date('2022-01-18T00:00:00Z')} />
+ )
+
+ return user.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(<DatePicker />)
@@ -604,12 +620,10 @@ describe('DatePicker', () => {
  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 Tab is pressed once', () => {
@@ -619,7 +633,7 @@ describe('DatePicker', () => {
 
  it('traps the focus within the picker', () => {
  expect(
- wrapper.getByRole('button', { name: '5th December (Thursday)' })
+ wrapper.getByLabelText(PREVIOUS_MONTH_BUTTON_LABEL)
  ).toHaveFocus()
  })
 
@@ -630,7 +644,7 @@ describe('DatePicker', () => {
 
  it('still traps the focus within the picker', () => {
  expect(
- wrapper.getByLabelText(PREVIOUS_MONTH_BUTTON_LABEL)
+ wrapper.getByRole('button', { name: '5th December (Thursday)' })
  ).toHaveFocus()
  })
  })

diff --git a/packages/react-component-library/src/components/DatePicker/DatePicker.tsx b/packages/react-component-library/src/components/DatePicker/DatePicker.tsx
@@ -346,6 +346,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
  onDayMouseLeave={handleDayBlurOrMouseLeave}
  onDayFocus={handleDayFocusOrMouseEnter}
  onDayBlur={handleDayBlurOrMouseLeave}
+ initialFocus
  />
  </div>
  </FocusTrap>

diff --git a/packages/react-component-library/src/components/DatePicker/useFocusTrapOptions.ts b/packages/react-component-library/src/components/DatePicker/useFocusTrapOptions.ts
@@ -21,6 +21,7 @@ export function useFocusTrapOptions(
  isEventTargetDescendantOf(event, clickAllowedElementRefs),
  clickOutsideDeactivates: (event) =>
  !isEventTargetDescendantOf(event, clickAllowedElementRefs),
+ initialFocus: false,
  onDeactivate: close,
  }),
  [clickAllowedElementRefs, close]