Skip to content

Upgrade datetime picker tool for keyboard navigation and accessibility #36230

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 8 commits into from
May 2, 2025
Merged

Upgrade datetime picker tool for keyboard navigation and accessibility #36230

merged 8 commits into from
May 2, 2025
+55 −77

Conversation

esoergel
Copy link
Contributor

@esoergel esoergel commented Apr 18, 2025 •
edited
Loading

Product Description

Update the tempus dominus library to incorporate the recent additions we paid for:

  • Keyboard navigation
  • Screen reader compatibility

Here are the detailed changes:

  • Previously, selecting the input field popped open the widget. Now you have to click the calendar icon to access the widget (this also makes it easier to type out dates if you desire).
  • You can tab to the calendar icon now, hit enter, and have it open the widget, which is keyboard navigable
  • “Escape” closes the widget, though it doesn’t clear selections
  • The date range widget (used in case search) now closes automatically when the second date is selected. I did this because the single date widget behaves similarly, and I didn’t find the “escape” key functionality to be intuitive.
  • If you already have a date range selected and need to change the date range, you should click the trash icon. Attempting to select a new date range is kinda janky. This behavior is partially due to the library, though the auto-close functionality makes it worse. I have an idea for how to fix this in the core library, but I’m not certain whether the maintainer will accept the change.

Technical Summary

https://dimagi.atlassian.net/browse/USH-5822

The first commit is the library upgrade, the rest are associated changes to make this work better with keyboard navigation.

Previously in QA here.

Feature Flag

Safety Assurance

Safety story

Automated test coverage

QA Plan

Doing QA on staging: https://dimagi.atlassian.net/browse/QA-7413

Rollback instructions

  • This PR can be reverted after deploy with no further considerations

Labels & Review

  • Risk label is set correctly
  • The set of people pinged as reviewers is appropriate for the level of risk of the change

esoergel added 7 commits April 18, 2025 10:50
@esoergel
Update tempus dominus library
2587178
@esoergel
Use shared HTML for both types of datetime widgets
f261bc4
@esoergel
Target input-group instead of input field
6ef3c74 
As per tempus-dominus's docs.  This lets us make the icon selectable.
This commit also adds a calendar icon for daterange fields
https://getdatepicker.com/6/repl.html
@esoergel
Also update datetime widget in form entry
a01af45
@esoergel
There is no Entry with templateType = 'datetime'
7509e26 
And of course datetime questions show up as unsupported in webapps
@esoergel
Use same HTML for both tempus dominus widgets
1a367dc 
(And also for datetimes if we add those back in the future)
@esoergel
Make daterange picker close automatically
9c9785c 
When second date is selected.  This is still a little janky - if you
reopen, it's hard to select a new date range unless you clear first.
I think this would need to be addressed in the library
@dimagimon dimagimon added dependencies Pull requests that update a dependency file Risk: Medium Change affects files that have been flagged as medium risk. labels Apr 18, 2025
@esoergel esoergel changed the title Es/tempus dominus 2 Upgrade datetime picker tool for keyboard navigation and accessibility Apr 18, 2025
@esoergel esoergel added awaiting QA QA in progress. Do not merge product/all-users-all-environments Change impacts all users on all environments labels Apr 18, 2025
millerdev
millerdev reviewed Apr 21, 2025
View reviewed changes
Copy link
Contributor

@millerdev millerdev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Responding on behalf of the dependency pod: the upgrade looks fine, assuming you have reviewed other changes that are included in this upgrade an determined that they are safe for our usage.

@esoergel esoergel marked this pull request as ready for review May 1, 2025 13:22
@esoergel esoergel added QA Passed and removed awaiting QA QA in progress. Do not merge labels May 1, 2025
@esoergel esoergel requested a review from minhaminha May 1, 2025 13:23
@esoergel esoergel merged commit b6058e2 into master May 2, 2025
16 checks passed
@esoergel esoergel deleted the es/tempus-dominus-2 branch May 2, 2025 13:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@millerdev millerdev millerdev left review comments

@Jtang-1 Jtang-1 Jtang-1 approved these changes

@orangejenny orangejenny Awaiting requested review from orangejenny orangejenny is a code owner

@biyeun biyeun Awaiting requested review from biyeun biyeun is a code owner

@MartinRiese MartinRiese Awaiting requested review from MartinRiese MartinRiese is a code owner

@AddisonDunn AddisonDunn Awaiting requested review from AddisonDunn

@stephherbers stephherbers Awaiting requested review from stephherbers stephherbers is a code owner

@Robert-Costello Robert-Costello Awaiting requested review from Robert-Costello Robert-Costello is a code owner

@nospame nospame Awaiting requested review from nospame nospame is a code owner

@minhaminha minhaminha Awaiting requested review from minhaminha

Assignees
No one assigned
Labels
dependencies Pull requests that update a dependency file product/all-users-all-environments Change impacts all users on all environments QA Passed Risk: Medium Change affects files that have been flagged as medium risk.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@esoergel @millerdev @Jtang-1 @dimagimon