-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
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
[a11y] Disabled dates aren't actually disabled in markup #713
Comments
@majapw can you think of a reason why someone would not want to have the Note: this likely means messing with how next/previous day handling works for months (and what does this mean if you open a month in the past where the past is disabled? Or should you just not be allowed to do that either? |
I think a couple of things are being conflated here.
|
So I've submitted a PR to address the unavailable dates not being read as such by screen readers. I did also locally code the disabling of the buttons for the unavailable dates. However, upon testing, it occurred to me that if the buttons are disabled then those users depending on screen readers would be blocked from being able to navigate over those dates and nothing would read to them why they were being blocked from moving back or forward any further. It works great for sighted people but I wonder if it would be a confusing user experience for those that are not. |
For for Issue #713 Unavailable Date phrase not reading on Screen Readers
@erin-doyle Yeah this was a concern of mine as well. I think we should maybe think more deeply on whether or not to disable blocked buttons for this reason. |
When a date is disabled, CSS is applied to make it look disabled (

CalendarDay--blocked-calendar
,CalendarDay--blocked-out-of-range
):However, this date is still clickable with a mouse (even if the mouse click doesn't do anything in the UI), can be navigated to with a keyboard (you can arrow through disabled dates), and doesn't indicate that those dates are disabled to a screen reader user (because the
button
itself is not actually disabled).Example where you can see this: http://airbnb.io/react-dates/?selectedKind=DRP%20-%20Day%20Props&selectedStory=blocks%20fridays&full=0&down=1&left=1&panelRight=0&downPanel=storybook%2Factions%2Factions-panel
The text was updated successfully, but these errors were encountered: