feat(DatePicker): Migrate to react-day-picker v8

[jpveooys]

Related issue

#2871
#2872

Overview

Work in progress PR to migrate DatePicker to react-day-picker v8.

Link to preview

todo

Reason

To resolve various accessibility and keyboard navigation problems.

Work carried out

• Migrate DatePicker to react-day-picker v8
• Fix bug with shading of keyboard range selection when second date is blurred
• Focus selected date or current date on open

Demo

todo

Developer notes

todo

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
3 Code Smells

88.5% Coverage
0.0% Duplication

[c9qsm62x]

https://github.com/defencedigital/mod-uk-design-system/blob/9eb0eb2597b4cbcba88d0e1c2a158ec0e3a9c3ba/packages/react-component-library/src/components/DatePicker/DatePicker.test.tsx#L962-L972

We have failing test here but was wondering if this is needed because I cant thing of a scenario when this will happen as its readOnly

[jpveooys]

@c9qsm62x It was added for coverage IIRC as those code paths still exist in the useInput hook.

I think the test has stopped doing what it was meant to since user-event was updated to v14 – fireEvent.keyDown(input, { key: 'Enter' }) probably makes more sense.

[c9qsm62x]

Test
DatePicker › when a single date picker is rendered and the picker is opened › when Shift-Tab is pressed once › traps the focus within the picker

it looks like this behaviour has changed in V8
https://react-day-picker.js.org/basics/keyboard#example
Having a look at this example it looks like when a date is in focus and you press shift+tab it will focus on the next month button.

[jpveooys]

Yep that test looks wrong now as the initial focus is now set to the selected date.

Should be something like this I think:

    describe('when Tab is pressed once', () => {
      beforeEach(async () => {
        await user.tab()
      })

      it('traps the focus within the picker', () => {
        expect(
          wrapper.getByLabelText(PREVIOUS_MONTH_BUTTON_LABEL)
        ).toHaveFocus()
      })

      describe('and Shift-Tab is then pressed once', () => {
        beforeEach(() => {
          return user.tab({ shift: true })
        })

        it('still traps the focus within the picker', () => {
          expect(
            wrapper.getByRole('button', { name: '5th December (Thursday)' })
          ).toHaveFocus()
        })
      })
    })

[m7kvqbe1]

Closing for now because it's very stale - hoping to come back to this soon.