mozilla-central/toolkit/content/tests/browser/datetime/browser_spinner_keynav.js (file symbol)

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
add_setup(async function setPrefsReducedMotion() {
// Set "prefers-reduced-motion" media to "reduce"
// to avoid intermittent scroll failures (1803612, 1803687)
await SpecialPowers.pushPrefEnv({
set: [["ui.prefersReducedMotion", 1]],
});
Assert.ok(
matchMedia("(prefers-reduced-motion: reduce)").matches,
"The reduce motion mode is active"
);
});
/**
* Ensure the month spinner follows arrow key bindings appropriately.
*/
add_task(async function test_spinner_month_keyboard_arrows() {
info("Ensure the month spinner follows arrow key bindings appropriately.");
const inputValue = "2022-12-10";
const nextMonthValue = "2022-01-01";
await helper.openPicker(
`data:text/html, <input type="date" value="${inputValue}">`
);
let pickerDoc = helper.panel.querySelector(
"#dateTimePopupFrame"
).contentDocument;
info("Testing general keyboard navigation");
Assert.equal(
helper.getElement(BTN_MONTH_YEAR).getAttribute("aria-expanded"),
"false",
"Month-year button is collapsed when a picker is opened (by default)"
);
// Move focus from the selection to the month-year toggle button:
EventUtils.synthesizeKey("KEY_Tab", { repeat: 3 });
// Open month-year selection panel with spinners:
EventUtils.synthesizeKey(" ", {});
const spinnerMonthBtn = helper.getElement(SPINNER_MONTH).children[1];
const spinnerYearBtn = helper.getElement(SPINNER_YEAR).children[1];
let monthYearEl = helper.getElement(MONTH_YEAR);
Assert.equal(
helper.getElement(BTN_MONTH_YEAR).getAttribute("aria-expanded"),
"true",
"Month-year button is expanded when the spinners are shown"
);
// December 2022 is an example:
Assert.equal(
pickerDoc.activeElement.textContent,
DATE_FORMAT(new Date(inputValue)),
"Month-year toggle button is focused"
);
Assert.equal(
spinnerMonthBtn.getAttribute("aria-valuenow"),
"11",
"Month Spinner control is ready"
);
Assert.equal(
spinnerYearBtn.getAttribute("aria-valuenow"),
"2022",
"Year Spinner control is ready"
);
// Move focus from the month-year toggle button to the month spinner:
EventUtils.synthesizeKey("KEY_Tab", {});
Assert.equal(
pickerDoc.activeElement.getAttribute("aria-valuenow"),
"11",
"Tab moves focus to the month spinner"
);
info("Testing Up/Down Arrow keys behavior of the Month Spinner");
// Change the month-year from December 2022 to January 2022:
EventUtils.synthesizeKey("KEY_ArrowDown", {});
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{ childList: true },
() => {
return monthYearEl.textContent == DATE_FORMAT(new Date(nextMonthValue));
},
`Should change to January 2022, instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
Assert.equal(
spinnerMonthBtn.getAttribute("aria-valuenow"),
"0",
"Down Arrow selects the next month"
);
Assert.equal(
spinnerYearBtn.getAttribute("aria-valuenow"),
"2022",
"Down Arrow on a month spinner does not update the year"
);
Assert.equal(
helper.getElement(BTN_MONTH_YEAR).textContent,
DATE_FORMAT(new Date(nextMonthValue)),
"Down Arrow updates the month-year button to the next month"
);
// Change the month-year from January 2022 to December 2022:
EventUtils.synthesizeKey("KEY_ArrowUp", {});
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{ childList: true },
() => {
return monthYearEl.textContent == DATE_FORMAT(new Date(inputValue));
},
`Should change to December 2022, instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
Assert.equal(
spinnerMonthBtn.getAttribute("aria-valuenow"),
"11",
"Up Arrow selects the previous month"
);
Assert.equal(
spinnerYearBtn.getAttribute("aria-valuenow"),
"2022",
"Up Arrow on a month spinner does not update the year"
);
Assert.equal(
helper.getElement(BTN_MONTH_YEAR).textContent,
DATE_FORMAT(new Date(inputValue)),
"Up Arrow updates the month-year button to the previous month"
);
await helper.tearDown();
});
/**
* Ensure the month spinner follows Page Up/Down key bindings appropriately.
*/
add_task(async function test_spinner_month_keyboard_pageup_pagedown() {
info(
"Ensure the month spinner follows Page Up/Down key bindings appropriately."
);
const inputValue = "2022-12-10";
const nextFifthMonthValue = "2022-05-10";
await helper.openPicker(
`data:text/html, <input type="date" value="${inputValue}">`
);
// const browser = helper.tab.linkedBrowser;
// Move focus from the selection to the month-year toggle button:
EventUtils.synthesizeKey("KEY_Tab", { repeat: 3 });
// Open month-year selection panel with spinners:
EventUtils.synthesizeKey(" ", {});
const spinnerMonthBtn = helper.getElement(SPINNER_MONTH).children[1];
const spinnerYearBtn = helper.getElement(SPINNER_YEAR).children[1];
let monthYearEl = helper.getElement(MONTH_YEAR);
// Move focus from the month-year toggle button to the month spinner:
EventUtils.synthesizeKey("KEY_Tab", {});
// Change the month-year from December 2022 to May 2022:
EventUtils.synthesizeKey("KEY_PageDown", {});
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{ childList: true },
() => {
return (
monthYearEl.textContent == DATE_FORMAT(new Date(nextFifthMonthValue))
);
},
`Should change to May 2022, instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
Assert.equal(
spinnerMonthBtn.getAttribute("aria-valuenow"),
"4",
"Page Down selects the fifth later month"
);
Assert.equal(
spinnerYearBtn.getAttribute("aria-valuenow"),
"2022",
"Page Down on a month spinner does not update the year"
);
Assert.equal(
helper.getElement(BTN_MONTH_YEAR).textContent,
DATE_FORMAT(new Date(nextFifthMonthValue)),
"Page Down updates the month-year button to the fifth later month"
);
// Change the month-year from May 2022 to December 2022:
EventUtils.synthesizeKey("KEY_PageUp", {});
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{ childList: true },
() => {
return monthYearEl.textContent == DATE_FORMAT(new Date(inputValue));
},
`Should change to December 2022, instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
Assert.equal(
spinnerMonthBtn.getAttribute("aria-valuenow"),
"11",
"Page Up selects the fifth earlier month"
);
Assert.equal(
spinnerYearBtn.getAttribute("aria-valuenow"),
"2022",
"Page Up on a month spinner does not update the year"
);
Assert.equal(
helper.getElement(BTN_MONTH_YEAR).textContent,
DATE_FORMAT(new Date(inputValue)),
"Page Up updates the month-year button to the fifth earlier month"
);
await helper.tearDown();
});
/**
* Ensure the month spinner follows Home/End key bindings appropriately.
*/
add_task(async function test_spinner_month_keyboard_home_end() {
info("Ensure the month spinner follows Home/End key bindings appropriately.");
const inputValue = "2022-12-11";
const firstMonthValue = "2022-01-11";
await helper.openPicker(
`data:text/html, <input type="date" value="${inputValue}">`
);
// const browser = helper.tab.linkedBrowser;
// Move focus from the selection to the month-year toggle button:
EventUtils.synthesizeKey("KEY_Tab", { repeat: 3 });
// Open month-year selection panel with spinners:
EventUtils.synthesizeKey(" ", {});
const spinnerMonthBtn = helper.getElement(SPINNER_MONTH).children[1];
const spinnerYearBtn = helper.getElement(SPINNER_YEAR).children[1];
let monthYearEl = helper.getElement(MONTH_YEAR);
// Move focus from the month-year toggle button to the month spinner:
EventUtils.synthesizeKey("KEY_Tab", {});
// Change the month-year from December 2022 to January 2022:
EventUtils.synthesizeKey("KEY_Home", {});
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{ childList: true },
() => {
return monthYearEl.textContent == DATE_FORMAT(new Date(firstMonthValue));
},
`Should change to January 2022, instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
Assert.equal(
spinnerMonthBtn.getAttribute("aria-valuenow"),
"0",
"Home key selects the first month of the year (min value)"
);
Assert.equal(
spinnerYearBtn.getAttribute("aria-valuenow"),
"2022",
"Home key does not update the year value"
);
Assert.equal(
helper.getElement(BTN_MONTH_YEAR).textContent,
DATE_FORMAT(new Date(firstMonthValue)),
"Home key updates the month-year button to the first month of the same year (min value)"
);
// Change the month-year from January 2022 to December 2022:
EventUtils.synthesizeKey("KEY_End", {});
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{ childList: true },
() => {
return monthYearEl.textContent == DATE_FORMAT(new Date(inputValue));
},
`Should change to December 2022, instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
Assert.equal(
spinnerMonthBtn.getAttribute("aria-valuenow"),
"11",
"End key selects the last month of the year (max value)"
);
Assert.equal(
spinnerYearBtn.getAttribute("aria-valuenow"),
"2022",
"End key does not update the year value"
);
Assert.equal(
helper.getElement(BTN_MONTH_YEAR).textContent,
DATE_FORMAT(new Date(inputValue)),
"End key updates the month-year button to the last month of the same year (max value)"
);
await helper.tearDown();
});
/**
* Ensure the year spinner follows arrow key bindings appropriately.
*/
add_task(async function test_spinner_year_keyboard_arrows() {
info("Ensure the year spinner follows arrow key bindings appropriately.");
const inputValue = "2022-12-10";
const nextYearValue = "2023-12-01";
await helper.openPicker(
`data:text/html, <input type="date" value="${inputValue}">`
);
let pickerDoc = helper.panel.querySelector(
"#dateTimePopupFrame"
).contentDocument;
info("Testing general keyboard navigation");
// Move focus from the selection to the month-year toggle button:
EventUtils.synthesizeKey("KEY_Tab", { repeat: 3 });
// Open month-year selection panel with spinners:
EventUtils.synthesizeKey(" ", {});
const spinnerMonthBtn = helper.getElement(SPINNER_MONTH).children[1];
const spinnerYearBtn = helper.getElement(SPINNER_YEAR).children[1];
let monthYearEl = helper.getElement(MONTH_YEAR);
// December 2022 is an example:
Assert.equal(
spinnerYearBtn.getAttribute("aria-valuenow"),
"2022",
"Year Spinner control is ready"
);
// Move focus from the month-year toggle button to the year spinner:
EventUtils.synthesizeKey("KEY_Tab", { repeat: 2 });
Assert.equal(
pickerDoc.activeElement.getAttribute("aria-valuenow"),
"2022",
"Tab can move the focus to the year spinner"
);
info("Testing Up/Down Arrow keys behavior of the Year Spinner");
// Change the month-year from December 2022 to December 2023:
EventUtils.synthesizeKey("KEY_ArrowDown", {});
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{ childList: true },
() => {
return monthYearEl.textContent == DATE_FORMAT(new Date(nextYearValue));
},
`Should change to December 2023, instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
Assert.equal(
spinnerMonthBtn.getAttribute("aria-valuenow"),
"11",
"Down Arrow on the year spinner does not change the month"
);
Assert.equal(
spinnerYearBtn.getAttribute("aria-valuenow"),
"2023",
"Down Arrow updates the year to the next"
);
Assert.equal(
helper.getElement(BTN_MONTH_YEAR).textContent,
DATE_FORMAT(new Date(nextYearValue)),
"Down Arrow updates the month-year button to the next year"
);
// Change the month-year from December 2023 to December 2022:
EventUtils.synthesizeKey("KEY_ArrowUp", {});
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{ childList: true },
() => {
return monthYearEl.textContent == DATE_FORMAT(new Date(inputValue));
},
`Should change to December 2022, instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
Assert.equal(
spinnerMonthBtn.getAttribute("aria-valuenow"),
"11",
"Up Arrow on the year spinner does not change the month"
);
Assert.equal(
spinnerYearBtn.getAttribute("aria-valuenow"),
"2022",
"Up Arrow updates the year to the previous"
);
Assert.equal(
helper.getElement(BTN_MONTH_YEAR).textContent,
DATE_FORMAT(new Date(inputValue)),
"Up Arrow updates the month-year button to the previous year"
);
await helper.tearDown();
});
/**
* Ensure the year spinner follows Page Up/Down key bindings appropriately.
*/
add_task(async function test_spinner_year_keyboard_pageup_pagedown() {
info(
"Ensure the year spinner follows Page Up/Down key bindings appropriately."
);
const inputValue = "2022-12-10";
const nextFifthYearValue = "2027-12-10";
await helper.openPicker(
`data:text/html, <input type="date" value="${inputValue}">`
);
// const browser = helper.tab.linkedBrowser;
// Move focus from the selection to the month-year toggle button:
EventUtils.synthesizeKey("KEY_Tab", { repeat: 3 });
// Open month-year selection panel with spinners:
EventUtils.synthesizeKey(" ", {});
const spinnerMonthBtn = helper.getElement(SPINNER_MONTH).children[1];
const spinnerYearBtn = helper.getElement(SPINNER_YEAR).children[1];
let monthYearEl = helper.getElement(MONTH_YEAR);
// Move focus from the month-year toggle button to the year spinner:
EventUtils.synthesizeKey("KEY_Tab", { repeat: 2 });
// Change the month-year from December 2022 to December 2027:
EventUtils.synthesizeKey("KEY_PageDown", {});
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{ childList: true },
() => {
return (
monthYearEl.textContent == DATE_FORMAT(new Date(nextFifthYearValue))
);
},
`Should change to December 2027, instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
Assert.equal(
spinnerMonthBtn.getAttribute("aria-valuenow"),
"11",
"Page Down on the year spinner does not change the month"
);
Assert.equal(
spinnerYearBtn.getAttribute("aria-valuenow"),
"2027",
"Page Down selects the fifth later year"
);
Assert.equal(
helper.getElement(BTN_MONTH_YEAR).textContent,
DATE_FORMAT(new Date(nextFifthYearValue)),
"Page Down updates the month-year button to the fifth later year"
);
// Change the month-year from December 2027 to December 2022:
EventUtils.synthesizeKey("KEY_PageUp", {});
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{ childList: true },
() => {
return monthYearEl.textContent == DATE_FORMAT(new Date(inputValue));
},
`Should change to December 2022, instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
Assert.equal(
spinnerMonthBtn.getAttribute("aria-valuenow"),
"11",
"Page Up on the year spinner does not change the month"
);
Assert.equal(
spinnerYearBtn.getAttribute("aria-valuenow"),
"2022",
"Page Up selects the fifth earlier year"
);
Assert.equal(
helper.getElement(BTN_MONTH_YEAR).textContent,
DATE_FORMAT(new Date(inputValue)),
"Page Up updates the month-year button to the fifth earlier year"
);
await helper.tearDown();
});
/**
* Ensure the year spinner follows Home/End key bindings appropriately.
*/
add_task(async function test_spinner_year_keyboard_home_end() {
info("Ensure the year spinner follows Home/End key bindings appropriately.");
const inputValue = "2022-12-10";
const minValue = "2020-10-10";
const maxValue = "2030-12-31";
const minYearValue = "2020-12-10";
const maxYearValue = "2030-12-10";
await helper.openPicker(
`data:text/html, <input type="date" value="${inputValue}" min="${minValue}" max="${maxValue}">`
);
// Move focus from the selection to the month-year toggle button:
EventUtils.synthesizeKey("KEY_Tab", { repeat: 3 });
// Open month-year selection panel with spinners:
EventUtils.synthesizeKey(" ", {});
const spinnerMonthBtn = helper.getElement(SPINNER_MONTH).children[1];
const spinnerYearBtn = helper.getElement(SPINNER_YEAR).children[1];
let monthYearEl = helper.getElement(MONTH_YEAR);
// Move focus from the month-year toggle button to the year spinner:
EventUtils.synthesizeKey("KEY_Tab", { repeat: 2 });
// Change the month-year from December 2022 to December 2020:
EventUtils.synthesizeKey("KEY_Home", {});
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{ childList: true },
() => {
return monthYearEl.textContent == DATE_FORMAT(new Date(minYearValue));
},
`Should change to December 2020, instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
Assert.equal(
spinnerMonthBtn.getAttribute("aria-valuenow"),
"11",
"Home key on the year spinner does not change the month"
);
Assert.equal(
spinnerYearBtn.getAttribute("aria-valuenow"),
"2020",
"Home key selects the min year value"
);
Assert.equal(
helper.getElement(BTN_MONTH_YEAR).textContent,
DATE_FORMAT(new Date(minYearValue)),
"Home key updates the month-year button to the min year value"
);
// Change the month-year from December 2022 to December 2030:
EventUtils.synthesizeKey("KEY_End", {});
await BrowserTestUtils.waitForMutationCondition(
monthYearEl,
{ childList: true },
() => {
return monthYearEl.textContent == DATE_FORMAT(new Date(maxYearValue));
},
`Should change to December 2030, instead got ${
helper.getElement(MONTH_YEAR).textContent
}`
);
Assert.equal(
spinnerMonthBtn.getAttribute("aria-valuenow"),
"11",
"End key on the year spinner does not change the month"
);
Assert.equal(
spinnerYearBtn.getAttribute("aria-valuenow"),
"2030",
"End key selects the max year value"
);
Assert.equal(
helper.getElement(BTN_MONTH_YEAR).textContent,
DATE_FORMAT(new Date(maxYearValue)),
"End key updates the month-year button to the max year value"
);
await helper.tearDown();
});