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/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();
         }
       });