Accessibility: move from disabled to aria-disabled

[gpbl]

Context

According to the docs for aria-disabled, disabled days should be available in the accessibility tree.

What we need to do

• replace the disable attribute for buttons with aria-disabled

[kimamula]

Hi @gpbl, could you clarify why you think disabled days should be available in the accessibility tree? Actually, my company's QA team believes that disabled days should not be focusable in terms of accessibility and I'm a little confused.

I think the QA team would be happy if I could handle disabled days in a similar way to Chrome's native date picker. Is there a way to configure react-day-picker to behave like that?

• Make disabled days unfocusable.
• Disable any keyboard navigations to disabled days or months.
  • If the whole days in the next month are disabled, Page Down does not change the month.
  • If the days after the 10th in the next month are disabled and the focus is on the 15th in the current month, Page Down moves the focus to the 9th in the next month.

Thanks!

[gpbl]

@kimamula thanks for you reply!

The disabled days are available in the accessibility tree as they are rendered with aria-disabled, since the action associated with it is unavailable. See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled. To me this behavior resemble better the experience for sighted users, which can see the day as disabled.

As consequence of this, the disabled buttons are focusable.

my company's QA team believes that disabled days should not be focusable in terms of accessibility

This is interesting to me. Do you have some docs or research justifying the feedback from your QA team?

If the whole days in the next month are disabled, Page Down does not change the month.

In this case, consider using the toMonth prop: https://react-day-picker.js.org/basics/navigation#limiting-the-month-navigation.

[kimamula]

@gpbl thanks for you reply.

This is interesting to me. Do you have some docs or research justifying the feedback from your QA team?

I shared this issue with accessibility experts at my company and I got this response:

Unless there is specific information that needs to be provided to screen reader users in relation to the disabled element best practice is that they should not receive keyboard focus. Once disabled they are like any other non-interactive element on the page and non-interactive elements should not receive keyboard focus. When doing that it can make screen reader users confused and it creates many unnecessary tab stops for keyboard only users. They mention in the comments that they are giving information to sighted users however that is also not entirely true because they have it in a disabled state that does not meet proper contrast ratios. If it was really important to sighted users that proper contrast would be required. In addition screen reader users can still access that information if needed by using the virtual cursor.

I think this makes sense. What do you think?

In this case, consider using the toMonth prop: https://react-day-picker.js.org/basics/navigation#limiting-the-month-navigation.

I tried toMonth but it seems it doesn't prevent the transition to the next month by Page Down.

[kimamula]

@gpbl I created a PR (#1468) based on my proposal. Could you take a look?