[NTP] Custom background a11y fixes

Add the selected label to a tile when it is selected. Make the back button usable with the space bar. Bug: 858885 Change-Id: Ib84de79a84034805869e58e1d07c4f7891e8fecd Reviewed-on: https://chromium-review.googlesource.com/1157168 Commit-Queue: Kyle Milka <kmilka@chromium.org> Reviewed-by: Mathieu Perreault <mathp@chromium.org> Cr-Commit-Position: refs/heads/master@{#580067}

[NTP] Custom background a11y fixes
Add the selected label to a tile when it is selected. Make the back button usable with the space bar. Bug: 858885 Change-Id: Ib84de79a84034805869e58e1d07c4f7891e8fecd Reviewed-on: https://chromium-review.googlesource.com/1157168 Commit-Queue: Kyle Milka <kmilka@chromium.org> Reviewed-by: Mathieu Perreault <mathp@chromium.org> Cr-Commit-Position: refs/heads/master@{#580067}
703b82a6 · Kyle Milka · Commit Bot · 79358bd9 · 703b82a6 · 703b82a6
Commit 703b82a6 authored Aug 02, 2018 by Kyle Milka Committed by Commit Bot Aug 02, 2018
4 changed files
--- a/chrome/browser/resources/local_ntp/custom_backgrounds.js
+++ b/chrome/browser/resources/local_ntp/custom_backgrounds.js
@@ -450,6 +450,10 @@ customBackgrounds.applySelectedState = function(tile) {
  selectedBorder.appendChild(selectedCircle);
  selectedBorder.appendChild(selectedCheck);
  tile.appendChild(selectedBorder);
+  tile.dataset.oldLabel = tile.getAttribute('aria-label');
+  tile.setAttribute(
+      'aria-label',
+      tile.dataset.oldLabel + ' ' + configData.translatedStrings.selectedLabel);
 };

 /**
@@ -459,6 +463,7 @@ customBackgrounds.applySelectedState = function(tile) {
 customBackgrounds.removeSelectedState = function(tile) {
  tile.classList.remove(customBackgrounds.CLASSES.COLLECTION_SELECTED);
  tile.removeChild(tile.firstChild);
+  tile.setAttribute('aria-label', tile.dataset.oldLabel);
 };

 /**

--- a/chrome/browser/resources/local_ntp/local_ntp.html
+++ b/chrome/browser/resources/local_ntp/local_ntp.html
@@ -115,7 +115,7 @@
  <dialog id="bg-sel-menu">
    <div id="bg-sel-title-bar">
    <div id="bg-sel-back-circle">
-      <div id="bg-sel-back" tabindex="0"></div>
+      <button id="bg-sel-back" tabindex="0"></button>
    </div>
    <div id="bg-sel-title"></div>
    </div>

--- a/chrome/browser/search/local_ntp_source.cc
+++ b/chrome/browser/search/local_ntp_source.cc
@@ -189,6 +189,8 @@ std::unique_ptr<base::DictionaryValue> GetTranslatedStrings(bool is_google) {
              IDS_NTP_CUSTOM_BG_BACK_LABEL);
    AddString(translated_strings.get(), "photoLabel",
              IDS_NTP_CUSTOM_BG_GOOGLE_PHOTO_LABEL);
+    AddString(translated_strings.get(), "selectedLabel",
+              IDS_NTP_CUSTOM_BG_PHOTO_SELECTED);

    // Custom Links
    AddString(translated_strings.get(), "addLink",

--- a/chrome/test/data/local_ntp/local_ntp_browsertest.html
+++ b/chrome/test/data/local_ntp/local_ntp_browsertest.html
@@ -90,7 +90,9 @@

    <dialog id="bg-sel-menu">
      <div id="bg-sel-title-bar">
-      <div id="bg-sel-back" tabindex="0"></div>
+      <div id="bg-sel-back-circle">
+        <button id="bg-sel-back" tabindex="0"></button>
+      </div>
      <div id="bg-sel-title"></div>
      </div>
      <div id="bg-sel-tiles" tabindex="0"></div>
@@ -136,8 +138,6 @@
      </div>
    </dialog>

-    <iframe id="custom-links-edit" name="custom-links-edit"
-            src="chrome-search://most-visited/edit.html"></iframe>
  </template>
 </head>
 <body>