[NTP] Enable opening of RP menus with enter/space
Allow the backgrounds and shortcuts menus to be opened
via keyboard navigation - enter/space.
Screencast: http://go/scrcast/NTc1MjEyMzE5NTEyOTg1Nnw1NTNkYjkwZS0yYg
Bug: 937570
Change-Id: Ie62b14a64e766cb82d59ab381c97b6e9bfdc2b98
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1611091
Commit-Queue: Kyle Milka <kmilka@chromium.org>
Reviewed-by: Gayane Petrosyan <gayane@chromium.org>
Cr-Commit-Position: refs/heads/master@{#659722}
diff --git a/chrome/browser/resources/local_ntp/custom_backgrounds.js b/chrome/browser/resources/local_ntp/custom_backgrounds.js
index ba59339..675a6d1 100644
--- a/chrome/browser/resources/local_ntp/custom_backgrounds.js
+++ b/chrome/browser/resources/local_ntp/custom_backgrounds.js
@@ -208,6 +208,12 @@
*/
customBackgrounds.hideCustomLinkNotification = null;
+/*
+ * The currently selected option in the richer picker.
+ * @type {?Element}
+ * @private
+ */
+customBackgrounds.richerPicker_selectedOption = null;
/**
* Sets the visibility of the settings menu and individual options depending on
@@ -301,6 +307,22 @@
};
/**
+ * Apply selected styling to |elem| and remove it from the previously selected
+ * element.
+ * @param {?Element} elem The element to apply styling to.
+ */
+customBackgrounds.richerPicker_toggleSelectedOption = function(elem) {
+ if (!elem) {
+ return;
+ }
+ customBackgrounds.richerPicker_selectedOption.classList.toggle(
+ customBackgrounds.CLASSES.SELECTED, false);
+ elem.classList.toggle(customBackgrounds.CLASSES.SELECTED, true);
+
+ customBackgrounds.richerPicker_selectedOption = elem;
+};
+
+/**
* Remove image tiles and maybe swap back to main background menu.
* @param {boolean} showMenu Whether the main background menu should be shown.
*/
@@ -929,6 +951,9 @@
$(customBackgrounds.IDS.MENU_TITLE).dataset.mainTitle =
$(customBackgrounds.IDS.MENU_TITLE).textContent;
+ customBackgrounds.richerPicker_selectedOption =
+ $(customBackgrounds.IDS.BACKGROUNDS_BUTTON);
+
$(customBackgrounds.IDS.EDIT_BG_ICON)
.setAttribute(
'aria-label', configData.translatedStrings.customizeThisPage);
@@ -1345,19 +1370,40 @@
customBackgrounds.richerPicker_selectTile(tile);
};
- $(customBackgrounds.IDS.BACKGROUNDS_BUTTON).onclick = function() {
+ const richerPickerOpenBackgrounds = function() {
$(customBackgrounds.IDS.BACKGROUNDS_MENU)
.classList.toggle(customBackgrounds.CLASSES.MENU_SHOWN, true);
$(customBackgrounds.IDS.SHORTCUTS_MENU)
.classList.toggle(customBackgrounds.CLASSES.MENU_SHOWN, false);
+ customBackgrounds.richerPicker_toggleSelectedOption(
+ $(customBackgrounds.IDS.BACKGROUNDS_BUTTON));
};
- $(customBackgrounds.IDS.SHORTCUTS_BUTTON).onclick = function() {
+ $(customBackgrounds.IDS.BACKGROUNDS_BUTTON).onclick =
+ richerPickerOpenBackgrounds;
+ $(customBackgrounds.IDS.BACKGROUNDS_BUTTON).onkeydown = function(event) {
+ if (event.keyCode === customBackgrounds.KEYCODES.ENTER ||
+ event.keyCode === customBackgrounds.KEYCODES.SPACE) {
+ richerPickerOpenBackgrounds();
+ }
+ };
+
+ const richerPickerOpenShortcuts = function() {
customBackgrounds.richerPicker_resetImageMenu(false);
$(customBackgrounds.IDS.BACKGROUNDS_MENU)
.classList.toggle(customBackgrounds.CLASSES.MENU_SHOWN, false);
$(customBackgrounds.IDS.SHORTCUTS_MENU)
.classList.toggle(customBackgrounds.CLASSES.MENU_SHOWN, true);
+ customBackgrounds.richerPicker_toggleSelectedOption(
+ $(customBackgrounds.IDS.SHORTCUTS_BUTTON));
+ };
+
+ $(customBackgrounds.IDS.SHORTCUTS_BUTTON).onclick = richerPickerOpenShortcuts;
+ $(customBackgrounds.IDS.SHORTCUTS_BUTTON).onkeydown = function(event) {
+ if (event.keyCode === customBackgrounds.KEYCODES.ENTER ||
+ event.keyCode === customBackgrounds.KEYCODES.SPACE) {
+ richerPickerOpenShortcuts();
+ }
};
$(customBackgrounds.IDS.COLORS_BUTTON).onclick = function() {
diff --git a/chrome/browser/resources/local_ntp/local_ntp.css b/chrome/browser/resources/local_ntp/local_ntp.css
index 0ede361..b0cd997a 100644
--- a/chrome/browser/resources/local_ntp/local_ntp.css
+++ b/chrome/browser/resources/local_ntp/local_ntp.css
@@ -884,7 +884,8 @@
background-color: rgba(var(--GB900-rgb), .1);
}
-.menu-option:active {
+.menu-option:active,
+.menu-option.selected {
background-color: rgb(232, 240, 254);
color: rgb(var(--GB600-rgb));
}
@@ -909,7 +910,8 @@
width: 20px;
}
-.menu-option:active .menu-option-icon-wrapper .menu-option-icon {
+.menu-option:active .menu-option-icon-wrapper .menu-option-icon,
+.menu-option.selected .menu-option-icon-wrapper .menu-option-icon {
background-color: rgb(var(--GB600-rgb));
}
diff --git a/chrome/browser/resources/local_ntp/local_ntp.html b/chrome/browser/resources/local_ntp/local_ntp.html
index 9236f9d9..7a12890 100644
--- a/chrome/browser/resources/local_ntp/local_ntp.html
+++ b/chrome/browser/resources/local_ntp/local_ntp.html
@@ -179,7 +179,7 @@
</div>
</div>
<div id="menu-nav-panel">
- <div id="backgrounds-button" class="menu-option" tabindex="0">
+ <div id="backgrounds-button" class="menu-option selected" tabindex="0">
<div class="menu-option-icon-wrapper">
<div ids="backgrounds-icon" class="menu-option-icon"></div>
</div>
diff --git a/chrome/test/data/local_ntp/local_ntp_browsertest.html b/chrome/test/data/local_ntp/local_ntp_browsertest.html
index 57b5aa3..726edc8 100644
--- a/chrome/test/data/local_ntp/local_ntp_browsertest.html
+++ b/chrome/test/data/local_ntp/local_ntp_browsertest.html
@@ -165,7 +165,7 @@
</div>
</div>
<div id="menu-nav-panel">
- <div id="backgrounds-button" class="menu-option" tabindex="0">
+ <div id="backgrounds-button" class="menu-option selected" tabindex="0">
<div class="menu-option-icon-wrapper">
<div ids="backgrounds-icon" class="menu-option-icon"></div>
</div>
