From ce0336bd82d7d3651abcbde86af644197ddbc629 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Mon, 3 Apr 2023 22:24:12 -0500
Subject: [PATCH] Combobox Date Picker Example: Change previous and next month
 and year 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>
---
 .../examples/combobox-datepicker.html         |  22 +-
 .../examples/css/combobox-datepicker.css      |  10 +
 .../examples/js/combobox-datepicker.js        |  49 +-
 test/tests/combobox_datepicker.js             | 447 +++++++++++++++---
 4 files changed, 448 insertions(+), 80 deletions(-)

diff --git a/content/patterns/combobox/examples/combobox-datepicker.html b/content/patterns/combobox/examples/combobox-datepicker.html
index 7a6f47d3d5..fccb515cf1 100644
--- a/content/patterns/combobox/examples/combobox-datepicker.html
+++ b/content/patterns/combobox/examples/combobox-datepicker.html
@@ -312,7 +312,7 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
                   </ul>
                 </td>
               </tr>
-              <tr data-test-id="grid-return">
+              <tr data-test-id="grid-enter">
                 <th><kbd>Enter</kbd></th>
                 <td>
                   <ul>
@@ -352,8 +352,8 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
                   <ul>
                     <li>Changes the grid of dates to the previous month.</li>
                     <li>
-                      Moves focus to the same day of the same week.
-                      If that day does not exist, moves focus to the same day of the previous or next week.
+                      Moves focus to the day of the month that has the same number.
+                      If that day does not exist, moves focus to the last day of the month.
                     </li>
                   </ul>
                 </td>
@@ -365,10 +365,10 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
                 </th>
                 <td>
                   <ul>
-                    <li>Changes the grid of dates to the previous year.</li>
+                    <li>Changes the grid of dates to the same month in the previous year.</li>
                     <li>
-                      Moves focus to the same day of the same week in the previous year.
-                      If that day does not exist, moves focus to the same day of the previous or next week.
+Moves focus to the day of the month that has the same number.
+                      If that day does not exist, moves focus to the last day of the month.
                     </li>
                   </ul>
                 </td>
@@ -379,8 +379,8 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
                   <ul>
                     <li>Changes the grid of dates to the next month.</li>
                     <li>
-                      Moves focus to the same day of the same week.
-                      If that day does not exist, moves focus to the same day of previous or next week.
+                      Moves focus to the day of the month that has the same number.
+                      If that day does not exist, moves focus to the last day of the month.
                     </li>
                   </ul>
                 </td>
@@ -392,10 +392,10 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
                 </th>
                 <td>
                   <ul>
-                    <li>Changes the grid of dates to the next year.</li>
+                    <li>Changes the grid of dates to the same month in the next year.</li>
                     <li>
-                      Moves focus to the same day of the same week in the next year.
-                      If that day does not exist, moves focus to the same day of previous or next week.
+                      Moves focus to the day of the month that has the same number.
+                      If that day does not exist, moves focus to the last day of the month.
                     </li>
                   </ul>
                 </td>
diff --git a/content/patterns/combobox/examples/css/combobox-datepicker.css b/content/patterns/combobox/examples/css/combobox-datepicker.css
index c4161d02ed..920bec46cd 100644
--- a/content/patterns/combobox/examples/css/combobox-datepicker.css
+++ b/content/patterns/combobox/examples/css/combobox-datepicker.css
@@ -127,6 +127,7 @@
   color: white;
   text-transform: none;
   font-weight: bold;
+  border: none;
 }
 
 .combobox-datepicker .dates {
@@ -134,6 +135,7 @@
   padding-left: 1em;
   padding-right: 1em;
   padding-top: 1em;
+  border-collapse: separate;
 }
 
 .combobox-datepicker .prev-year,
@@ -193,9 +195,16 @@
   text-align: center;
 }
 
+.combobox-datepicker table {
+  border: none;
+}
+
 .combobox-datepicker .dates th,
 .combobox-datepicker .dates td {
   text-align: center;
+  color: black;
+  background: white;
+  border: none;
 }
 
 .combobox-datepicker .dates tr {
@@ -227,6 +236,7 @@
 .combobox-datepicker .dates td:hover {
   padding: 0;
   background-color: hsl(216deg 80% 92%);
+  color: black;
 }
 
 .combobox-datepicker .dates td:focus {
diff --git a/content/patterns/combobox/examples/js/combobox-datepicker.js b/content/patterns/combobox/examples/js/combobox-datepicker.js
index 607e824ba9..4a2b38da1c 100644
--- a/content/patterns/combobox/examples/js/combobox-datepicker.js
+++ b/content/patterns/combobox/examples/js/combobox-datepicker.js
@@ -48,6 +48,7 @@ class ComboboxDatePicker {
     this.tbodyNode = this.dialogNode.querySelector('table.dates tbody');
 
     this.lastRowNode = null;
+    this.lastDate = -1;
 
     this.days = [];
 
@@ -234,6 +235,7 @@ class ComboboxDatePicker {
     this.buttonNode.classList.add('open');
     this.getDateFromCombobox();
     this.updateGrid();
+    this.lastDate = this.focusDay.getDate();
   }
 
   isOpen() {
@@ -497,59 +499,96 @@ class ComboboxDatePicker {
     this.setFocusDay();
   }
 
+  changeMonth(currentDate, numMonths) {
+    const getDays = (year, month) => new Date(year, month, 0).getDate();
+
+    const isPrev = numMonths < 0;
+    const numYears = Math.trunc(Math.abs(numMonths) / 12);
+    numMonths = Math.abs(numMonths) % 12;
+
+    const newYear = isPrev
+      ? currentDate.getFullYear() - numYears
+      : currentDate.getFullYear() + numYears;
+
+    const newMonth = isPrev
+      ? currentDate.getMonth() - numMonths
+      : currentDate.getMonth() + numMonths;
+
+    const newDate = new Date(newYear, newMonth, 1);
+
+    const daysInMonth = getDays(newDate.getFullYear(), newDate.getMonth() + 1);
+
+    // If lastDat is not initialized set to current date
+    this.lastDate = this.lastDate ? this.lastDate : currentDate.getDate();
+
+    if (this.lastDate > daysInMonth) {
+      newDate.setDate(daysInMonth);
+    } else {
+      newDate.setDate(this.lastDate);
+    }
+
+    return newDate;
+  }
+
   moveToNextYear() {
-    this.focusDay.setFullYear(this.focusDay.getFullYear() + 1);
+    this.focusDay = this.changeMonth(this.focusDay, 12);
     this.updateGrid();
   }
 
   moveToPreviousYear() {
-    this.focusDay.setFullYear(this.focusDay.getFullYear() - 1);
+    this.focusDay = this.changeMonth(this.focusDay, -12);
     this.updateGrid();
   }
 
   moveToNextMonth() {
-    this.focusDay.setMonth(this.focusDay.getMonth() + 1);
+    this.focusDay = this.changeMonth(this.focusDay, 1);
     this.updateGrid();
   }
 
   moveToPreviousMonth() {
-    this.focusDay.setMonth(this.focusDay.getMonth() - 1);
+    this.focusDay = this.changeMonth(this.focusDay, -1);
     this.updateGrid();
   }
 
   moveFocusToNextDay() {
     var d = new Date(this.focusDay);
     d.setDate(d.getDate() + 1);
+    this.lastDate = d.getDate();
     this.moveFocusToDay(d);
   }
 
   moveFocusToNextWeek() {
     var d = new Date(this.focusDay);
     d.setDate(d.getDate() + 7);
+    this.lastDate = d.getDate();
     this.moveFocusToDay(d);
   }
 
   moveFocusToPreviousDay() {
     var d = new Date(this.focusDay);
     d.setDate(d.getDate() - 1);
+    this.lastDate = d.getDate();
     this.moveFocusToDay(d);
   }
 
   moveFocusToPreviousWeek() {
     var d = new Date(this.focusDay);
     d.setDate(d.getDate() - 7);
+    this.lastDate = d.getDate();
     this.moveFocusToDay(d);
   }
 
   moveFocusToFirstDayOfWeek() {
     var d = new Date(this.focusDay);
     d.setDate(d.getDate() - d.getDay());
+    this.lastDate = d.getDate();
     this.moveFocusToDay(d);
   }
 
   moveFocusToLastDayOfWeek() {
     var d = new Date(this.focusDay);
     d.setDate(d.getDate() + (6 - d.getDay()));
+    this.lastDate = d.getDate();
     this.moveFocusToDay(d);
   }
 
@@ -736,7 +775,7 @@ class ComboboxDatePicker {
       );
       this.selectedDay = new Date(this.focusDay);
     } else {
-      // If not a valid date (MM/DD/YY) initialize with todays date
+      // If not a valid date (MM/DD/YY) initialize with today's date
       this.focusDay = new Date();
       this.selectedDay = new Date(0, 0, 1);
     }
diff --git a/test/tests/combobox_datepicker.js b/test/tests/combobox_datepicker.js
index c7f84bfef5..0478d24216 100644
--- a/test/tests/combobox_datepicker.js
+++ b/test/tests/combobox_datepicker.js
@@ -1,5 +1,5 @@
 const { ariaTest } = require('..');
-const { Key } = require('selenium-webdriver');
+const { By, Key } = require('selenium-webdriver');
 const assertAttributeValues = require('../util/assertAttributeValues');
 const assertAttributeDNE = require('../util/assertAttributeDNE');
 const assertAriaLabelledby = require('../util/assertAriaLabelledby');
@@ -16,6 +16,7 @@ const ex = {
   comboboxSelector: '#ex1 .group input',
   buttonSelector: '#ex1 .group button',
   calendarNavigationButtonSelector: '#ex1 [role="dialog"] .header button',
+  currentlyFocusedDay: '#ex1 [role="dialog"] td[tabindex="0"]',
   dialogSelector: '#ex1 [role="dialog"]',
   cancelSelector: '#ex1 [role="dialog"] button[value="cancel"]',
   dialogMessageSelector: '#ex1 .dialog-message',
@@ -31,6 +32,7 @@ const ex = {
   prevMonth: '#ex1 [role="dialog"] button.prev-month',
   nextMonth: '#ex1 [role="dialog"] button.next-month',
   nextYear: '#ex1 [role="dialog"] button.next-year',
+  selectedDay: '#ex1 [role="dialog"] td[aria-selected="true"]',
 };
 
 ex.allFocusableElementsInDialog = [
@@ -43,6 +45,41 @@ ex.allFocusableElementsInDialog = [
   ex.nextYear,
 ];
 
+const setDate = async function (t, day) {
+  const m = day.getMonth() + 1;
+  const d = day.getDate();
+  const y = day.getFullYear();
+
+  await (await t.context.queryElement(t, ex.comboboxSelector)).click();
+  return t.context.session.executeScript(
+    function () {
+      const inputSelector = arguments[0];
+      const month = arguments[1];
+      const day = arguments[2];
+      const year = arguments[3];
+      document.querySelector(inputSelector).value = `${month}/${day}/${year}`;
+    },
+    ex.comboboxSelector,
+    m,
+    d,
+    y
+  );
+};
+
+const checkDate = async function assertAriaRoles(t, dateSelector, day) {
+  const d = day.getDate() < 10 ? '0' + day.getDate() : day.getDate();
+  const m =
+    day.getMonth() < 9 ? '0' + (day.getMonth() + 1) : day.getMonth() + 1;
+  const targetDate = `${day.getFullYear()}-${m}-${d}`;
+
+  t.is(
+    await t.context.session
+      .findElement(By.css(dateSelector))
+      .getAttribute('data-date'),
+    targetDate
+  );
+};
+
 const setDateToJanFirst2019 = async function (t) {
   await (await t.context.queryElement(t, ex.comboboxSelector)).click();
   return t.context.session.executeScript(function () {
@@ -190,15 +227,15 @@ ariaTest(
 );
 
 ariaTest(
-  'aria-live="polite" on keyboard support message',
+  'aria-autocomplete="none" on textbox',
   exampleFile,
-  'dialog-aria-live',
+  'textbox-aria-autocomplete',
   async (t) => {
     await assertAttributeValues(
       t,
-      ex.dialogMessageSelector,
-      'aria-live',
-      'polite'
+      ex.comboboxSelector,
+      'aria-autocomplete',
+      'none'
     );
   }
 );
@@ -226,6 +263,20 @@ ariaTest(
   }
 );
 
+ariaTest(
+  'aria-live="polite" on keyboard support message',
+  exampleFile,
+  'dialog-aria-live',
+  async (t) => {
+    await assertAttributeValues(
+      t,
+      ex.dialogMessageSelector,
+      'aria-live',
+      'polite'
+    );
+  }
+);
+
 ariaTest('grid role on table element', exampleFile, 'grid-role', async (t) => {
   await assertAriaRoles(t, 'ex1', 'grid', 1, 'table');
 });
@@ -522,138 +573,406 @@ ariaTest(
   }
 );
 
-// TODO: Missing tests. Either mark as "test-not-required" or write the test.
-ariaTest.failing(
-  `Test not implemented: grid-space`,
+ariaTest(
+  'ENTER selects date in focus and closes dialog box',
   exampleFile,
-  'grid-space',
+  'grid-enter',
   async (t) => {
-    t.fail();
+    // By default, focus will be on today's date.
+    let day = new Date();
+
+    let combo = await t.context.queryElement(t, ex.comboboxSelector);
+    await setDate(t, day);
+    await combo.sendKeys(Key.ARROW_DOWN);
+
+    await t.context.session
+      .findElement(By.css(ex.selectedDay))
+      .sendKeys(Key.ARROW_RIGHT);
+    await t.context.session
+      .findElement(By.css(ex.currentlyFocusedDay))
+      .sendKeys(Key.ENTER);
+
+    day.setDate(day.getDate() + 1);
+
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.comboboxSelector))
+        .getAttribute('value'),
+      `${day.getMonth() + 1}/${day.getDate()}/${day.getFullYear()}`
+    );
   }
 );
 
-ariaTest.failing(
-  `Test not implemented: grid-return`,
+ariaTest(
+  'SPACE selects date in focus',
   exampleFile,
-  'grid-return',
+  'grid-space',
   async (t) => {
-    t.fail();
+    // By default, focus will be on todays date.
+    let day = new Date();
+
+    let combo = await t.context.queryElement(t, ex.comboboxSelector);
+    await setDate(t, day);
+    await combo.sendKeys(Key.ARROW_DOWN);
+
+    await t.context.session
+      .findElement(By.css(ex.selectedDay))
+      .sendKeys(Key.ARROW_RIGHT);
+    await t.context.session
+      .findElement(By.css(ex.currentlyFocusedDay))
+      .sendKeys(' ');
+
+    day.setDate(day.getDate() + 1);
+    await checkDate(t, ex.selectedDay, day);
   }
 );
 
-ariaTest.failing(
-  `Test not implemented: grid-up-arrow`,
+ariaTest(
+  `UP ARROW moves focus to same day on previous week`,
   exampleFile,
   'grid-up-arrow',
   async (t) => {
-    t.fail();
+    // By default, focus will be on todays date.
+    let day = new Date();
+
+    let combo = await t.context.queryElement(t, ex.comboboxSelector);
+    await setDate(t, day);
+    await combo.sendKeys(Key.ARROW_DOWN);
+
+    await t.context.session
+      .findElement(By.css(ex.selectedDay))
+      .sendKeys(Key.ARROW_UP);
+
+    day.setDate(day.getDate() - 7);
+    await checkDate(t, ex.currentlyFocusedDay, day);
   }
 );
 
-ariaTest.failing(
-  `Test not implemented: grid-down-arrow`,
+ariaTest(
+  `DOWN ARROW moves focus to same day on next week`,
   exampleFile,
   'grid-down-arrow',
   async (t) => {
-    t.fail();
+    // By default, focus will be on todays date.
+    let day = new Date();
+
+    let combo = await t.context.queryElement(t, ex.comboboxSelector);
+    await setDate(t, day);
+    await combo.sendKeys(Key.ARROW_DOWN);
+
+    await t.context.session
+      .findElement(By.css(ex.selectedDay))
+      .sendKeys(Key.ARROW_DOWN);
+
+    day.setDate(day.getDate() + 7);
+    await checkDate(t, ex.currentlyFocusedDay, day);
   }
 );
 
-ariaTest.failing(
-  `Test not implemented: grid-right-arrow`,
+ariaTest(
+  `RIGHT ARROW moves focus to next day`,
   exampleFile,
   'grid-right-arrow',
   async (t) => {
-    t.fail();
+    // By default, focus will be on todays date.
+    let day = new Date();
+
+    let combo = await t.context.queryElement(t, ex.comboboxSelector);
+    await setDate(t, day);
+    await combo.sendKeys(Key.ARROW_DOWN);
+
+    await t.context.session
+      .findElement(By.css(ex.selectedDay))
+      .sendKeys(Key.ARROW_RIGHT);
+
+    day.setDate(day.getDate() + 1);
+    await checkDate(t, ex.currentlyFocusedDay, day);
   }
 );
 
-ariaTest.failing(
-  `Test not implemented: grid-left-arrow`,
+ariaTest(
+  `LEFT ARROW moves focus to previous day`,
   exampleFile,
   'grid-left-arrow',
   async (t) => {
-    t.fail();
+    // By default, focus will be on todays date.
+    let day = new Date();
+
+    let combo = await t.context.queryElement(t, ex.comboboxSelector);
+    await setDate(t, day);
+    await combo.sendKeys(Key.ARROW_DOWN);
+
+    await t.context.session
+      .findElement(By.css(ex.selectedDay))
+      .sendKeys(Key.ARROW_LEFT);
+
+    day.setDate(day.getDate() - 1);
+    await checkDate(t, ex.currentlyFocusedDay, day);
   }
 );
 
-ariaTest.failing(
-  `Test not implemented: grid-home`,
+ariaTest(
+  `HOME moves focus to the Sunday of the current week`,
   exampleFile,
   'grid-home',
   async (t) => {
-    t.fail();
+    const dates = [
+      ['3/1/2023', '2/26/2023'],
+      ['3/2/2023', '2/26/2023'],
+      ['3/3/2023', '2/26/2023'],
+      ['3/4/2023', '2/26/2023'],
+      ['3/5/2023', '3/5/2023'],
+      ['3/6/2023', '3/5/2023'],
+    ];
+
+    for (let i = 0; i < dates.length; i += 1) {
+      let startDate = dates[i][0];
+      let targetDate = dates[i][1];
+
+      let day = new Date(startDate);
+
+      let combo = await t.context.queryElement(t, ex.comboboxSelector);
+      await setDate(t, day);
+      await combo.sendKeys(Key.ARROW_DOWN);
+
+      await t.context.session
+        .findElement(By.css(ex.selectedDay))
+        .sendKeys(Key.HOME);
+
+      day = new Date(targetDate);
+      await checkDate(t, ex.currentlyFocusedDay, day);
+    }
   }
 );
 
-ariaTest.failing(
-  `Test not implemented: grid-end`,
+ariaTest(
+  `END moves focus to the Saturday of the current week`,
   exampleFile,
   'grid-end',
   async (t) => {
-    t.fail();
+    const dates = [
+      ['2/28/2023', '3/4/2023'],
+      ['3/1/2023', '3/4/2023'],
+      ['3/2/2023', '3/4/2023'],
+      ['3/3/2023', '3/4/2023'],
+      ['3/4/2023', '3/4/2023'],
+      ['3/5/2023', '3/11/2023'],
+    ];
+
+    for (let i = 0; i < dates.length; i += 1) {
+      let startDate = dates[i][0];
+      let targetDate = dates[i][1];
+
+      let day = new Date(startDate);
+
+      let combo = await t.context.queryElement(t, ex.comboboxSelector);
+      await setDate(t, day);
+      await combo.sendKeys(Key.ARROW_DOWN);
+
+      await t.context.session
+        .findElement(By.css(ex.selectedDay))
+        .sendKeys(Key.END);
+
+      day = new Date(targetDate);
+      await checkDate(t, ex.currentlyFocusedDay, day);
+    }
   }
 );
 
-ariaTest.failing(
-  `Test not implemented: grid-pageup`,
+ariaTest(
+  `PAGE UP moves focus to same day on previous month`,
   exampleFile,
   'grid-pageup',
   async (t) => {
-    t.fail();
+    const startDate = '1/31/2023';
+    const targetDates = [
+      '12/31/2022',
+      '11/30/2022',
+      '10/31/2022',
+      '9/30/2022',
+      '8/31/2022',
+      '7/31/2022',
+      '6/30/2022',
+      '5/31/2022',
+      '4/30/2022',
+      '3/31/2022',
+      '2/28/2022',
+      '1/31/2022',
+    ];
+
+    let combo = await t.context.queryElement(t, ex.comboboxSelector);
+    let day = new Date(startDate);
+    await setDate(t, day);
+    await combo.sendKeys(Key.ARROW_DOWN);
+
+    for (let i = 0; i < targetDates.length; i += 1) {
+      day = new Date(targetDates[i]);
+
+      await t.context.session
+        .findElement(By.css(ex.currentlyFocusedDay))
+        .sendKeys(Key.PAGE_UP);
+
+      await checkDate(t, ex.currentlyFocusedDay, day);
+    }
   }
 );
 
-ariaTest.failing(
-  `Test not implemented: grid-shift-pageup`,
+ariaTest(
+  `SHIFT PAGE UP moves focus to same day and month in the previous year`,
   exampleFile,
   'grid-shift-pageup',
   async (t) => {
-    t.fail();
+    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',
+    ];
+
+    let combo = await t.context.queryElement(t, ex.comboboxSelector);
+    let day = new Date(startDate);
+    await setDate(t, day);
+    await combo.sendKeys(Key.ARROW_DOWN);
+
+    for (let i = 0; i < targetDates.length; i += 1) {
+      day = new Date(targetDates[i]);
+
+      await t.context.session
+        .findElement(By.css(ex.currentlyFocusedDay))
+        .sendKeys(Key.chord(Key.SHIFT, Key.PAGE_UP));
+
+      await checkDate(t, ex.currentlyFocusedDay, day);
+    }
   }
 );
 
-ariaTest.failing(
-  `Test not implemented: grid-pagedown`,
+ariaTest(
+  `PAGE DOWN moves focus to same day on next month`,
   exampleFile,
   'grid-pagedown',
   async (t) => {
-    t.fail();
+    const startDate = '1/31/2023';
+    const targetDates = [
+      '2/28/2023',
+      '3/31/2023',
+      '4/30/2023',
+      '5/31/2023',
+      '6/30/2023',
+      '7/31/2023',
+      '8/31/2023',
+      '9/30/2023',
+      '10/31/2023',
+      '11/30/2023',
+      '12/31/2023',
+      '1/31/2024',
+    ];
+
+    let combo = await t.context.queryElement(t, ex.comboboxSelector);
+    let day = new Date(startDate);
+    await setDate(t, day);
+    await combo.sendKeys(Key.ARROW_DOWN);
+
+    for (let i = 0; i < targetDates.length; i += 1) {
+      day = new Date(targetDates[i]);
+
+      await t.context.session
+        .findElement(By.css(ex.currentlyFocusedDay))
+        .sendKeys(Key.PAGE_DOWN);
+
+      await checkDate(t, ex.currentlyFocusedDay, day);
+    }
   }
 );
 
-ariaTest.failing(
-  `Test not implemented: grid-shift-pagedown`,
+ariaTest(
+  `SHIFT PAGE DOWN moves focus to same day and month in the next year`,
   exampleFile,
   'grid-shift-pagedown',
   async (t) => {
-    t.fail();
+    const startDate = '1/31/2023';
+    const targetDates = [
+      '1/31/2024',
+      '1/31/2025',
+      '1/31/2026',
+      '1/31/2027',
+      '1/31/2028',
+      '1/31/2029',
+    ];
+
+    let combo = await t.context.queryElement(t, ex.comboboxSelector);
+    let day = new Date(startDate);
+    await setDate(t, day);
+    await combo.sendKeys(Key.ARROW_DOWN);
+
+    for (let i = 0; i < targetDates.length; i += 1) {
+      day = new Date(targetDates[i]);
+
+      await t.context.session
+        .findElement(By.css(ex.currentlyFocusedDay))
+        .sendKeys(Key.chord(Key.SHIFT, Key.PAGE_DOWN));
+
+      await checkDate(t, ex.currentlyFocusedDay, day);
+    }
   }
 );
 
-ariaTest.failing(
-  `Test not implemented: okay-cancel-button-space-return`,
+ariaTest(
+  `ENTER on cancel button does not select date`,
   exampleFile,
   'okay-cancel-button-space-return',
   async (t) => {
-    t.fail();
-  }
-);
+    await t.context.session
+      .findElement(By.css(ex.comboboxSelector))
+      .sendKeys(Key.ARROW_DOWN);
 
-ariaTest.failing(
-  `Test not implemented: textbox-aria-autocomplete`,
-  exampleFile,
-  'textbox-aria-autocomplete',
-  async (t) => {
-    t.fail();
-  }
-);
+    await t.context.session
+      .findElement(By.css(ex.cancelSelector))
+      .sendKeys(Key.ENTER);
 
-ariaTest.failing(
-  `Test not implemented: textbox-aria-live`,
-  exampleFile,
-  'textbox-aria-live',
-  async (t) => {
-    t.fail();
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.comboboxSelector))
+        .getAttribute('value'),
+      '',
+      'ENTER sent to cancel should not set a date'
+    );
+
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.dialogSelector))
+        .getCssValue('display'),
+      'none',
+      'After sending ENTER to the "cancel" button, the calendar dialog should close'
+    );
+
+    await setDateToJanFirst2019(t);
+
+    await t.context.session
+      .findElement(By.css(ex.comboboxSelector))
+      .sendKeys(Key.ARROW_DOWN);
+
+    await t.context.session
+      .findElement(By.css(ex.currentlyFocusedDay))
+      .sendKeys(Key.ARROW_RIGHT);
+    await t.context.session
+      .findElement(By.css(ex.cancelSelector))
+      .sendKeys(Key.ENTER);
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.comboboxSelector))
+        .getAttribute('value'),
+      '1/1/2019',
+      'ENTER send to cancel should not change date'
+    );
+    t.is(
+      await t.context.session
+        .findElement(By.css(ex.dialogSelector))
+        .getCssValue('display'),
+      'none',
+      'After sending ENTER to the "cancel" button, the calendar dialog should close'
+    );
   }
 );