DatePicker Required ARIA child role not present when accessibility insights tool is run

[v-ajrai]

DatePicker Required ARIA child role not present when accessibility tool is run

Environment Information

OS: Win 10
Browser: Chrome

Describe the issue:

DatePicker Required ARIA child role not present when accessibility tool is run

Please provide a reproduction of the issue in a codepen:

https://developer.microsoft.com/en-us/fluentui#/controls/web/datepicker

Actual behavior:

DatePicker Required ARIA child role not present when accessibility tool is run

Expected behavior:

DatePicker Required ARIA child role should be present when accessibility tool is run

[ecraig12345]

Thanks for reporting this, though in the future can you please include the details of the error in the issue (what element it was reported on and what the rule says is missing)?

There are actually multiple issues here:

Expanded DatePicker missing role='listbox' child

This applies to DatePicker in all versions (v7 OUFR, v7 @uifabric/date-time, and v8).

When expanded, the DatePicker's <input> has role='combobox' aria-expanded='true', and A11y Insights complains that it's missing a child/associated element with role='listbox'. Presumably that role would need to go on the calendar popup, but I'm not sure whether that would cause other issues.

Need to investigate more (and would appreciate @lorejoh12's input) but the options here are:

• Add listbox to the calendar popup and ensure it's properly associated with the input. Not sure what other issues this might cause (messing up reading, invalid child roles, etc).
• Change the role of the DatePicker input from combobox to something else. combobox seems a little weird in this context but I'm not sure what an appropriate alternative would be.

v7 Calendar day buttons have invalid attributes for role

This only applies to OUFR v7 Calendar and may be less important to fix since that version of the calendar is deprecated.

The button elements for each day have invalid attributes aria-readonly="true" and aria-selected="false" for their implicit role of button. These attributes would be valid for the gridcell role, but that's applied to the parent td instead.

v7 @uifabric/date-time Calendar (and therefore v8 Calendar) solves this by marking the td as role="presentation" and the button as role="gridcell". This fix could probably also be applied to v7 Calendar if we decide it's important.

[abhishek-msft]

I am afraid, but looks like there is no significant effort on fixing accessibility issues on this library!

[ecraig12345]

Accessibility is a high priority for our team, and as you can see from our list of recent PRs, there's a lot of active work in that area.

The issue with the invalid role attributes has been fixed in the version 8 DatePicker/Calendar, so now that version 8 is released we're not going to fix that in version 7.

I talked to @smhigley about the missing listbox role (that part of the issue is a duplicate of #14461) and this is actually a bug with the tool. The pattern that we're using is a valid ARIA 1.2 combobox pattern, but axe-core (the underlying tool for accessibility insights) still needs to be updated to accept that pattern as valid. The tracking issue on their side is dequelabs/axe-core#2505, so I'm going to close this as external.