Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* 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
"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"
);
// Set "dom.forms.datetime.timepicker" in config to "true"
await SpecialPowers.pushPrefEnv({
set: [["dom.forms.datetime.timepicker", true]],
});
});
/**
* Test that the time spinners open with an accessible markup
*/
add_task(async function test_time_spinner_markup() {
info("Test that the time picker opens with an accessible markup");
await helper.openPicker(`data:text/html, <input type="time">`);
Assert.equal(helper.panel.state, "open", "Panel should be opened");
Assert.equal(
helper.getElement(DIALOG_TIME_PICKER).getAttribute("role"),
"dialog",
"Timepicker dialog has an appropriate ARIA role"
);
Assert.ok(
helper.getElement(DIALOG_TIME_PICKER).getAttribute("aria-modal"),
"Timepicker dialog is a modal"
);
info("Test that spinners open with an accessible markup");
// Hour (HH):
const spinnerHour = helper.getElement(SPINNER_HOUR);
const spinnerHourPrev = helper.getElement(BTN_PREV_HOUR);
const spinnerHourNext = helper.getElement(BTN_NEXT_HOUR);
// Minute (MM):
const spinnerMin = helper.getElement(SPINNER_MIN);
const spinnerMinPrev = helper.getElement(BTN_PREV_MIN);
const spinnerMinNext = helper.getElement(BTN_NEXT_MIN);
// Time of the day (AM/PM):
const spinnerTime = helper.getElement(SPINNER_TIME);
const spinnerTimePrev = helper.getElement(BTN_PREV_TIME);
const spinnerTimeNext = helper.getElement(BTN_NEXT_TIME);
const spinners = [spinnerHour, spinnerMin, spinnerTime];
const prevBtns = [spinnerHourPrev, spinnerMinPrev, spinnerTimePrev];
const nextBtns = [spinnerHourNext, spinnerMinNext, spinnerTimeNext];
// Check spinner controls:
for (const el of spinners) {
Assert.equal(
el.getAttribute("role"),
"spinbutton",
`Spinner control ${el.id} is a spinbutton`
);
Assert.equal(
el.getAttribute("tabindex"),
"0",
`Spinner control ${el.id} is included in the focus order`
);
Assert.ok(
/* "12" is a min value for Hour spinners */
["0", "12"].includes(el.getAttribute("aria-valuemin")),
`Spinner control ${el.id} has a min value set`
);
Assert.ok(
/* "0" and "12" are the only values for Time of the day spinners */
["11", "23", "59", "12"].includes(el.getAttribute("aria-valuemax")),
`Spinner control ${el.id} has a max value set`
);
testAttribute(el, "aria-valuenow");
testAttribute(el, "aria-valuetext");
testAttribute(el, "aria-label");
let visibleEls = el.querySelectorAll(":scope > :not([aria-hidden])");
Assert.equal(
visibleEls.length,
0,
"There should be no children of the spinner without aria-hidden"
);
await testReducedMotionProp(el, "scroll-behavior", "smooth", "auto");
}
// Check Previous/Next buttons:
for (const btnGroup of [prevBtns, nextBtns]) {
for (const btn of btnGroup) {
Assert.equal(
btn.tagName,
"button",
`Spinner's ${btn.id} control is a button`
);
testAttribute(btn, "aria-label");
}
}
await helper.tearDown();
});