Add focus rect for date/time picker icons

When accessibility is enabled, the date/time picker popup icon inside
of a date/datetime-local/week/month/time control is focusable
(this dates back to https://codereview.chromium.org/577553002).
However, the refreshed controls were not drawing a focus rect for the
icon.  With this change we now draw a focus rect.

The change moves some of the padding-inline-start for these icons to
margin-inline-start so that the focus rect is centered instead of
surrounding a bunch of empty space to the left of the icon.  This
padding difference affects the appearance of the controls in
high-contrast mode -- see the images baseline updates with this
change -- but I believe these differences are reasonable.

I haven't been able to include a test here because
PickerIndicatorElement::DidNotifySubtreeInsertionsToDocument()
has an early return before applying focusability to the icon when
running in a test environment.  Fixing this is outside of the scope
of this bugfix but I've filed crbug.com/1054048 to follow up.

Bug: 1053326
Change-Id: I2e3a2b42398b04187eeddd94d28ffafdd745d260
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2062679
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@{#742751}

third_party/blink/renderer/core/html/forms/picker_indicator_element.cc

@@ -176,7 +176,8 @@ void PickerIndicatorElement::DidNotifySubtreeInsertionsToDocument() {
     return;
   // Don't make this focusable if we are in web tests in order to avoid
   // breaking existing tests.
-  // FIXME: We should have a way to disable accessibility in web tests.
+  // TODO(crbug.com/1054048): We should have a way to disable accessibility in
+  // web tests.  Once we do have it, this early return should be removed.
   if (WebTestSupport::IsRunningWebTest())
     return;
   setAttribute(html_names::kTabindexAttr, "0");

third_party/blink/renderer/core/html/resources/controls_refresh.css

@@ -132,30 +132,45 @@ input[type="week" i]::-webkit-calendar-picker-indicator {
   background-repeat: no-repeat;
   background-size: contain;
   height: 1.2em;
+  margin-inline-start: 24px;
   opacity: 1;
   outline: none;
   padding-bottom: 2px;
-  padding-inline-start: 27px;
+  padding-inline-start: 3px;
   padding-inline-end: 3px;
   padding-top: 2px;
   width: 1.2em;
 }
 
+input[type="date" i]::-webkit-calendar-picker-indicator:focus,
+input[type="datetime-local" i]::-webkit-calendar-picker-indicator:focus,
+input[type="month" i]::-webkit-calendar-picker-indicator:focus,
+input[type="week" i]::-webkit-calendar-picker-indicator:focus {
+  outline: solid 2px -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
 input[type="time" i]::-webkit-calendar-picker-indicator {
   background-image: -webkit-image-set(url(images/time_icon.svg) 1x);
   background-origin: content-box;
   background-repeat: no-repeat;
   background-size: contain;
   height: 1.05em;
+  margin-inline-start: 8px;
   opacity: 1;
   outline: none;
   padding-bottom: 3px;
-  padding-inline-start: 11px;
+  padding-inline-start: 3px;
   padding-inline-end: 3px;
   padding-top: 3px;
   width: 1.05em;
 }
 
+input[type="time" i]::-webkit-calendar-picker-indicator:focus {
+  outline: solid 2px -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
 input::-webkit-calendar-picker-indicator:hover {
   background-color: initial;
 }