search

hypeserver / react-date-range

A React component for choosing dates and date ranges.
MIT License
2.58k stars 667 forks source link

Accessibility Issues with DateInput #415

Closed nikeeshi closed 3 years ago

nikeeshi commented 3 years ago

Subject of the issue

DateInput does not follow WCAG.

[BUG] Bug Reproduce Steps

  1. Install Axe. https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd
  2. Run the test in the demo page. https://hypeserver.github.io/react-date-range/ Instead of this step, you can also run yarn start locally in this repository.
  3. Axe reports issues of DateInput that "Form elements must have labels".

[BUG] Expected behaviour

No issue should be reported.

The react-date-range picker should include in their API a way to set a aria-label to these DateInput

Environment

Package Version: 1.0.3 and the current demo version. React version: - Node version: - Browser: Chrome 85 image

kamyar commented 3 years ago

Should be fixed please feel free to open a new issue if something is missing