feat(DateRangeInput3) Add keyboard accessibility

[jscheiny]

Changes proposed in this pull request:

This PR adds improved keyboard accessibility to the DateRangeInput3 component. In particular we align with other date range picker so that when one of the input fields is focused, the user can then use their arrow keys to navigate the calendar and make selections. This properly respects min and max dates and allow single selection only and properly navigates the calendar view based on user selections.

Screenshot

date-range-input.mp4

[changelog-app]

Generate changelog in packages/datetime2/changelog/@unreleased

What do the change types mean?

• feature: A new feature of the service.
• improvement: An incremental improvement in the functionality or operation of the service.
• fix: Remedies the incorrect behaviour of a component of the service in a backwards-compatible way.
• break: Has the potential to break consumers of this service's API, inclusive of both Palantir services
  and external consumers of the service's API (e.g. customer-written software or integrations).
• deprecation: Advertises the intention to remove service functionality without any change to the
  operation of the service itself.
• manualTask: Requires the possibility of manual intervention (running a script, eyeballing configuration,
  performing database surgery, ...) at the time of upgrade for it to succeed.
• migration: A fully automatic upgrade migration task with no engineer input required.

Note: only one type should be chosen.

How are new versions calculated?

• ❗The break and manual task changelog types will result in a major release!
• 🐛 The fix changelog type will result in a minor release in most cases, and a patch release version for patch branches. This behaviour is configurable in autorelease.
• ✨ All others will result in a minor version release.

Type

• Feature
• Improvement
• Fix
• Break
• Deprecation
• Manual task
• Migration

Description

feat(DateRangeInput3) Add keyboard accessibility

Check the box to generate changelog(s)

• Generate changelog entry

[svc-palantir-github]

feat(DateRangeInput3) Add keyboard accessibility

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[svc-palantir-github]

Fix overlapping dates

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[svc-palantir-github]

Fix same date overlap

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[ggdouglas]

The equivalence of a boolean to a boolean here reads a bit weird. Can we change this to something like:

const isForwardArrowKey = arrowKey === "ArrowRight" || arrowKey === "ArrowDown";
const isEndBoundary = boundary === Boundary.END;
// If the arrow key direction is in the same direction as the boundary, then moving that way will not create an
// overlapping date range
if (isForwardArrowKey && isEndBoundary) {
    return shiftDateByArrowKey(otherBoundary, arrowKey);
}

[jscheiny]

We still need equality here for this to work properly, isForwardArrowKey && isEndBoundary is not equivalent to isForwardArrowKey === isEndBoundary. I thought about doing something like:

const arrowKeyDirection = arrowKey === "ArrowRight" || arrowKey === "ArrowDown" ? "forward" : "backward";
const boundaryDirection = boundary === Boundary.END ? "forward" : "backward";
if (arrowKeyDirection === boundaryDirection) {

But this is just a lot of extra stuff for the same thing and minimal readability improvement. I'll pull isEndBoundary out I like that, but I'm not sure how to make it much more readable beyond that.