React-calendar: Is it possible to block Tab (tabindex)

Created on 7 Apr 2020 · 6Comments · Source: wojtekmaj/react-calendar

Hello everyone, i am making a form which contains rect-calendar, but when i am navigating through the form with Tabulation like this:

it enters the calendar and navigate to all the controls inside the calendar, i need to skip the calendar tabs and jump to my other input.

Is it actually possible in react-calendar? or do you know any other solution for this?

help wanted question

Source

nicoloso100

All 6 comments

Well, this would have been a significant accessibility issue if you couldn't navigate it using the keyboard, but I agree, that it could have been better. Consider skip links maybe?

wojtekmaj on 30 Apr 2020

@wojtekmaj what do you mean by "consider skip links"? As far as I know even thinking about putting a prop to disable the inner navigation through tabs, would still be an accessibility issue if someone would you use it.
Observing what chrome does with "input type date": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

You can see that tabs let you skip day, month, year and if on any on this you press the space button, it'll open the calendar and then re-clicking the tab button it focuses on various elements.

So the only solution I see here is providing some sort of "inline display mode" of this lib, but it'd be a huge not worth work.
So the thing @nicoloso100 can do is to put there himself an inline element that represents the saved date, and then when clicking it you can show react-calendar

giacomocerquone on 30 May 2020

👍1

I have same issue, I have calendar view and a list on events under the calendar view. screen reader stops after reading calendar view. while it should continue to next elements. any workaround for this?

neginbasiri on 20 Aug 2020

@wojtekmaj The best solution would be to conform to WAI-ARIA recommendations, i.e. only allow one date tile to be focusable, while keeping the rest at tabIndex={-1}, but allowing to switch the focusable element via arrow keys (up/down skips a week, left/right skips a day - there is a few other like page up down but those are less crucial I guess). I would be willing to help implement this, but need to know you support this before I put in the work.