Skip to content
This repository was archived by the owner on Sep 2, 2024. It is now read-only.
This repository was archived by the owner on Sep 2, 2024. It is now read-only.

Datepicker [demo] cannot be used with keyboard + WHC #19

@StommePoes

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions