Foremost i'm a Designer and i'll do my best to learn a bit of frontend developpement but this doen't make me a Developper (yes you will have to recode it on a better way :) ).
Anyway, accessibility i a bit of my speciality so i think i can suggest some improvements.
WAI-ARIA design pattern
Design pattern provided by WAI-ARIA suggest the usage of the role dialog which make the appearing of the datepicker on focus not very convenient. This is what will append by applying the Design Pattern as expexted :
the user will focus in the field but never been told information about the field (type, state, label etc.) - because he will directly be redirected to the first focusable element in the dialog (as expected by the dialog role)
Not so good.
I suggest maybe to manage two UI. One with the datepicker shown on the focus, one with a Button that opens the datepicker. This can maybe be set via a props or something.
Improvements
Real Buttons
With role grid on the table columnheader, rowgroup, row and cell roles are made explicit by using an html table but when you put a role button on the table cell this is not working as expected any more.
This i why i always add a specific button (same thing when you sort on table head for example)
Focus trap
The role dialog expects three major things :
to trap the focus on the modal
to set the focus on the first focusable element (here our selected date)
to set the focus back to the input when datepicker is closed (TODO)
Role grid
The role grid was add the the table to let assistive technology users to know how to interact with teh calendar. One this is done, you should remove DatePickerDescription which becomes useless.
Disabled attr
I've hadded a disabled attr on the buttons in the cells to resolve some aria-disabled attr compatiblity issues.
Just to open discussion on some improvements :).
Foremost i'm a Designer and i'll do my best to learn a bit of frontend developpement but this doen't make me a Developper (yes you will have to recode it on a better way :) ). Anyway, accessibility i a bit of my speciality so i think i can suggest some improvements.
WAI-ARIA design pattern
Design pattern provided by WAI-ARIA suggest the usage of the role dialog which make the appearing of the datepicker on focus not very convenient. This is what will append by applying the Design Pattern as expexted :
Not so good.
I suggest maybe to manage two UI. One with the datepicker shown on the focus, one with a Button that opens the datepicker. This can maybe be set via a props or something.
Improvements
Real Buttons
With role grid on the table columnheader, rowgroup, row and cell roles are made explicit by using an html table but when you put a role button on the table cell this is not working as expected any more. This i why i always add a specific button (same thing when you sort on table head for example)
Focus trap
The role dialog expects three major things :
Role grid
The role grid was add the the table to let assistive technology users to know how to interact with teh calendar. One this is done, you should remove DatePickerDescription which becomes useless.
Disabled attr
I've hadded a disabled attr on the buttons in the cells to resolve some aria-disabled attr compatiblity issues.