Move highlight-on-hover for calendar picker to CSS

This change moves the logic for handling highlight-on-hover for cells
in date controls out of the JS and into :hover CSS rules.  I'd
originally planned for this work to wait until the old form controls
implementation was removed.  However, the highlight-managing code is
setting ARIA attributes in a way that doesn't make sense now that the
highlight positions no longer drive selection and are merely decorative.
So as part of improving the screen reader experience for these controls
it seems best to go ahead and do this work now.

The highlight-managing code is now all effectively dead code when
FormControlsRefresh is enabled that can be straightforwardly
chopped out when the time comes to remove the old implementation.

A follow-up change will ensure that the correct ARIA attributes are
set for selection changes.

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

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

@@ -1869,7 +1869,18 @@ ListView.prototype.addCellIfNecessary = function(row) {
   if (cell)
     return cell;
   cell = this.prepareNewCell(row);
-  cell.attachTo(this.scrollView.contentElement);
+
+  // Ensure that the DOM tree positions of the rows are in increasing
+  // chronological order.  This is needed for correct application of
+  // the :hover selector for the week control, which spans across multiple
+  // calendar rows.
+  var rowIndices = Object.keys(this._cells);
+  var shouldPrepend = (rowIndices.length) > 0 && (row < rowIndices[0]);
+  cell.attachTo(
+      this.scrollView.contentElement,
+      shouldPrepend ? this.scrollView.contentElement.firstElementChild :
+                      undefined);
+
   cell.setWidth(this._width);
   cell.setPosition(this.scrollView.contentPositionForContentOffset(
       this.scrollOffsetForRow(row)));
@@ -2515,7 +2526,9 @@ function YearListView(minimumMonth, maximumMonth, config) {
   /**
    * @type {?Month}
    */
-  this.highlightedMonth = null;
+  if (!global.params.isFormControlsRefreshEnabled) {
+    this.highlightedMonth = null;
+  }
   /**
    * @type {?Month}
    */
@@ -2564,10 +2577,12 @@ function YearListView(minimumMonth, maximumMonth, config) {
   this.scrubbyScrollBar = new ScrubbyScrollBar(this.scrollView);
   this.scrubbyScrollBar.attachTo(this);
 
-  this.element.addEventListener('mouseover', this.onMouseOver, false);
-  this.element.addEventListener('mouseout', this.onMouseOut, false);
   this.element.addEventListener('keydown', this.onKeyDown, false);
-  this.element.addEventListener('touchstart', this.onTouchStart, false);
+  if (!global.params.isFormControlsRefreshEnabled) {
+    this.element.addEventListener('mouseover', this.onMouseOver, false);
+    this.element.addEventListener('mouseout', this.onMouseOut, false);
+    this.element.addEventListener('touchstart', this.onTouchStart, false);
+  }
 
   if (global.params.isFormControlsRefreshEnabled && config &&
       config.mode == 'month') {
@@ -2591,6 +2606,16 @@ function YearListView(minimumMonth, maximumMonth, config) {
     }
 
     this._initialSelectedMonth = this._selectedMonth;
+  } else if (global.params.isFormControlsRefreshEnabled) {
+    // This is a month switcher menu embedded in another calendar control.
+    // Set up our config so that getNearestValidRangeLookingForward(Backward)
+    // when called on this YearListView will navigate by month.
+    this.config = {};
+    this.config.minimumValue = minimumMonth;
+    this.config.maximumValue = maximumMonth;
+    this.config.step = Month.DefaultStep;
+    this.config.stepBase = Month.DefaultStepBase;
+    this._dateTypeConstructor = Month;
   }
 }
 
@@ -2743,8 +2768,8 @@ YearListView.prototype.onClick = function(event) {
   if (this.selectedRow !== oldSelectedRow) {
     // Always start with first month when changing the year.
     const month = new Month(year, 0);
-    this.highlightMonth(month);
     if (!global.params.isFormControlsRefreshEnabled) {
+      this.highlightMonth(month);
       this.dispatchEvent(
           YearListView.EventTypeYearListViewDidSelectMonth, this, month);
     }
@@ -2842,7 +2867,8 @@ YearListView.prototype.prepareNewCell = function(row) {
     }
     cell.monthButtons[i].setAttribute('aria-label', month.toLocaleString());
   }
-  if (this.highlightedMonth && row === this.highlightedMonth.year - 1) {
+  if (!global.params.isFormControlsRefreshEnabled && this.highlightedMonth &&
+      row === this.highlightedMonth.year - 1) {
     var monthButton = cell.monthButtons[this.highlightedMonth.month];
     monthButton.classList.add(YearListCell.ClassNameHighlighted);
     // aria-activedescendant assumes both elements have layoutObjects, and
@@ -2939,8 +2965,7 @@ YearListView.prototype.select = function(row) {
         this.selectedRow, YearListView.RowAnimationDirection.Opening);
     if (selectedCell)
       selectedCell.setSelected(true);
-    if (!(global.params.isFormControlsRefreshEnabled &&
-          this.type === 'month')) {
+    if (!global.params.isFormControlsRefreshEnabled) {
       var month = this.highlightedMonth ? this.highlightedMonth.month : 0;
       this.highlightMonth(new Month(this.selectedRow + 1, month));
     }
@@ -3048,7 +3073,9 @@ YearListView.prototype.show = function(month) {
 
   this.scrollToRow(month.year - 1, false);
   this.selectWithoutAnimating(month.year - 1);
-  this.highlightMonth(month);
+  if (!global.params.isFormControlsRefreshEnabled) {
+    this.highlightMonth(month);
+  }
   this.showSelectedMonth();
 };
 
@@ -3088,8 +3115,7 @@ YearListView.prototype.onKeyDown = function(event) {
       }
     }
   } else if (
-      global.params.isFormControlsRefreshEnabled && this.type === 'month' &&
-      this._selectedMonth) {
+      global.params.isFormControlsRefreshEnabled && this._selectedMonth) {
     if (global.params.isLocaleRTL ? key == 'ArrowRight' : key == 'ArrowLeft') {
       var newSelection = this.getNearestValidRangeLookingBackward(
           this._selectedMonth.previous());
@@ -3127,10 +3153,18 @@ YearListView.prototype.onKeyDown = function(event) {
       if (newSelection) {
         this.setSelectedMonthAndUpdateView(newSelection);
       }
+    } else if (this.type !== 'month') {
+      if (key == 'Enter') {
+        this.dispatchEvent(
+            YearListView.EventTypeYearListViewDidSelectMonth, this,
+            this._selectedMonth);
+      } else if (key == 'Escape') {
+        this.hide();
+        eventHandled = true;
+      }
     }
   } else if (
-      !(global.params.isFormControlsRefreshEnabled && this.type === 'month') &&
-      this.highlightedMonth) {
+      !global.params.isFormControlsRefreshEnabled && this.highlightedMonth) {
     if (global.params.isLocaleRTL ? key == 'ArrowRight' : key == 'ArrowLeft')
       eventHandled = this._moveHighlightTo(this.highlightedMonth.previous());
     else if (key == 'ArrowUp')
@@ -3152,11 +3186,6 @@ YearListView.prototype.onKeyDown = function(event) {
       this.dispatchEvent(
           YearListView.EventTypeYearListViewDidSelectMonth, this,
           this.highlightedMonth);
-      if (!global.params.isFormControlsRefreshEnabled) {
-        this.hide();
-        eventHandled = true;
-      }
-    } else if (key == 'Escape' && global.params.isFormControlsRefreshEnabled) {
       this.hide();
       eventHandled = true;
     }
@@ -3880,6 +3909,7 @@ CalendarTableHeaderView.GetHeight = function() {
  */
 function CalendarRowCell() {
   ListCell.call(this);
+
   this.element.classList.add(CalendarRowCell.ClassNameCalendarRowCell);
   this.element.style.height = CalendarRowCell.GetHeight() + 'px';
   this.element.setAttribute('role', 'row');
@@ -4022,8 +4052,10 @@ function CalendarTableView(calendarPicker) {
   this._ignoreMouseOutUntillNextMouseOver = false;
 
   this.element.addEventListener('click', this.onClick, false);
-  this.element.addEventListener('mouseover', this.onMouseOver, false);
-  this.element.addEventListener('mouseout', this.onMouseOut, false);
+  if (!global.params.isFormControlsRefreshEnabled) {
+    this.element.addEventListener('mouseover', this.onMouseOver, false);
+    this.element.addEventListener('mouseout', this.onMouseOut, false);
+  }
 
   // You shouldn't be able to use the mouse wheel to scroll.
   this.scrollView.element.removeEventListener(
@@ -4237,14 +4269,17 @@ CalendarTableView.prototype.updateCells = function() {
     dayCell.setIsToday(Day.createFromToday().equals(day));
     dayCell.setSelected(
         day >= firstDayInSelection && day <= lastDayInSelection);
-    var isHighlighted = day >= firstDayInHighlight && day <= lastDayInHighlight;
-    dayCell.setHighlighted(isHighlighted);
-    if (isHighlighted) {
-      if (firstDayInHighlight == lastDayInHighlight)
-        activeCell = dayCell;
-      else if (
-          this.calendarPicker.type == 'month' && day == firstDayInHighlight)
-        activeCell = dayCell;
+    if (!global.params.isFormControlsRefreshEnabled) {
+      var isHighlighted =
+          day >= firstDayInHighlight && day <= lastDayInHighlight;
+      dayCell.setHighlighted(isHighlighted);
+      if (isHighlighted) {
+        if (firstDayInHighlight == lastDayInHighlight)
+          activeCell = dayCell;
+        else if (
+            this.calendarPicker.type == 'month' && day == firstDayInHighlight)
+          activeCell = dayCell;
+      }
     }
     dayCell.setIsInCurrentMonth(
         day >= firstDayInCurrentMonth && day <= lastDayInCurrentMonth);
@@ -4254,11 +4289,13 @@ CalendarTableView.prototype.updateCells = function() {
     for (var weekString in this._weekNumberCells) {
       var weekNumberCell = this._weekNumberCells[weekString];
       var week = weekNumberCell.week;
-      var isWeekHighlighted = highlight && highlight.equals(week);
       weekNumberCell.setSelected(selection && selection.equals(week));
-      weekNumberCell.setHighlighted(isWeekHighlighted);
-      if (isWeekHighlighted)
-        activeCell = weekNumberCell;
+      if (!global.params.isFormControlsRefreshEnabled) {
+        var isWeekHighlighted = highlight && highlight.equals(week);
+        weekNumberCell.setHighlighted(isWeekHighlighted);
+        if (isWeekHighlighted)
+          activeCell = weekNumberCell;
+      }
       weekNumberCell.setDisabled(!this.calendarPicker.isValid(week));
     }
   }
@@ -4337,6 +4374,10 @@ function CalendarPicker(type, config) {
 
   this._setValidDateConfig(config);
 
+  if (global.params.isFormControlsRefreshEnabled && this.type === 'week') {
+    this.element.classList.add(CalendarPicker.ClassNameWeekPicker);
+  }
+
   /**
    * @type {!Month}
    * @const
@@ -4389,11 +4430,10 @@ function CalendarPicker(type, config) {
   /**
    * @type {?DateType}
    * @protected
-   * TODO(crbug.com/1046054) Once pre-FormControlsRefresh code is deleted,
-   * remove _highlight and the code to manage it; replace with a :hover
-   * style.
    */
-  this._highlight = null;
+  if (!global.params.isFormControlsRefreshEnabled) {
+    this._highlight = null;
+  }
 
   this.calendarTableView.element.addEventListener(
       'keydown',
@@ -4455,6 +4495,7 @@ Object.assign(CalendarPicker.prototype, DateRangeManager);
 CalendarPicker.Padding = 10;
 CalendarPicker.BorderWidth = 1;
 CalendarPicker.ClassNameCalendarPicker = 'calendar-picker';
+CalendarPicker.ClassNameWeekPicker = 'week-picker';
 CalendarPicker.ClassNamePreparing = 'preparing';
 CalendarPicker.EventTypeCurrentMonthChanged = 'currentMonthChanged';
 CalendarPicker.commitDelayMs = 100;
@@ -4664,7 +4705,9 @@ CalendarPicker.prototype.setSelection = function(dayOrWeekOrMonth) {
     return;
   if (this._selection && !dayOrWeekOrMonth) {
     this._selection = null;
-    this._setHighlight(null);
+    if (!global.params.isFormControlsRefreshEnabled) {
+      this._setHighlight(null);
+    }
     return;
   }
   var firstDayInSelection = dayOrWeekOrMonth.firstDay();
@@ -4698,7 +4741,9 @@ CalendarPicker.prototype.setSelection = function(dayOrWeekOrMonth) {
           candidateCurrentMonth,
           CalendarPicker.NavigationBehavior.WithAnimation);
   }
-  this._setHighlight(dayOrWeekOrMonth);
+  if (!global.params.isFormControlsRefreshEnabled) {
+    this._setHighlight(dayOrWeekOrMonth);
+  }
   if (!this.isValid(dayOrWeekOrMonth))
     return;
   this._selection = dayOrWeekOrMonth;

third_party/blink/renderer/core/html/forms/resources/calendar_picker_refresh.css

@@ -105,9 +105,35 @@ body {
     transition: color 0s;
 }
 
-.day-cell.highlighted,
-.month-button.highlighted,
-.week-number-cell.highlighted {
+/*
+* Highlight-when-hovered for cells in the month picker menu and standalone
+* month control
+*/
+.month-button:hover {
+  background-color: rgba(0, 117, 255, 0.3);
+}
+
+/*
+* Highlight-when-hovered for day cells except if this is a week picker
+*/
+:not(.week-picker) > .calendar-table-view > .scroll-view > .scroll-view-content
+    > .calendar-row-cell > .day-cell:hover {
+  background-color: rgba(0, 117, 255, 0.3);
+}
+
+/*
+* Highlight-when-hovered for week picker, in 3 parts:
+* 1. Highlight all cells in the hovered row except for Monday, because it
+*    belongs to the previous week.
+* 2. Highlight Monday of the row after the hovered row, because it belongs to
+*    this week
+* 3. Highlight the week number cell for the hovered week
+*/
+.week-picker .calendar-row-cell:hover
+    .day-cell:not(.selected):not(.disabled):not(:nth-child(2)),
+.week-picker .calendar-row-cell:hover + .calendar-row-cell
+    .day-cell:nth-child(2):not(.selected):not(.disabled),
+.calendar-row-cell:hover .week-number-cell:not(.selected):not(.disabled) {
   background-color: rgba(0, 117, 255, 0.3);
 }
 
@@ -126,7 +152,6 @@ body {
   outline-offset: -2px;
 }
 
-.day-cell.highlighted.today,
 .day-cell.today,
 .month-button.today {
   border-color: #767676 !important;
@@ -260,9 +285,9 @@ body {
     color: WindowText;
   }
 
-  .day-cell.highlighted,
-  .month-button.highlighted,
-  .week-number-cell.highlighted {
+  .day-cell:hover,
+  .month-button:hover,
+  .week-number-cell:hover {
     background-color: Window;
     border-color: Highlight !important;
   }
@@ -280,7 +305,6 @@ body {
     outline: none;
   }
 
-  .day-cell.highlighted.today,
   .day-cell.today,
   .month-button.today {
     border-color: WindowText !important;

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

@@ -24,22 +24,23 @@ promise_test(() => {
         if (type == 'Focus') {
           console.log('Received Focus event: ' + accessibilityController.focusedElement.name.replace(/,/g, ''));
           focusCounter++;
-        } else if (type == 'MarkDirty') {
-          console.log('Received MarkDirty event');
-          if (++markDirtyCounter == 1) {
+          if (focusCounter == 1) {
             assert_equals(date1.value, "2000-01-03", "Expected arrow key to change date");
             console.log('Open the month switcher menu.');
             setTimeout(() => { clickMonthPopupButton(); }, 0);
-          } else if (markDirtyCounter == 3) {
+          } else if (focusCounter == 2) {
             console.log('Highlighting 2000-02 in the month popup');
             setTimeout(function() { eventSender.keyDown('ArrowRight'); }, 0);
-          } else if (markDirtyCounter == 5) {
+          } else if (focusCounter == 3) {
             console.log('Pressing enter to submit month switcher menu selection');
             setTimeout(function() { eventSender.keyDown('Enter'); }, 0);
           }
+        } else if (type == 'MarkDirty') {
+          console.log('Received MarkDirty event');
+          markDirtyCounter++;
         }
 
-        if (focusCounter == 5 && markDirtyCounter == 7) {
+        if (focusCounter == 5 && markDirtyCounter == 2) {
           assert_equals(date1.value, "2000-02-03", "Submitting month switcher should have udpated control value");
           resolve();
         }

third_party/blink/web_tests/virtual/controls-refresh/calendar-picker/date-picker-highlighted-month-after-year-change.html

-<!DOCTYPE html>
-<script>
-testRunner.waitUntilDone();
-</script>
-<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>
-<input type=date id=date value="2017-07-31">
-<script>
-
-let t = async_test('Test highlighted month in year view.');
-
-function test1() {
-  clickMonthPopupButton();
-  clickYearListCell(2018);
-  assert_equals(highlightedMonthButton(), "2018-01");
-}
-
-t.step(() => {
-  openPicker(document.getElementById('date'), t.step_func_done(test1));
-});
-</script>

third_party/blink/web_tests/virtual/controls-refresh/color-scheme/calendar-picker/date-picker-appearance-highlight.html

+<!DOCTYPE html>
+<script>
+testRunner.waitUntilDone();
+</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>
+<input type="date" id="date" value="2018-08-05">
+<script>
+openPicker(document.getElementById('date'), function() {
+  hoverOverDayCellAt(2, 3);
+  testRunner.notifyDone()
+});
+</script>

third_party/blink/web_tests/virtual/controls-refresh/color-scheme/week-picker/week-picker-appearance-highlight.html

+<!DOCTYPE html>
+<script>
+testRunner.waitUntilDone();
+</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>
+<input type="week" id="week" value="2018-W06">
+<script>
+openPicker(document.getElementById('week'), function() {
+  hoverOverDayCellAt(3, 4);
+  testRunner.notifyDone()
+});
+</script>

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

@@ -27,7 +27,7 @@ promise_test(() => {
           markDirtyCounter++;
         }
 
-        if (focusCounter == 1 && markDirtyCounter == 1) {
+        if (focusCounter == 1 && markDirtyCounter == 0) {
           resolve();
         }
       });