Closed Bug 1807006 Opened 2 years ago Closed 2 years ago

prefers-reduced-motion not respected in input type date

Categories

(Core :: Layout: Form Controls, defect, P3)

Product:
Core
Component:
Layout: Form Controls
Version:
Firefox 108
Type:
defect

Tracking

()

Status:
VERIFIED FIXED
Milestone:
110 Branch
Tracking Flags:
Tracking Status
firefox110 --- verified

People

(Reporter: trondsg+bugzilla+mozilla, Assigned: ayeddi)

References

(Blocks 1 open bug)

Details

Attachments

(1 file)

Bug 1807006 - Respect prefers-reduced-motion in datepicker spinners. r=emilio!,Jamie
48 bytes, text/x-phabricator-request
Details | Review

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:108.0) Gecko/20100101 Firefox/108.0

Steps to reproduce:

  1. Disable ui animations in firefox (e.g. gtk-enable-animations = false).
  2. Show an <input type="date"> (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)
  3. Click the date. A small calendar opens.
  4. Click the month and year name.

Actual results:

There is an animation.

Expected results:

It should load instantly, without an animation.

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Form Controls' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Component: Untriaged → Layout: Form Controls
Product: Firefox → Core

Adds a check for prefers-reduced-motion that a user can set to true and provides a method to scroll a spin button (month or year one, in the case of <input type=date> and <input type=datetime-local>) without smoothing, based on the user settings.

Testing: in about:config, set ui.prefersReducedMotion to 1 (effective immediately), or set gtk-enable-animations to false in GTK/GNOME, or follow an appropriate to your OS instructions to activate Reduce Motion mode.

Assignee: nobody → ayeddi
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Severity: -- → S3
Priority: -- → P3
Attachment #9310056 - Attachment description: Bug 1807006 - Respect prefers-reduced-motion in datepicker spinners. r=emilio → Bug 1807006 - Respect prefers-reduced-motion in datepicker spinners. r=emilio!,Jamie
Pushed by ayeddi@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/f95af8067620 Respect prefers-reduced-motion in datepicker spinners. r=emilio

Backed out for causing bc failures on browser_spinner_keynav.js.

Push with failures

Failure log

Backout link

[task 2023-01-06T16:41:50.270Z] 16:41:50     INFO - TEST-START | toolkit/content/tests/browser/browser_spinner_keynav.js
[task 2023-01-06T16:41:50.293Z] 16:41:50     INFO - GECKO(2581) | [Child 3158: Main Thread]: I/DocShellAndDOMWindowLeak ++DOCSHELL 7f37c614c400 == 2 [pid = 3158] [id = 32]
[task 2023-01-06T16:41:50.293Z] 16:41:50     INFO - GECKO(2581) | [Child 3158: Main Thread]: I/DocShellAndDOMWindowLeak ++DOMWINDOW == 4 (7f37ccb14850) [pid = 3158] [serial = 97] [outer = 0]
[task 2023-01-06T16:41:50.293Z] 16:41:50     INFO - GECKO(2581) | [Child 3158: Main Thread]: I/DocShellAndDOMWindowLeak ++DOMWINDOW == 5 (7f37c614cc00) [pid = 3158] [serial = 98] [outer = 7f37ccb14850]
[task 2023-01-06T16:41:50.455Z] 16:41:50     INFO - GECKO(2581) | [Child 3158: Main Thread]: I/DocShellAndDOMWindowLeak ++DOMWINDOW == 6 (7f37c614e000) [pid = 3158] [serial = 99] [outer = 7f37ccb14850]
[task 2023-01-06T16:41:50.652Z] 16:41:50     INFO - GECKO(2581) | [Parent 2581, Main Thread] WARNING: NS_ENSURE_SUCCESS(rv, rv) failed with result 0x80004005 (NS_ERROR_FAILURE): file /builds/worker/checkouts/gecko/chrome/nsChromeRegistry.cpp:180
[task 2023-01-06T16:41:50.654Z] 16:41:50     INFO - GECKO(2581) | [Parent 2581, Main Thread] WARNING: 'NS_FAILED(rv)', file /builds/worker/checkouts/gecko/chrome/nsChromeProtocolHandler.cpp:73
[task 2023-01-06T16:41:50.890Z] 16:41:50     INFO - TEST-INFO | started process screentopng
[task 2023-01-06T16:41:51.205Z] 16:41:51     INFO - TEST-INFO | screentopng: exit 0
[task 2023-01-06T16:41:51.205Z] 16:41:51     INFO - Buffered messages logged at 16:41:50
[task 2023-01-06T16:41:51.206Z] 16:41:51     INFO - Entering test bound test_spinner_month_keyboard_arrows
[task 2023-01-06T16:41:51.206Z] 16:41:51     INFO - Ensure the month spinner follows arrow key bindings appropriately.
[task 2023-01-06T16:41:51.208Z] 16:41:51     INFO - Console message: [JavaScript Warning: "This page is in Quirks Mode. Page layout may be impacted. For Standards Mode use “<!DOCTYPE html>”." {file: "data:text/html, <input type="date" value="2022-12-10">" line: 0}]
[task 2023-01-06T16:41:51.211Z] 16:41:51     INFO - Console message: Invalid chrome URI (need path): chrome://global/
[task 2023-01-06T16:41:51.211Z] 16:41:51     INFO - Testing general keyboard navigation
[task 2023-01-06T16:41:51.212Z] 16:41:51     INFO - TEST-PASS | toolkit/content/tests/browser/browser_spinner_keynav.js | Month-year button is collapsed when a picker is opened (by default) - "false" == "false" - 
[task 2023-01-06T16:41:51.212Z] 16:41:51     INFO - TEST-PASS | toolkit/content/tests/browser/browser_spinner_keynav.js | Month-year button is expanded when the spinners are shown - "true" == "true" - 
[task 2023-01-06T16:41:51.213Z] 16:41:51     INFO - TEST-PASS | toolkit/content/tests/browser/browser_spinner_keynav.js | Month-year toggle button is focused - "December 2022" == "December 2022" - 
[task 2023-01-06T16:41:51.220Z] 16:41:51     INFO - TEST-PASS | toolkit/content/tests/browser/browser_spinner_keynav.js | Month Spinner control is ready - "11" == "11" - 
[task 2023-01-06T16:41:51.221Z] 16:41:51     INFO - TEST-PASS | toolkit/content/tests/browser/browser_spinner_keynav.js | Year Spinner control is ready - "2022" == "2022" - 
[task 2023-01-06T16:41:51.221Z] 16:41:51     INFO - TEST-PASS | toolkit/content/tests/browser/browser_spinner_keynav.js | Tab moves focus to the month spinner - "11" == "11" - 
[task 2023-01-06T16:41:51.222Z] 16:41:51     INFO - Testing Up/Down Arrow keys behavior of the Month Spinner
[task 2023-01-06T16:41:51.222Z] 16:41:51     INFO - TEST-PASS | toolkit/content/tests/browser/browser_spinner_keynav.js | Down Arrow selects the next month - "0" == "0" - 
[task 2023-01-06T16:41:51.231Z] 16:41:51     INFO - TEST-PASS | toolkit/content/tests/browser/browser_spinner_keynav.js | Down Arrow on a month spinner does not update the year - "2022" == "2022" - 
[task 2023-01-06T16:41:51.232Z] 16:41:51     INFO - TEST-PASS | toolkit/content/tests/browser/browser_spinner_keynav.js | Down Arrow updates the month-year button to the next month - "January 2022" == "January 2022" - 
[task 2023-01-06T16:41:51.232Z] 16:41:51     INFO - Buffered messages finished
[task 2023-01-06T16:41:51.233Z] 16:41:51     INFO - TEST-UNEXPECTED-FAIL | toolkit/content/tests/browser/browser_spinner_keynav.js | Up Arrow selects the previous month - "0" == "11" - JS frame :: chrome://mochitests/content/browser/toolkit/content/tests/browser/browser_spinner_keynav.js :: test_spinner_month_keyboard_arrows :: line 113
[task 2023-01-06T16:41:51.233Z] 16:41:51     INFO - Stack trace:
[task 2023-01-06T16:41:51.234Z] 16:41:51     INFO - chrome://mochitests/content/browser/toolkit/content/tests/browser/browser_spinner_keynav.js:test_spinner_month_keyboard_arrows:113
[task 2023-01-06T16:41:51.235Z] 16:41:51     INFO - TEST-PASS | toolkit/content/tests/browser/browser_spinner_keynav.js | Up Arrow on a month spinner does not update the year - "2022" == "2022" - 
[task 2023-01-06T16:41:51.239Z] 16:41:51     INFO - Not taking screenshot here: see the one that was previously logged
[task 2023-01-06T16:41:51.240Z] 16:41:51     INFO - TEST-UNEXPECTED-FAIL | toolkit/content/tests/browser/browser_spinner_keynav.js | Up Arrow updates the month-year button to the previous month - "January 2022" == "December 2022" - JS frame :: chrome://mochitests/content/browser/toolkit/content/tests/browser/browser_spinner_keynav.js :: test_spinner_month_keyboard_arrows :: line 123
[task 2023-01-06T16:41:51.241Z] 16:41:51     INFO - Stack trace:
[task 2023-01-06T16:41:51.241Z] 16:41:51     INFO - chrome://mochitests/content/browser/toolkit/content/tests/browser/browser_spinner_keynav.js:test_spinner_month_keyboard_arrows:123
[task 2023-01-06T16:41:51.242Z] 16:41:51     INFO - Leaving test bound test_spinner_month_keyboard_arrows
[task 2023-01-06T16:41:51.243Z] 16:41:51     INFO - Entering test bound test_spinner_year_keyboard_arrows
[task 2023-01-06T16:41:51.244Z] 16:41:51     INFO - Ensure the year spinner follows arrow key bindings appropriately.
[task 2023-01-06T16:41:51.245Z] 16:41:51     INFO - GECKO(2581) | [Child 2668: Main Thread]: I/DocShellAndDOMWindowLeak ++DOCSHELL 7f97b6ece000 == 2 [pid = 2668] [id = 53]
[task 2023-01-06T16:41:51.245Z] 16:41:51     INFO - GECKO(2581) | [Child 2668: Main Thread]: I/DocShellAndDOMWindowLeak ++DOMWINDOW == 8 (7f97bd67e090) [pid = 2668] [serial = 127] [outer = 0]
[task 2023-01-06T16:41:51.246Z] 16:41:51     INFO - GECKO(2581) | [Child 2668: Main Thread]: I/DocShellAndDOMWindowLeak ++DOMWINDOW == 9 (7f97b6ece400) [pid = 2668] [serial = 128] [outer = 7f97bd67e090]
[task 2023-01-06T16:41:51.251Z] 16:41:51     INFO - GECKO(2581) | [Child 2668: Main Thread]: I/DocShellAndDOMWindowLeak ++DOMWINDOW == 10 (7f97b6ed0000) [pid = 2668] [serial = 129] [outer = 7f97bd67e090]
[task 2023-01-06T16:41:51.300Z] 16:41:51     INFO - Console message: [JavaScript Warning: "This page is in Quirks Mode. Page layout may be impacted. For Standards Mode use “<!DOCTYPE html>”." {file: "data:text/html, <input type="date" value="2022-12-10">" line: 0}]
[task 2023-01-06T16:41:51.369Z] 16:41:51     INFO - GECKO(2581) | [Parent 2581, Main Thread] WARNING: NS_ENSURE_SUCCESS(rv, rv) failed with result 0x80004005 (NS_ERROR_FAILURE): file /builds/worker/checkouts/gecko/chrome/nsChromeRegistry.cpp:180
[task 2023-01-06T16:41:51.369Z] 16:41:51     INFO - GECKO(2581) | [Parent 2581, Main Thread] WARNING: 'NS_FAILED(rv)', file /builds/worker/checkouts/gecko/chrome/nsChromeProtocolHandler.cpp:73
[task 2023-01-06T16:41:51.389Z] 16:41:51     INFO - Console message: Invalid chrome URI (need path): chrome://global/
[task 2023-01-06T16:41:51.504Z] 16:41:51     INFO - Testing general keyboard navigation
[task 2023-01-06T16:41:51.546Z] 16:41:51     INFO - TEST-PASS | toolkit/content/tests/browser/browser_spinner_keynav.js | Year Spinner control is ready - "2022" == "2022" -
Flags: needinfo?(ayeddi)

The failing test was caused by the bug 1803687 and bug 1803664 - I added a patch for them in a stack and it is landing atm.

Flags: needinfo?(ayeddi)
Pushed by ayeddi@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/bdf5dca4477f Respect prefers-reduced-motion in datepicker spinners. r=emilio

https://hg.mozilla.org/mozilla-central/rev/bdf5dca4477f

Status: ASSIGNED → RESOLVED
Closed: 2 years ago
status-firefox110: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → 110 Branch
Flags: qe-verify+

I have reproduced this issue with the info written in comment 2, on an affected Nightly (2022-12-22), running Ubuntu 18.04 x64.

The issue is verified as fixed on Beta 110.0b3, across platforms: Win 10 x64, macOS 11 and Ubuntu 18.04 x64.

Status: RESOLVED → VERIFIED
status-firefox110: fixed → verified
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: