Commit 703b82a6 authored by Kyle Milka's avatar Kyle Milka Committed by Commit Bot

[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: default avatarMathieu Perreault <mathp@chromium.org>
Cr-Commit-Position: refs/heads/master@{#580067}
parent 79358bd9
...@@ -450,6 +450,10 @@ customBackgrounds.applySelectedState = function(tile) { ...@@ -450,6 +450,10 @@ customBackgrounds.applySelectedState = function(tile) {
selectedBorder.appendChild(selectedCircle); selectedBorder.appendChild(selectedCircle);
selectedBorder.appendChild(selectedCheck); selectedBorder.appendChild(selectedCheck);
tile.appendChild(selectedBorder); 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) { ...@@ -459,6 +463,7 @@ customBackgrounds.applySelectedState = function(tile) {
customBackgrounds.removeSelectedState = function(tile) { customBackgrounds.removeSelectedState = function(tile) {
tile.classList.remove(customBackgrounds.CLASSES.COLLECTION_SELECTED); tile.classList.remove(customBackgrounds.CLASSES.COLLECTION_SELECTED);
tile.removeChild(tile.firstChild); tile.removeChild(tile.firstChild);
tile.setAttribute('aria-label', tile.dataset.oldLabel);
}; };
/** /**
......
...@@ -115,7 +115,7 @@ ...@@ -115,7 +115,7 @@
<dialog id="bg-sel-menu"> <dialog id="bg-sel-menu">
<div id="bg-sel-title-bar"> <div id="bg-sel-title-bar">
<div id="bg-sel-back-circle"> <div id="bg-sel-back-circle">
<div id="bg-sel-back" tabindex="0"></div> <button id="bg-sel-back" tabindex="0"></button>
</div> </div>
<div id="bg-sel-title"></div> <div id="bg-sel-title"></div>
</div> </div>
......
...@@ -189,6 +189,8 @@ std::unique_ptr<base::DictionaryValue> GetTranslatedStrings(bool is_google) { ...@@ -189,6 +189,8 @@ std::unique_ptr<base::DictionaryValue> GetTranslatedStrings(bool is_google) {
IDS_NTP_CUSTOM_BG_BACK_LABEL); IDS_NTP_CUSTOM_BG_BACK_LABEL);
AddString(translated_strings.get(), "photoLabel", AddString(translated_strings.get(), "photoLabel",
IDS_NTP_CUSTOM_BG_GOOGLE_PHOTO_LABEL); IDS_NTP_CUSTOM_BG_GOOGLE_PHOTO_LABEL);
AddString(translated_strings.get(), "selectedLabel",
IDS_NTP_CUSTOM_BG_PHOTO_SELECTED);
// Custom Links // Custom Links
AddString(translated_strings.get(), "addLink", AddString(translated_strings.get(), "addLink",
......
...@@ -90,7 +90,9 @@ ...@@ -90,7 +90,9 @@
<dialog id="bg-sel-menu"> <dialog id="bg-sel-menu">
<div id="bg-sel-title-bar"> <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 id="bg-sel-title"></div>
</div> </div>
<div id="bg-sel-tiles" tabindex="0"></div> <div id="bg-sel-tiles" tabindex="0"></div>
...@@ -136,8 +138,6 @@ ...@@ -136,8 +138,6 @@
</div> </div>
</dialog> </dialog>
<iframe id="custom-links-edit" name="custom-links-edit"
src="chrome-search://most-visited/edit.html"></iframe>
</template> </template>
</head> </head>
<body> <body>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment