Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Date Picker], [Range Date Picker]: A11y - There is no error message for typing date in unsupported format #2784

Open
mari-shakhanava opened this issue Mar 28, 2025 · 1 comment
Labels
A11y Accessibility bug bug Something isn't working

Comments

@mari-shakhanava
Copy link

Description

When User types date in unsupported format, there is no error message, just the field is cleared automatically

Steps to Reproduce

  1. Open Date Picker component or Range Date Picker component
  2. Type date in unsupported format (e.g., "14.02.25") and observe the behavior.

Actual result

https://github.com/user-attachments/assets/ce0bab8a-23ae-453a-ac72-126e0d5df829
There is no error message, just the field is cleared automatically.

Expected result

Error message should be displayed.

Failed SC:
3.3.1 Error Identification (Level A)

@mari-shakhanava mari-shakhanava added the bug Something isn't working label Mar 28, 2025
@AlekseyManetov AlekseyManetov added the A11y Accessibility bug label Apr 1, 2025
@AlekseyManetov
Copy link
Collaborator

Overall, this looks a valid request. However, at the moment, we do not see a good solution to this issue. Additionally, we have not found strong references on how other libraries or major products handle this. Most either prevent keyboard input entirely or reset invalid values in a similar way.

Possible Solutions:

  • Modify the API to allow invalid props.value – This would introduce a significant breaking change, causing issues for existing projects. They would need to implement their own handling for invalid values.
  • Handle invalid values within the input but return null externally – The challenge here is how to visually indicate an invalid state. Component itself can only modify the border color. And users would not be able to attach specific validation messages for this case, since user would't know about invalid state, because of props.value === null.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A11y Accessibility bug bug Something isn't working
Projects
Status: Backlog
Development

No branches or pull requests

2 participants