A11y: Extensions: Keep button in tab order to allow clearing shortcut.

Bug: 1031008
Change-Id: I4aece44c572589531cc34aae023ea62dc14f381f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1960183Reviewed-by: Devlin <rdevlin.cronin@chromium.org>
Commit-Queue: Hector Carmona <hcarmona@chromium.org>
Cr-Commit-Position: refs/heads/master@{#723539}

chrome/browser/resources/extensions/shortcut_input.html

@@ -14,6 +14,11 @@
     left: -2px;
     right: inherit;
   }
+
+  /* Invisible so the element is still in the tab order. */
+  [invisible] {
+    opacity: 0;
+  }
 </style>
 <div id="main">
   <cr-input id="input" placeholder="$i18n{shortcutTypeAShortcut}"
@@ -25,7 +30,8 @@
       value="[[computeText_(capturing_, shortcut, pendingShortcut_)]]">
     <cr-icon-button id="clear" aria-label="$i18nPolymer{clear}"
         slot="suffix" class="icon-cancel no-overlap"
-        hidden$="[[computeClearHidden_(capturing_, shortcut)]]"
+        invisible$="[[computeClearInvisible_(capturing_, shortcut)]]"
+        hidden$="[[computeClearHidden_(shortcut)]]"
         on-click="onClearTap_"></cr-icon-button>
   </cr-input>
 </div>

chrome/browser/resources/extensions/shortcut_input.js

@@ -235,13 +235,21 @@ Polymer({
   },
 
   /**
+   * Invisible when capturing AND we have a shortcut.
+   * @return {boolean} Whether the clear button is invisible.
+   * @private
+   */
+  computeClearInvisible_: function() {
+    return this.capturing_ && !!this.shortcut;
+  },
+
+  /**
+   * Hidden when no shortcut is set.
    * @return {boolean} Whether the clear button is hidden.
    * @private
    */
   computeClearHidden_: function() {
-    // We don't want to show the clear button if the input is currently
-    // capturing a new shortcut or if there is no shortcut to clear.
-    return this.capturing_ || !this.shortcut;
+    return !this.shortcut;
   },
 
   /**