While react-day-picker
works with the keyboard, its semantics could be improved by adding the appropriate ARIA attributes, so screen readers will better interpret how the component works.
Probably the best React exemplar I've found which achieves this nicely is react-widgets
Calendar. However, I see the customizability of the react-day-picker
project being much more ideal. I really like the clean, small ES6 implementation with no dependencies outside of React.
The following are some suggestions based on my research. Some suggestions are a result of adding back certain semantics which were lost due to switching from <table>
to <div>
. Suggestions are organized by the element to which it affects, identified by its class name.
.DayPicker-Month
Authors MUST ensure that elements with role gridcell are owned by elements with role row, which in turn are owned by an element with role rowgroup, grid or treegrid.
A grid is considered editable unless otherwise specified. To make a grid read-only, set the aria-readonly attribute of the grid to true. The value of the grid element's aria-readonly attribute is implicitly propagated to all of its owned gridcell elements, and will be exposed through the accessibility API.
.DayPicker-Caption
- Add unique id to work with
.DayPicker-Month
enhancements.
.DayPicker-Weekdays
.DayPicker-Weekday
.DayPicker-Body
.DayPicker-Day
gridcell elements with the aria-selected attribute set can be selected for user interaction
Additional considerations
Since aria-labelledby
and aria-activedescendant
reference an id, it may be good to dynamically generate unique ids for elements they reference, so you avoid the problem of having different instances of react-day-picker
accidentally cross-reference each other.