inactive elements in the focus order - accessibility issue

gpbl / react-day-picker

DayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications.

https://daypicker.dev

MIT License

5.87k stars 702 forks source link

inactive elements in the focus order - accessibility issue #2110

Closed vamshienumula closed 1 month ago

vamshienumula commented 2 months ago

By default the "wrapper" div is focusable via Tab because it has tabIndex = 0. Also the wrapper div doesn't have any aria-label property. So if it has tabIndex = 0 and is focused then the narrator is silent and the user will be confused in such case and won't know where the focus is.

Actually the focus should be on first interactive element. We should remove tab index from non-interactive elements.

@gpbl Can you please help us in fixing this.