[WIP] dev/accessibility#10 : Make datepicker accessible

[monishdeb]

Overview

A user should be able to use datepicker with the help of control keys, not just cursor actions, pretty much similar to this example
https://dequeuniversity.com/library/aria/date-pickers/sf-date-picker

Before

Datepicker widget is not accessible

After

Datepicker widget is accessible via control keys:

[civibot]

(Standard links)

• If this is your first pull-request for CiviCRM, please browse CONTRIBUTING.md for information about the development and testing processes.
• If you are reviewing this pull-request, you may wish to consult the test sites and the Review Standards (long template, short template).

[monishdeb]

@colemanw I have moved the datepicker widget code in a separate file and added the handlers for control keys here

Please have a look.

[colemanw]

If you change this in Common.js to CRM.utils.copyAttribues then you don't need to dupilcate the fn.

[colemanw]

@monishdeb it would be a lot easier to review this PR if it were split into two commits:

1. Move datepicker code from Common.js -> new file (with no code changes).
2. Code changes to make it accessible.

Then I could click on the 2nd commit and see what you've changed in the datepicker code.

[eileenmcnaughton]

@monishdeb test fail relates

[eileenmcnaughton]

@monishdeb let's close this for now & replace with a PR that moves the code to the new file as the next step & then follow up - per comments above

[eileenmcnaughton]

@monishdeb what is the status now? Looks like you maybe rebased after the last comment

[eileenmcnaughton]

test this please

[Clairepickle]

tried to use on test site in Safari, new date picker inconsistently available from create new menu, also can't seem to get functionality to work as in example supplied - tabbing into picker selects today's date but unable to change value, further tab takes to month and year drop downs but down arrow does not open these as would expect, also prevents user typing date directly as in current picker which is the usual method for visually impaired users, could further usage instructions be provided?

[monishdeb]

Thanks @Clairepickle for your feedback. I will work further in this PR to mimic the accessible datepicker presented in https://dequeuniversity.com/library/aria/date-pickers/sf-date-picker Feel free to suggest any other accessible options which is not present in the example. I am marking this PR with WIP

[seamuslee001]

@monishdeb @colemanw where are we at with this?

[eileenmcnaughton]

@monishdeb this one is stale :-( Closing for now