Datepicker Modal Dialog: Fixed next/prev month bug and improve adherence with APG code style guide #2643

jongund · 2023-03-14T03:25:55Z

This PR complements #2618 to provide the remaining changes to resolve issue #2581.

This PR changes behavior of commands for next and previous month and year In the date picker dialog when the currently focused date does not exist in the previous or next month or year. With these changes, if the same day number does not exist in the newly displayed month, the last day of the newly displayed month receives focus.

In addition to the above enhancement, this PR also includes the following changes:

Updates coding practices to use class constructor and pointer events
Updates documentation of page up and page down commands
Updates regression tests for page up and page down commands

Preview updated Date Picker Modal Dialog Example

Review checklist

Editorial review by @mcking65
Functional review by @mcking65
Visual design review by @ariellalgilmore
Code review by @ariellalgilmore
Test review by @jugglinmike & @Paul-Clue

WAI Preview Link (Last built on Tue, 16 May 2023 19:24:24 GMT).

… behavior for dates near end of month (pull #2618) Provides partial resolution of #2581. The remainder of the resolution is provided by #2643. This PR changes behavior of commands for next and previous month and year In the combobox date picker when the currently focused date does not exist in the previous or next month or year. With these changes, if the same day number does not exist in the newly displayed month, the last day of the newly displayed month receives focus. --------- Co-authored-by: Matt King <a11yThinker@gmail.com>

css-meeting-bot · 2023-04-04T18:18:39Z

The ARIA Authoring Practices (APG) Task Force just discussed PR 2643 - Datepicker Modal Dialog: Updated code and fixed next/prev month bug by jongund.

The full IRC log of that discussion

<jugglinmike> Subtopic: PR 2643 - Datepicker Modal Dialog: Updated code and fixed next/prev month bug by jongund
<jugglinmike> github: https://github.com//pull/2643
<jugglinmike> Matt_King: I'll be doing the editorial review
<jugglinmike> Matt_King: I'm looking for support on visual design review, code review, and testing
<jugglinmike> Matt_King: There aren't a lot of changes in this pull request; it's only four files (one CSS and two JS and on HTML)
<jugglinmike> Matt_King: Because there was a small change to the CSS, I want to make sure someone is looking at this visually
<jugglinmike> arigilmore: I can do visual review and code review
<jugglinmike> Matt_King: Great--thank you
<jugglinmike> Alex_Flenniken: I can do the test review
<jugglinmike> Matt_King: arigilmore do you think you'll be able to do that review this week?
<jugglinmike> arigilmore: Yes

css-meeting-bot · 2023-04-11T18:38:55Z

The ARIA Authoring Practices (APG) Task Force just discussed PR 2643 - Datepicker Modal Dialog: Updated code and fixed next/prev month bug by jongund.

The full IRC log of that discussion

<jugglinmike> subtopic: PR 2643 - Datepicker Modal Dialog: Updated code and fixed next/prev month bug by jongund
<jugglinmike> github: https://github.com//pull/2643
<jugglinmike> Matt_King: It looks like arigilmore_ has done her piece
<jugglinmike> Matt_King: Looks like it's just for me and Alex to wrap up

mcking65

Functional and editorial review complete. Good to go.

css-meeting-bot · 2023-04-18T18:15:28Z

The ARIA Authoring Practices (APG) Task Force just discussed PR 2643 - Datepicker Modal Dialog: Updated code and fixed next/prev month bug by jongund.

The full IRC log of that discussion

<jugglinmike> Subtopic: PR 2643 - Datepicker Modal Dialog: Updated code and fixed next/prev month bug by jongund
<jugglinmike> github: https://github.com//pull/2643
<jugglinmike> Matt_King: I think this is really close
<jugglinmike> Matt_King: The only thing we're waiting on is a review of the regression tests by Alex_Flenniken
<jugglinmike> jugglinmike: That will probably not happen this week due to Bocoup's week-long "all-hands" meeting taking place now

a11ydoer · 2023-04-24T21:21:00Z

@alflennik would it be possible for you to review Datepicker Modal Dialog update so that we can merge this?

ccanash · 2023-04-27T18:43:12Z

Hi @a11ydoer , Alex had an issue running the test locally and will need additional time to do this review so we will have to put it into our triaging processes. I will provide an update next week.

jugglinmike · 2023-05-03T17:14:28Z

test/tests/dialog-modal_datepicker.js

+  );
+};
+
+const checkDate = async function assertAriaRoles(t, dateSelector, day) {


Suggested change

const checkDate = async function assertAriaRoles(t, dateSelector, day) {

const checkDate = async function (t, dateSelector, day) {

This line creates a function named assertAriaRoles and stores it in a variable named checkDate. The name is somewhat confusing in this context because this file already has a function stored in the variable assertAriaRoles.

@jugglinmike
Thank you for the feedback, I updated the code.

jugglinmike · 2023-05-03T17:18:44Z

test/tests/dialog-modal_datepicker.js

+};
+
+const checkDate = async function assertAriaRoles(t, dateSelector, day) {
+  const d = day.getDate() < 10 ? '0' + day.getDate() : day.getDate();


Suggested change

const d = day.getDate() < 10 ? '0' + day.getDate() : day.getDate();

const d = String(day.getDate()).padStart(2, '0');

The code works as written, so you can take or leave this suggestion (I just feel it communicates your intent better).

@jugglinmike
Thank you for the suggestion, I updated the code.

jugglinmike · 2023-05-03T18:29:49Z

test/tests/dialog-modal_datepicker.js

+    const startDate = '1/31/2023';
+    const targetDates = [
+      '1/31/2022',
+      '1/31/2021',
+      '1/31/2020',
+      '1/31/2019',
+      '1/31/2018',
+      '1/31/2017',
+    ];


This doesn't demonstrate the bug fix (it passes on the main branch). Starting from 2020-02-29 would do it, though

Suggested change

const startDate = '1/31/2023';

const targetDates = [

'1/31/2022',

'1/31/2021',

'1/31/2020',

'1/31/2019',

'1/31/2018',

'1/31/2017',

];

const startDate = '2/29/2020';

const targetDates = [

'2/28/2019',

'2/28/2018',

'2/28/2017',

'2/29/2016',

'2/28/2015',

'2/28/2014',

];

@jugglinmike
Thank you for the feedback, I updated the code.

css-meeting-bot · 2023-05-16T18:40:30Z

The ARIA Authoring Practices (APG) Task Force just discussed Datepicker Modal Dialog: Fixed next/prev month bug and improve adherence with APG code style guide.

The full IRC log of that discussion

<jugglinmike> Subtopic: Datepicker Modal Dialog: Fixed next/prev month bug and improve adherence with APG code style guide
<jugglinmike> github: https://github.com//pull/2643
<jugglinmike> Matt_King: jongund , about two weeks ago, jugglinmike posted feedback for you on the tests
<jugglinmike> jongund: I'll take a look

jongund · 2023-05-16T19:40:42Z

@jugglinmike @mcking65
Ready to review updated test cases

jugglinmike

The tests look good to @Paul-Clue and me, @jongund! Thanks!

css-meeting-bot · 2023-05-30T18:34:04Z

The ARIA Authoring Practices (APG) Task Force just discussed Datepicker Modal Dialog: Fixed next/prev month bug and improve adherence with APG code style guide.

The full IRC log of that discussion

<jugglinmike> subtopic: Datepicker Modal Dialog: Fixed next/prev month bug and improve adherence with APG code style guide
<jugglinmike> github: https://github.com//pull/2643
<jugglinmike> jugglinmike: I reviewed and approved the tests with Paul at Bocoup.
<jugglinmike> Matt_King: Then I think this is ready to merge

mcking65

Thank you @jongund for all your work on this!! This is now ready to ship!

jongund added 3 commits March 13, 2023 18:36

update cosding practices

9d524d5

fixed next/prev month date selection

1fce2f2

update CSS to override template styling

ecaa5d9

michael-n-cooper-bot mentioned this pull request Mar 14, 2023

apg/bugfix/datepicker-dialog generated by aria-practices w3c/wai-aria-practices#208

Closed

jongund added 3 commits March 14, 2023 08:10

updated page up and page down documentation

6d0d9ee

update regression test for page up key

4221c76

updated regression tests for shift+pagup, pagdown and shift+pagedown

311e718

jongund requested a review from mcking65 March 15, 2023 13:34

This was referenced Apr 4, 2023

Date picker calendar grids: Previous and next month and year functions do not behave as documented #2581

Closed

Combobox Date Picker Example: Change previous and next month and year behavior for dates near end of month #2618

Merged

mcking65 changed the title ~~Datepicker Modal Dialog: Updated code and fixed next/prev month bug~~ Datepicker Modal Dialog: Fixed next/prev month bug and improve adherence with APG code style guide Apr 4, 2023

mcking65 added 5 commits April 3, 2023 22:55

Merge remote-tracking branch 'origin/main' into bugfix/datepicker-dialog

e3b87e5

Merge remote-tracking branch 'origin/main' into bugfix/datepicker-dialog

41f2149

Minor editorial revisions to page up and page down documentation

85eec92

Change IDREF to ID_Reference per issue 1258

f488d03

replace " with quot char

46bc0b3

ariellalgilmore self-requested a review April 4, 2023 18:17

mcking65 requested review from alflennik and removed request for ariellalgilmore April 4, 2023 18:17

ariellalgilmore approved these changes Apr 10, 2023

View reviewed changes

mcking65 approved these changes Apr 16, 2023

View reviewed changes

jugglinmike requested changes May 3, 2023

View reviewed changes

mcking65 removed the request for review from alflennik May 16, 2023 18:39

jongund added 2 commits May 16, 2023 14:09

updated regression tests

92a03d2

fixed date

e544616

jongund requested review from jugglinmike and mcking65 May 16, 2023 19:40

jugglinmike approved these changes May 18, 2023

View reviewed changes

mcking65 approved these changes Jun 6, 2023

View reviewed changes

mcking65 merged commit 32c7ef2 into main Jun 6, 2023
20 checks passed

mcking65 deleted the bugfix/datepicker-dialog branch June 6, 2023 15:48

mcking65 added this to In progress in Date Picker Pattern and Examples Development Project via automation Jun 6, 2023

mcking65 added this to the H1/2023 Content Updates milestone Jun 6, 2023

mcking65 moved this from In progress to Complete in Date Picker Pattern and Examples Development Project Jun 6, 2023

mcking65 modified the milestones: H1/2023 Content Updates, 2023-06-20 Publication Pull Requests Apr 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Datepicker Modal Dialog: Fixed next/prev month bug and improve adherence with APG code style guide #2643

Datepicker Modal Dialog: Fixed next/prev month bug and improve adherence with APG code style guide #2643

jongund commented Mar 14, 2023 •

edited by jugglinmike

css-meeting-bot commented Apr 4, 2023

css-meeting-bot commented Apr 11, 2023

mcking65 left a comment

css-meeting-bot commented Apr 18, 2023

a11ydoer commented Apr 24, 2023

ccanash commented Apr 27, 2023

jugglinmike May 3, 2023

jongund May 16, 2023

jugglinmike May 3, 2023

jongund May 16, 2023

jugglinmike May 3, 2023

jongund May 16, 2023

css-meeting-bot commented May 16, 2023

jongund commented May 16, 2023

jugglinmike left a comment

css-meeting-bot commented May 30, 2023

mcking65 left a comment

	const checkDate = async function assertAriaRoles(t, dateSelector, day) {
	const checkDate = async function (t, dateSelector, day) {

	const d = day.getDate() < 10 ? '0' + day.getDate() : day.getDate();
	const d = String(day.getDate()).padStart(2, '0');

Datepicker Modal Dialog: Fixed next/prev month bug and improve adherence with APG code style guide #2643

Datepicker Modal Dialog: Fixed next/prev month bug and improve adherence with APG code style guide #2643

Conversation

jongund commented Mar 14, 2023 • edited by jugglinmike

Review checklist

css-meeting-bot commented Apr 4, 2023

css-meeting-bot commented Apr 11, 2023

mcking65 left a comment

Choose a reason for hiding this comment

css-meeting-bot commented Apr 18, 2023

a11ydoer commented Apr 24, 2023

ccanash commented Apr 27, 2023

jugglinmike May 3, 2023

Choose a reason for hiding this comment

jongund May 16, 2023

Choose a reason for hiding this comment

jugglinmike May 3, 2023

Choose a reason for hiding this comment

jongund May 16, 2023

Choose a reason for hiding this comment

jugglinmike May 3, 2023

Choose a reason for hiding this comment

jongund May 16, 2023

Choose a reason for hiding this comment

css-meeting-bot commented May 16, 2023

jongund commented May 16, 2023

jugglinmike left a comment

Choose a reason for hiding this comment

css-meeting-bot commented May 30, 2023

mcking65 left a comment

Choose a reason for hiding this comment

jongund commented Mar 14, 2023 •

edited by jugglinmike