From 9d1e188c35ff2da04b3384198cb696546987f797 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 14 Feb 2023 10:55:38 -0600 Subject: [PATCH 1/9] fixed bug in previous and next month and year in setting the correct day in the month --- .../examples/js/combobox-datepicker.js | 49 +++++++++++++++++-- 1 file changed, 44 insertions(+), 5 deletions(-) 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); } From f21cb4e3ca9fd95f3ca460f96e14a1a35b02cbef Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 21 Feb 2023 14:13:50 -0600 Subject: [PATCH 2/9] changed mousedown event to pointer down event --- content/patterns/listbox/examples/js/listbox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/patterns/listbox/examples/js/listbox.js b/content/patterns/listbox/examples/js/listbox.js index 8a24176bb5..6c07dc4e15 100644 --- a/content/patterns/listbox/examples/js/listbox.js +++ b/content/patterns/listbox/examples/js/listbox.js @@ -46,7 +46,7 @@ aria.Listbox.prototype.registerEvents = function () { if (this.multiselectable) { this.listboxNode.addEventListener( - 'mousedown', + 'pointerdown', this.checkMouseDown.bind(this) ); } From 0a4fa363fc6648c632a76fd0d141396e2688cbaf Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 28 Feb 2023 18:01:12 -0600 Subject: [PATCH 3/9] added missing test cases and updated page up and down documentation --- .../examples/combobox-datepicker.html | 10 +- test/tests/combobox_datepicker.js | 447 +++++++++++++++--- 2 files changed, 388 insertions(+), 69 deletions(-) diff --git a/content/patterns/combobox/examples/combobox-datepicker.html b/content/patterns/combobox/examples/combobox-datepicker.html index 7a6f47d3d5..a0407f0bf1 100644 --- a/content/patterns/combobox/examples/combobox-datepicker.html +++ b/content/patterns/combobox/examples/combobox-datepicker.html @@ -312,7 +312,7 @@

Date Picker Dialog: Date Grid

- + Enter
    @@ -353,7 +353,7 @@

    Date Picker Dialog: Date Grid

  • Changes the grid of dates to the previous month.
  • 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. + If that day does not exist, moves focus to the last day of the month.
@@ -368,7 +368,7 @@

Date Picker Dialog: Date Grid

  • Changes the grid of dates to the previous year.
  • 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. + If that day does not exist, moves focus to the last day of the month.
    • @@ -380,7 +380,7 @@

    Date Picker Dialog: Date Grid

  • Changes the grid of dates to the next month.
  • 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. + If that day does not exist, moves focus to the last day of the month.
    • @@ -395,7 +395,7 @@

    Date Picker Dialog: Date Grid

  • Changes the grid of dates to the next year.
  • 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. + If that day does not exist, moves focus to the last day of the month.
    • 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' + ); } ); From d7f1ef9d9fe785a0b18a2e3305fa091da1268953 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 7 Mar 2023 14:05:34 -0600 Subject: [PATCH 4/9] restored file that should not have been changed --- content/patterns/listbox/examples/js/listbox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/patterns/listbox/examples/js/listbox.js b/content/patterns/listbox/examples/js/listbox.js index 6c07dc4e15..8a24176bb5 100644 --- a/content/patterns/listbox/examples/js/listbox.js +++ b/content/patterns/listbox/examples/js/listbox.js @@ -46,7 +46,7 @@ aria.Listbox.prototype.registerEvents = function () { if (this.multiselectable) { this.listboxNode.addEventListener( - 'pointerdown', + 'mousedown', this.checkMouseDown.bind(this) ); } From 786e68e4473523b5ea68edef08b60582d0860245 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Sun, 12 Mar 2023 17:08:10 -0500 Subject: [PATCH 5/9] updated CSS based on feedback from Alexander --- .../patterns/combobox/examples/css/combobox-datepicker.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/content/patterns/combobox/examples/css/combobox-datepicker.css b/content/patterns/combobox/examples/css/combobox-datepicker.css index c4161d02ed..75bb3cb01a 100644 --- a/content/patterns/combobox/examples/css/combobox-datepicker.css +++ b/content/patterns/combobox/examples/css/combobox-datepicker.css @@ -134,6 +134,7 @@ padding-left: 1em; padding-right: 1em; padding-top: 1em; + border-collapse: separate; } .combobox-datepicker .prev-year, @@ -196,6 +197,9 @@ .combobox-datepicker .dates th, .combobox-datepicker .dates td { text-align: center; + color: black; + background: transparent; + border: none; } .combobox-datepicker .dates tr { @@ -227,6 +231,7 @@ .combobox-datepicker .dates td:hover { padding: 0; background-color: hsl(216deg 80% 92%); + color: black; } .combobox-datepicker .dates td:focus { From 921410280e106162396c5c93988735922522e65d Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Sun, 12 Mar 2023 17:10:41 -0500 Subject: [PATCH 6/9] updated CSS background for TH elements --- content/patterns/combobox/examples/css/combobox-datepicker.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/patterns/combobox/examples/css/combobox-datepicker.css b/content/patterns/combobox/examples/css/combobox-datepicker.css index 75bb3cb01a..4d9247ff7c 100644 --- a/content/patterns/combobox/examples/css/combobox-datepicker.css +++ b/content/patterns/combobox/examples/css/combobox-datepicker.css @@ -198,7 +198,7 @@ .combobox-datepicker .dates td { text-align: center; color: black; - background: transparent; + background: white; border: none; } From 30a30d998697313425d454c992a581e626c21286 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Mon, 13 Mar 2023 17:06:01 -0500 Subject: [PATCH 7/9] fix undeline on h2 in dialog box --- content/patterns/combobox/examples/css/combobox-datepicker.css | 1 + 1 file changed, 1 insertion(+) diff --git a/content/patterns/combobox/examples/css/combobox-datepicker.css b/content/patterns/combobox/examples/css/combobox-datepicker.css index 4d9247ff7c..bd9b09139b 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 { From 54cc1a96c77c63715ecd8883c7194f892f8bbb1b Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Mon, 13 Mar 2023 17:08:30 -0500 Subject: [PATCH 8/9] removed border from dialog table --- .../patterns/combobox/examples/css/combobox-datepicker.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/content/patterns/combobox/examples/css/combobox-datepicker.css b/content/patterns/combobox/examples/css/combobox-datepicker.css index bd9b09139b..920bec46cd 100644 --- a/content/patterns/combobox/examples/css/combobox-datepicker.css +++ b/content/patterns/combobox/examples/css/combobox-datepicker.css @@ -195,6 +195,10 @@ text-align: center; } +.combobox-datepicker table { + border: none; +} + .combobox-datepicker .dates th, .combobox-datepicker .dates td { text-align: center; From 691edf46c9e140cfb59284e3c85bda72f781c697 Mon Sep 17 00:00:00 2001 From: Matt King Date: Mon, 3 Apr 2023 18:39:31 -0700 Subject: [PATCH 9/9] Minor editorial changes to page up and page down documentation --- .../combobox/examples/combobox-datepicker.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/patterns/combobox/examples/combobox-datepicker.html b/content/patterns/combobox/examples/combobox-datepicker.html index a0407f0bf1..fccb515cf1 100644 --- a/content/patterns/combobox/examples/combobox-datepicker.html +++ b/content/patterns/combobox/examples/combobox-datepicker.html @@ -352,7 +352,7 @@

    Date Picker Dialog: Date Grid

    • Changes the grid of dates to the previous month.
    • - Moves focus to the same day of the same 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.
    @@ -365,9 +365,9 @@

    Date Picker Dialog: Date Grid

      -
    • Changes the grid of dates to the previous year.
      • +
    • Changes the grid of dates to the same month in the previous year.
    • - Moves focus to the same day of the same week in the previous year. +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.
    @@ -379,7 +379,7 @@

    Date Picker Dialog: Date Grid

    • Changes the grid of dates to the next month.
    • - Moves focus to the same day of the same 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.
    @@ -392,9 +392,9 @@

    Date Picker Dialog: Date Grid

      -
    • Changes the grid of dates to the next year.
      • +
    • Changes the grid of dates to the same month in the next year.
    • - Moves focus to the same day of the same week in the next year. + 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.