[NTP] Prevent double focus on back arrow

Prevent two focus indicators on the back arrow by making the grey circle
the tabbable element.

Bug: 878341
Change-Id: Ib18aa4669d3f8ea39754bb2ecadafaf718fe3143
Reviewed-on: https://chromium-review.googlesource.com/1249834Reviewed-by: Kristi Park <kristipark@chromium.org>
Commit-Queue: Kyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#594909}

chrome/browser/resources/local_ntp/custom_backgrounds.css

@@ -258,6 +258,7 @@ html[dir=rtl] #bg-sel-tiles {
   background-size: 20px 20px;
   display: none;
   height: 20px;
+  outline: none;
   width: 20px;
 }
 
@@ -266,10 +267,12 @@ html[dir=rtl] #bg-sel-tiles {
   display: none;
   height: 36px;
   margin: 8px 8px 0 16px;
+  outline: none;
   width: 36px;
 }
 
-#bg-sel-back-circle:active {
+#bg-sel-back-circle:active,
+#bg-sel-back-circle:focus {
   background: rgb(218, 220, 224);
   background-position: center;
   background-size: 36px 36px;

chrome/browser/resources/local_ntp/custom_backgrounds.js

@@ -71,6 +71,7 @@ customBackgrounds.KEYCODES = {
 customBackgrounds.IDS = {
   ATTRIBUTIONS: 'custom-bg-attr',
   BACK: 'bg-sel-back',
+  BACK_CIRCLE: 'bg-sel-back-circle',
   CANCEL: 'bg-sel-footer-cancel',
   CUSTOM_LINKS_RESTORE_DEFAULT: 'custom-links-restore-default',
   CUSTOM_LINKS_RESTORE_DEFAULT_TEXT: 'custom-links-restore-default-text',
@@ -1070,7 +1071,7 @@ customBackgrounds.initCustomBackgrounds = function(showErrorNotification) {
     customBackgrounds.networkStateChanged(false);
   }
 
-  $(customBackgrounds.IDS.BACK)
+  $(customBackgrounds.IDS.BACK_CIRCLE)
       .setAttribute('aria-label', configData.translatedStrings.backLabel);
   $(customBackgrounds.IDS.CANCEL)
       .setAttribute('aria-label', configData.translatedStrings.selectionCancel);
@@ -1222,7 +1223,7 @@ customBackgrounds.initCustomBackgrounds = function(showErrorNotification) {
         customBackgrounds.dialogCollectionsSource);
   };
   $(customBackgrounds.IDS.BACK).onclick = backInteraction;
-  $(customBackgrounds.IDS.BACK).onkeyup = function(event) {
+  $(customBackgrounds.IDS.BACK_CIRCLE).onkeyup = function(event) {
     if (event.keyCode === customBackgrounds.KEYCODES.ENTER) {
       backInteraction(event);
     }

chrome/browser/resources/local_ntp/local_ntp.html

@@ -121,8 +121,8 @@
 
   <dialog id="bg-sel-menu">
     <div id="bg-sel-title-bar">
-    <div id="bg-sel-back-circle">
-      <button id="bg-sel-back" tabindex="0"></button>
+    <div id="bg-sel-back-circle" tabindex="0" role="button">
+      <div id="bg-sel-back"></div>
     </div>
     <div id="bg-sel-title"></div>
     </div>