Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Datepicker is not keyboard accessible in certain cases

See original GitHub issue

What package has an issue

@mantine/dates

Describe the bug

I discovered through writing an e2e test that Datepicker component with allowFreeInput prop is not keyboard accessible.

You can verify this by going to e.g. https://v5.mantine.dev/dates/date-picker/#min-and-max-dates and checking the following examples:

Min and max dates
Allow free input
Styles based on modifiers

Try to use arrow down or tab key, and you should see that these examples are not keyboard accessible like the other examples.

All others work as expected.

In which browser did the problem occur

Brave Version 1.40.107 Chromium: 103.0.5060.53 (Official Build) (64-bit)

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

Are you willing to participate in fixing this issue and create a pull request with the fix

Possible fix

No response

Issue Analytics

State:
Created a year ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

rtivitalcommented, Jul 3, 2022

Fixed in 4.2.12

1reaction

rtivitalcommented, Jun 28, 2022

Yeah, there is an issue with some edge cases where initial date cannot be focused

Top Results From Across the Web

[date-picker] component is not accessible via screenreader

Some info wrt the keyboard navigation: The current range version lets user select both start/end first time the date picker is opened. Looks ......

jQuery Datepicker with text input that doesn't allow user input

that doesn't allow the user to input random text in the textbox. I want the Datepicker to pop up when the textbox gains...

Datepickers - Accessibility Quick Guide - Paul J. Adam

Datepicker calendar control must be keyboard operable. · Calendar controls must have meaningful accessible names and correct role/state for each button. · Monday, ......

Datepicker - Angular powered Bootstrap

Datepicker fully supports keyboard navigation and screen readers. You can navigate between controls using Tab (focus will be trapped in the popup), move...

Datepicker widget - ADG - the Accessibility Developer Guide!

The datepicker must be operable using both keyboard only and desktop screen readers (with a reasonable interplay of default keys like Tab , ......