[Autofill] Fix country row focus on tab navigation in address editor

Prior to this change, only country select element without the label was navigable. This caused the country dropdown to be seen chopped in some cases after using tab navigation.
This problem was fixed by making navigable the whole country row. It can't be focused on click, but when navigated using tab, the focus is propagated to the select element.

Bug: 1146937
Change-Id: I7e7a2e12d428e1ba2968a099b50abfd68e8c2520
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2527421Reviewed-by: Jan Wilken Dörrie <jdoerrie@chromium.org>
Reviewed-by: Christoph Schwering <schwering@google.com>
Reviewed-by: Matthias Körber <koerber@google.com>
Commit-Queue: Elizabeth Popova <lizapopova@google.com>
Cr-Commit-Position: refs/heads/master@{#826225}

chrome/browser/resources/settings/autofill_page/address_edit_dialog.html

@@ -14,6 +14,7 @@
 
       #select-row {
         display: block;
+        outline: none;
         /* Fix issue with focus animation making labels wiggle. */
         transform: translate3d(0, 0, 0);
       }
@@ -49,12 +50,15 @@
     <cr-dialog id="dialog" close-text="$i18n{close}">
       <div slot="title">[[title_]]</div>
       <div slot="body">
-        <div id="select-row" class="address-row">
+        <div id="select-row" class="address-row" tabindex="0"
+            on-focus="onCountryRowFocus_"
+            on-pointerdown="onCountryRowPointerDown_">
           <label id="select-label" class="cr-form-field-label">
             $i18n{addressCountry}
           </label>
           <select class="md-select" aria-labelledby="select-label"
-              value="[[countryCode_]]" on-change="onCountryChange_">
+              value="[[countryCode_]]" on-change="onCountryChange_"
+              tabindex="-1">
             <option value=""></option>
             <template is="dom-repeat" items="[[countries_]]">
               <option value="[[getCode_(item)]]"

chrome/browser/resources/settings/autofill_page/address_edit_dialog.js

@@ -212,6 +212,29 @@ Polymer({
         /** @type {!HTMLSelectElement} */ (this.$$('select'));
     this.countryCode_ = countrySelect.value;
   },
+
+  /**
+   * Propagates focus to the <select> when country row is focused
+   * (e.g. using tab navigation).
+   * @private
+   */
+  onCountryRowFocus_() {
+    const countrySelect =
+        /** @type {!HTMLSelectElement} */ (this.$$('select'));
+    countrySelect.focus();
+  },
+
+  /**
+   * Prevents clicking random spaces within country row but outside of <select>
+   * from triggering focus.
+   * @param {!Event} e
+   * @private
+   */
+  onCountryRowPointerDown_(e) {
+    if (e.path[0].tagName !== 'SELECT') {
+      e.preventDefault();
+    }
+  },
 });
 
 /**