[New Tab Page] Change which elements get focused during tab ordering

chrome/browser/resources/local_ntp/most_visited_util.js

 // Copyright 2013 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 
 /**
  * @fileoverview Utilities for rendering most visited thumbnails and titles.
  */
 
 <include src="instant_iframe_validation.js">
@@ skipping 105 matching lines @@
     // The fading length in pixels is passed by the caller.
     var mask = 'linear-gradient(' + dir + ', rgba(0,0,0,1), rgba(0,0,0,1) ' +
         styles.textFadePos + 'px, rgba(0,0,0,0))';
     link.style.textOverflow = 'clip';
     link.style.webkitMask = mask;
   }
 
   link.href = href;
   link.title = title;
   link.target = '_top';
-  // Exclude links from the tab order.  The tabIndex is added to the thumbnail
-  // parent container instead.
-  link.tabIndex = '-1';
+  // Include links in the tab order.  The tabIndex is necessary for
+  // accessibility.
+  link.tabIndex = '0';
   if (text)
     link.textContent = text;
   link.addEventListener('mouseover', function() {
     var ntpApiHandle = chrome.embeddedSearch.newTabPage;
     ntpApiHandle.logEvent(NTP_LOGGING_EVENT_TYPE.NTP_MOUSEOVER);
   });
+  link.addEventListener('focus', function() {
+    window.parent.postMessage('linkFocused', DOMAIN_ORIGIN);
+  });
+  link.addEventListener('blur', function() {
+    window.parent.postMessage('linkBlurred', DOMAIN_ORIGIN);
+  });
 
   // Webkit's security policy prevents some Most Visited thumbnails from
   // working (those with schemes different from http and https). Therefore,
   // navigateContentWindow is being used in order to get all schemes working.
-  link.addEventListener('click', function handleNavigation(e) {
+  var navigateFunction = function handleNavigation(e) {
     var isServerSuggestion = 'url' in params;
 
     // Ping are only populated for server-side suggestions, never for MV.
     if (isServerSuggestion && params.ping) {
       generatePing(DOMAIN_ORIGIN + params.ping);
     }
 
     var ntpApiHandle = chrome.embeddedSearch.newTabPage;
     if ('pos' in params && isFinite(params.pos)) {
       ntpApiHandle.logMostVisitedNavigation(parseInt(params.pos, 10),
                                             provider || '');
     }
 
     if (!isServerSuggestion) {
       e.preventDefault();
       ntpApiHandle.navigateContentWindow(href, getDispositionFromEvent(e));
     }
     // Else follow <a> normally, so transition type would be LINK.
+  };
+
+  link.addEventListener('click', navigateFunction);
+  link.addEventListener('keydown', function(event) {
+    if (event.keyCode == 46 /* DELETE */ ||
+        event.keyCode == 8 /* BACKSPACE */) {
+      event.preventDefault();
+      window.parent.postMessage('tileBlacklisted,' + params.pos, DOMAIN_ORIGIN);
+    } else if (event.keyCode == 13 /* ENTER */) {

[dmazzoni, 2014/09/11 20:33:14]

Handle both space and enter here?

[Mathieu, 2014/09/11 20:54:10]

Done.

+      navigateFunction(event);
+    }
   });
 
   return link;
 }
 
 
 /**
  * Returns the color to display string with, depending on whether title is
  * displayed, the current theme, and URL parameters.
  * @param {Object.<string, string>} params URL parameters specifying style.
@@ skipping 110 matching lines @@
   if (navigator.sendBeacon) {
     navigator.sendBeacon(url);
   } else {
     // if sendBeacon is not enabled, we fallback for "a ping".
     var a = document.createElement('a');
     a.href = '#';
     a.ping = url;
     a.click();
   }
 }