Datepicker [demo] cannot be used with keyboard + WHC

[StommePoes]

[Edit: In the demo] users of Windows High Contrast who rely on keyboard cannot see what is being focused, neither the button which opens the datepicker, nor anything inside once it is opened.

To Reproduce Steps to reproduce the behavior:

1. Open demo datepicker in a Windows browser which supports WHC (Firefox, Edge. IE if you're brave)
2. Press Alt+Shift+PrtScn to activate Windows High Contrast. It shouldn't matter which theme is running
3. Attempt to use the datepicker with keyboard. Focus is visible when the input receives focus, but not the calendar-activation button nor anything inside.

Expected behavior A focus ring is always available.

Additional context I will attempt a PR this weekend, although I didn't find the focus styles when looking through the code via Github. [Edit: only the demo has styles]

The solution is simple though: change the outline: 0 on the focus states to outline: 3px dotted transparent. This gives WHC users a visible outline while no other users will see an outline.

Edit: Ideally the demo shows this so developers see examples of code for all users :D

[arielsalminen]

@StommePoes Thanks for reporting this! We shall do more testing with the WHC mode on @ Windows. I am able to replicate the issue at my end so should be fairly easy to fix. Attaching a screenshot of the issue here for later.

[StommePoes]

Thanks.

To make things clearer, I thought the CSS was part of the repo itself, but since it's only the demo, I did not (and do not intend to) make a PR :)
Luckily this really is a 1-liner, yay.

[jonnystening]

We addressed this for our use case using a transparent outline on focus, via a CSS override...

.duet-date__day:focus {
  outline: 2px solid transparent;
  outline-offset: 3px;
}

Additionally, made the Month/Year dropdowns and Month ('<' and '>') toggles more obvious for WHCM users by using a transparent border...

.duet-date__select-label,
.duet-date__prev, 
.duet-date__next {
  border: 1px solid transparent;
}