Remove support for non-discoverable and redundant hotkeys in calendar popups

This change removes support for the following hotkeys in
date/week/month/datetime-local popups:
m/M: Advance to next/previous month
y/Y: Advance to next/previous year
d/D: Advance to next/previous decade
t: Select the current day

The refreshed control implementation inherited these from the old
implementation, but their value is questionable.

PageDown/PageUp is a more intuitive version of m/M for changing month.

Selecting the current day by keyboard can be achieved by tabbing to
the 'Today' button and pressing Enter.  This is more keystrokes but this
should be ok because it is not an action that the user would need to
perform more than once once per popup.

There is no equivalent to y/Y or d/D for advancing by year/decade, but
these do not seem like common scenarios.  If they were, we would want
to provide a more visible mechanism for achieving this.

All of these hotkeys are non-discoverable aside from trial and
error.  As such they may be as likely to cause user confusion when
stumbled across accidentally as they are to help.

Given the above considerations, this change removes them.

Bug: 1052388
Change-Id: I2602250352df6569100df1ba512cd624c9bd2f64
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2079219Reviewed-by: Mason Freed <masonfreed@chromium.org>
Reviewed-by: Ionel Popescu <iopopesc@microsoft.com>
Commit-Queue: Dan Clark <daniec@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#745611}

third_party/blink/renderer/core/html/forms/resources/calendarPicker.js

@@ -3079,13 +3079,7 @@ YearListView.prototype.onKeyDown = function(event) {
   var key = event.key;
   var eventHandled = false;
   if (key == 't') {
-    if (global.params.isFormControlsRefreshEnabled && this.type === 'month') {
-      var newSelection = this.getValidRangeNearestToDay(
-          Day.createFromToday(), /*lookForwardFirst*/ true);
-      if (newSelection) {
-        this.setSelectedMonthAndUpdateView(newSelection);
-      }
-    } else {
+    if (!global.params.isFormControlsRefreshEnabled) {
       eventHandled = this._moveHighlightTo(Month.createFromToday());
       if (global.params.isFormControlsRefreshEnabled) {
         this.dispatchEvent(
@@ -4868,10 +4862,6 @@ CalendarPicker.prototype.onCalendarTableKeyDownRefresh = function(event) {
 
   if (!event.target.matches('.today-button-refresh') && this._selection) {
     switch (key) {
-      case 't':
-        this.setSelection(this.getValidRangeNearestToDay(
-            Day.createFromToday(), /*lookForwardFirst*/ true));
-        break;
       case 'PageUp':
         var previousMonth = this.currentMonth().previous();
         if (previousMonth && previousMonth >= this.config.minimumValue) {
@@ -4888,23 +4878,6 @@ CalendarPicker.prototype.onCalendarTableKeyDownRefresh = function(event) {
           this.ensureSelectionIsWithinCurrentMonth();
         }
         break;
-      case 'm':
-      case 'M':
-        offset = offset || 1;
-        // Fall-through.
-      case 'y':
-      case 'Y':
-        offset = offset || MonthsPerYear;
-        // Fall-through.
-      case 'd':
-      case 'D':
-        offset = offset || MonthsPerYear * 10;
-        this.setCurrentMonth(
-            event.shiftKey ? this.currentMonth().previous(offset) :
-                             this.currentMonth().next(offset),
-            CalendarPicker.NavigationBehavior.WithAnimation);
-        this.ensureSelectionIsWithinCurrentMonth();
-        break;
       case 'ArrowUp':
       case 'ArrowDown':
       case 'ArrowLeft':
@@ -5091,14 +5064,6 @@ CalendarPicker.prototype.onBodyKeyDown = function(event) {
         window.pagePopupController.setValue(this.getSelectedValue());
       }
       break;
-    case 't':
-      if (global.params.isFormControlsRefreshEnabled &&
-          event.target.matches('.calendar-table-view') &&
-          this.type !== 'datetime-local' && this._selection) {
-        window.pagePopupController.setValueAndClosePopup(
-            0, this.getSelectedValue());
-      }
-      break;
     case 'Enter':
       // Submit the popup for an Enter keypress except when the user is
       // hitting Enter to activate the month switcher button, Today button,
@@ -5135,11 +5100,7 @@ CalendarPicker.prototype.onBodyKeyDown = function(event) {
       // Fall-through.
     case 'd':
     case 'D':
-      if (global.params.isFormControlsRefreshEnabled) {
-        if (this.type !== 'datetime-local') {
-          window.pagePopupController.setValue(this.getSelectedValue());
-        }
-      } else {
+      if (!global.params.isFormControlsRefreshEnabled) {
         offset = offset || MonthsPerYear * 10;
         var oldFirstVisibleRow =
             this.calendarTableView

third_party/blink/renderer/core/html/forms/resources/datetimelocal_picker.js

@@ -77,13 +77,6 @@ class DateTimeLocalPicker extends HTMLElement {
       case 'ArrowRight':
       case 'PageUp':
       case 'PageDown':
-      case 't':
-      case 'm':
-      case 'M':
-      case 'y':
-      case 'Y':
-      case 'd':
-      case 'D':
         if (event.target.matches('.calendar-table-view, .time-column') &&
             this.hasSelectedDate) {
           window.pagePopupController.setValue(this.selectedValue);

third_party/blink/renderer/core/html/forms/resources/month_picker.js

@@ -105,14 +105,6 @@ class MonthPicker extends HTMLElement {
 
   onKeyDown_ = (event) => {
     switch (event.key) {
-      case 't':
-        if (this.selectedMonth) {
-          window.pagePopupController.setValueAndClosePopup(
-              0, this.selectedMonth.toString());
-        } else {
-          window.pagePopupController.closePopup();
-        }
-        break;
       case 'Enter':
         // Don't do anything here if user has hit Enter on 'This month'
         // button.  We'll handle that in this.onTodayButtonClick_.

third_party/blink/web_tests/fast/forms/calendar-picker/calendar-picker-type-change-onchange.html

@@ -6,11 +6,11 @@
 <script>
 description('Check if we have no crash in a case that the input type is changed by selecting a day in the calendar picker.');
 
-openPicker(document.getElementById('date1'), selectToday);
+openPicker(document.getElementById('date1'), selectDay);
 
-function selectToday() {
-    eventSender.keyDown('t');
-    eventSender.keyDown('\n');
+function selectDay() {
+    eventSender.keyDown('ArrowRight');
+    eventSender.keyDown('Enter');
 }
 
 function changeType(input) {

third_party/blink/web_tests/virtual/controls-refresh/calendar-picker/date-picker-hotkeys.html

@@ -9,44 +9,11 @@
 </head>
 <body>
 <input type="date" id="date-0" value="2019-02-14">
-<input type="date" id="date-1" value="2019-02-14">
-<input type="date" id="date-2" value="2019-02-14">
-<input type="date" id="date-3" value="2019-02-14">
 <script>
 
 promise_test(() => {
   let dateElement = document.getElementById('date-0');
   return openPickerWithPromise(dateElement)
-  .then(() => {
-    eventSender.keyDown('t');
-
-    let splitDate = dateElement.value.split('-');
-    let actualTodayDateString = new Date(splitDate[0], splitDate[1] - 1, [splitDate[2]]).toDateString();
-    let expectedTodayDateString = new Date().toDateString();
-
-    assert_equals(actualTodayDateString, expectedTodayDateString, "Today hotkey should have updated in-page control to today's date");
-    assert_equals(internals.pagePopupWindow, null, "'t' key should close popup.");
-  });
-}, "Date picker: 't' key should select today's date and close popup");
-
-promise_test(() => {
-  let dateElement = document.getElementById('date-1');
-  return openPickerWithPromise(dateElement)
-  .then(() => {
-    eventSender.keyDown('m');
-    assert_equals(dateElement.value, "2019-03-14", "Next month hotkey should have incremented month");
-
-    eventSender.keyDown('M');
-    assert_equals(dateElement.value, "2019-02-14", "Previous month hotkey should have decremented month");
-
-    eventSender.keyDown('Enter');
-    assert_equals(internals.pagePopupWindow, null, "Enter key should have closed popup.");
-  });
-}, "Date picker: Previous/next month hotkey (m/M)");
-
-promise_test(() => {
-  let dateElement = document.getElementById('date-1');
-  return openPickerWithPromise(dateElement)
   .then(() => {
     eventSender.keyDown('PageDown');
     assert_equals(dateElement.value, "2019-03-14", "Next month hotkey should have incremented month");
@@ -59,36 +26,6 @@ promise_test(() => {
   });
 }, "Date picker: Previous/next month hotkey (PageDown/PageUp)");
 
-promise_test(() => {
-  let dateElement = document.getElementById('date-2');
-  return openPickerWithPromise(dateElement)
-  .then(() => {
-    eventSender.keyDown('y');
-    assert_equals(dateElement.value, "2020-02-14", "Next year hotkey should have incremented year");
-
-    eventSender.keyDown('Y');
-    assert_equals(dateElement.value, "2019-02-14", "Previous year hotkey should have decremented year");
-
-    eventSender.keyDown('Enter');
-    assert_equals(internals.pagePopupWindow, null, "Enter key should have closed popup.");
-  });
-}, "Date picker: Previous/next year hotkey");
-
-promise_test(() => {
-  let dateElement = document.getElementById('date-3');
-  return openPickerWithPromise(dateElement)
-  .then(() => {
-    eventSender.keyDown('d');
-    assert_equals(dateElement.value, "2029-02-14", "Next year hotkey should have incremented decade");
-
-    eventSender.keyDown('D');
-    assert_equals(dateElement.value, "2019-02-14", "Previous year hotkey should have decremented decade");
-
-    eventSender.keyDown('Enter');
-    assert_equals(internals.pagePopupWindow, null, "Enter key should have closed popup.");
-  });
-}, "Date picker: Previous/next decade hotkey");
-
 </script>
 </body>
 </html>

third_party/blink/web_tests/virtual/controls-refresh/datetimelocal-picker/datetimelocal-hotkeys.html

@@ -9,45 +9,11 @@
 </head>
 <body>
 <input type="datetime-local" id="datetime-local-0" value="2019-02-14T13:02">
-<input type="datetime-local" id="datetime-local-1" value="2019-02-14T13:02">
-<input type="datetime-local" id="datetime-local-2" value="2019-02-14T13:02">
-<input type="datetime-local" id="datetime-local-3" value="2019-02-14T13:02">
 <script>
 
 promise_test(() => {
   let dateTimeElement = document.getElementById('datetime-local-0');
   return openPickerWithPromise(dateTimeElement)
-  .then(() => {
-    eventSender.keyDown('t');
-
-    let actualTodayDateString = new Date(dateTimeElement.value).toDateString();
-    let expectedTodayDateString = new Date().toDateString();
-
-    assert_equals(actualTodayDateString, expectedTodayDateString, "Today hotkey should have updated in-page control to today's date");
-    
-    eventSender.keyDown('Enter');
-    assert_equals(internals.pagePopupWindow, null, "Enter key should have closed popup.");
-  });
-}, "Datetimelocal picker: 't' key should select today's date and close popup");
-
-promise_test(() => {
-  let dateTimeElement = document.getElementById('datetime-local-1');
-  return openPickerWithPromise(dateTimeElement)
-  .then(() => {
-    eventSender.keyDown('m');
-    assert_equals(dateTimeElement.value, "2019-03-14T13:02", "Next month hotkey should have incremented month");
-
-    eventSender.keyDown('M');
-    assert_equals(dateTimeElement.value, "2019-02-14T13:02", "Previous month hotkey should have decremented month");
-
-    eventSender.keyDown('Enter');
-    assert_equals(internals.pagePopupWindow, null, "Enter key should have closed popup.");
-  });
-}, "Datetimelocal picker: Previous/next month hotkey (m/M)");
-
-promise_test(() => {
-  let dateTimeElement = document.getElementById('datetime-local-1');
-  return openPickerWithPromise(dateTimeElement)
   .then(() => {
     eventSender.keyDown('PageDown');
     assert_equals(dateTimeElement.value, "2019-03-14T13:02", "Next month hotkey should have incremented month");
@@ -60,36 +26,6 @@ promise_test(() => {
   });
 }, "Datetimelocal picker: Previous/next month hotkey (PageDown/PageUp)");
 
-promise_test(() => {
-  let dateTimeElement = document.getElementById('datetime-local-2');
-  return openPickerWithPromise(dateTimeElement)
-  .then(() => {
-    eventSender.keyDown('y');
-    assert_equals(dateTimeElement.value, "2020-02-14T13:02", "Next year hotkey should have incremented year");
-
-    eventSender.keyDown('Y');
-    assert_equals(dateTimeElement.value, "2019-02-14T13:02", "Previous year hotkey should have decremented year");
-
-    eventSender.keyDown('Enter');
-    assert_equals(internals.pagePopupWindow, null, "Enter key should have closed popup.");
-  });
-}, "Datetimelocal picker: Previous/next year hotkey");
-
-promise_test(() => {
-  let dateTimeElement = document.getElementById('datetime-local-3');
-  return openPickerWithPromise(dateTimeElement)
-  .then(() => {
-    eventSender.keyDown('d');
-    assert_equals(dateTimeElement.value, "2029-02-14T13:02", "Next year hotkey should have incremented decade");
-
-    eventSender.keyDown('D');
-    assert_equals(dateTimeElement.value, "2019-02-14T13:02", "Previous year hotkey should have decremented decade");
-
-    eventSender.keyDown('Enter');
-    assert_equals(internals.pagePopupWindow, null, "Enter key should have closed popup.");
-  });
-}, "Datetimelocal picker: Previous/next decade hotkey");
-
 </script>
 </body>
 </html>

third_party/blink/web_tests/virtual/controls-refresh/month-picker/month-picker-this-month-hotkey.html

-<!DOCTYPE html>
-<html>
-<head>
-<script src="../../../resources/testharness.js"></script>
-<script src="../../../resources/testharnessreport.js"></script>
-<script src="../../../fast/forms/resources/common.js"></script>
-<script src="../../../fast/forms/resources/picker-common.js"></script>
-<script src="../../../fast/forms/calendar-picker/resources/calendar-picker-common.js"></script>
-</head>
-<body>
-<input type="month" id="month" value="2019-02">
-<script>
-
-promise_test(() => {
-  let monthElement = document.getElementById('month');
-  return openPickerWithPromise(monthElement)
-  .then(() => {
-    eventSender.keyDown('t');
-
-    let splitDate = monthElement.value.split('-');
-    let actualTodayDateString = new Date(splitDate[0], splitDate[1] - 1).toDateString();
-    let today = new Date();
-    today.setDate(1);
-    let expectedTodayDateString = today.toDateString();
-
-    assert_equals(actualTodayDateString, expectedTodayDateString, "Today hotkey should have updated in-page control to current month");
-    assert_equals(internals.pagePopupWindow, null, "'t' key should close popup.");
-  });
-}, "Month picker: 't' key should select this month and close popup");
-
-</script>
-</body>
-</html>

third_party/blink/web_tests/virtual/controls-refresh/week-picker/week-picker-this-week-hotkey.html

-<!DOCTYPE html>
-<html>
-<head>
-<script src="../../../resources/testharness.js"></script>
-<script src="../../../resources/testharnessreport.js"></script>
-<script src="../../../fast/forms/resources/common.js"></script>
-<script src="../../../fast/forms/resources/picker-common.js"></script>
-<script src="../../../fast/forms/calendar-picker/resources/calendar-picker-common.js"></script>
-</head>
-<body>
-<input type="week" id="week" value="2019-W02">
-<script>
-
-promise_test(() => {
-  let weekElement = document.getElementById('week');
-  return openPickerWithPromise(weekElement)
-  .then(() => {
-    eventSender.keyDown('t');
-
-    let weekRegExp = new RegExp(`${new Date().getFullYear()}-W\\d{2}`);
-    assert_true(weekRegExp.test(weekElement.value), "'This week' hotkey should have updated in-page control to current week");
-    assert_equals(internals.pagePopupWindow, null, "'t' key should close popup.");
-  });
-}, "Week picker: 't' key should select this week and close popup");
-
-</script>
-</body>
-</html>