Commit 012a1835 authored by Kristi Park's avatar Kristi Park Committed by Commit Bot

[NTP] Add titles to shortcut & background elements in richer picker

Bug: 953822
Change-Id: Iee2efb5cad4fc37d11c97d56ec03eeb286969b20
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1737349
Auto-Submit: Kristi Park <kristipark@chromium.org>
Commit-Queue: Gayane Petrosyan <gayane@chromium.org>
Reviewed-by: default avatarGayane Petrosyan <gayane@chromium.org>
Cr-Commit-Position: refs/heads/master@{#684374}
parent 8fd02a7f
...@@ -550,6 +550,8 @@ customize.createTileWithTitle = function( ...@@ -550,6 +550,8 @@ customize.createTileWithTitle = function(
id, imageUrl, name, dataset, onClickInteraction, onKeyInteraction) { id, imageUrl, name, dataset, onClickInteraction, onKeyInteraction) {
const tile = customize.createTileThumbnail( const tile = customize.createTileThumbnail(
id, imageUrl, dataset, onClickInteraction, onKeyInteraction); id, imageUrl, dataset, onClickInteraction, onKeyInteraction);
tile.setAttribute('aria-label', name);
tile.title = name;
customize.fadeInImageTile(tile, imageUrl, null); customize.fadeInImageTile(tile, imageUrl, null);
const title = document.createElement('div'); const title = document.createElement('div');
...@@ -1203,6 +1205,7 @@ customize.showImageSelectionDialog = function(dialogTitle, collIndex) { ...@@ -1203,6 +1205,7 @@ customize.showImageSelectionDialog = function(dialogTitle, collIndex) {
customize.tileOnKeyDownInteraction); customize.tileOnKeyDownInteraction);
tile.setAttribute('aria-label', collImg[i].attributions[0]); tile.setAttribute('aria-label', collImg[i].attributions[0]);
tile.title = collImg[i].attributions[0];
// Load the first |ROWS_TO_PRELOAD| rows of tiles. // Load the first |ROWS_TO_PRELOAD| rows of tiles.
if (i < firstNTile) { if (i < firstNTile) {
......
...@@ -1581,6 +1581,7 @@ input:checked + .toggle .highlight { ...@@ -1581,6 +1581,7 @@ input:checked + .toggle .highlight {
background-color: unset; background-color: unset;
border-radius: 50%; border-radius: 50%;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer;
height: var(--tile-size); height: var(--tile-size);
margin-bottom: var(--tile-margin); margin-bottom: var(--tile-margin);
margin-inline-end: var(--tile-margin); margin-inline-end: var(--tile-margin);
......
...@@ -172,12 +172,12 @@ ...@@ -172,12 +172,12 @@
<dialog id="customization-menu" class="customize-dialog"> <dialog id="customization-menu" class="customize-dialog">
<div id="menu-header"> <div id="menu-header">
<div id="menu-back-circle" tabindex="0" role="button" <div id="menu-back-circle" tabindex="0" role="button"
aria-label="$i18n{backLabel}"> aria-label="$i18n{backLabel}" title="$i18n{backLabel}">
<div id="menu-back"></div> <div id="menu-back"></div>
</div> </div>
<div id="menu-title">$i18n{customizeMenu}</div> <div id="menu-title">$i18n{customizeMenu}</div>
<div id="refresh-daily-wrapper"> <div id="refresh-daily-wrapper">
<div id="refresh-toggle-wrapper"> <div id="refresh-toggle-wrapper" title="$i18n{refreshDaily}">
<label class="switch"> <label class="switch">
<input id="refresh-daily-toggle" type="checkbox" <input id="refresh-daily-toggle" type="checkbox"
aria-labelledby="refresh-text"></input> aria-labelledby="refresh-text"></input>
...@@ -193,7 +193,8 @@ ...@@ -193,7 +193,8 @@
<div id="menu-nav-panel" role="tablist" aria-label="$i18n{customizeMenu}"> <div id="menu-nav-panel" role="tablist" aria-label="$i18n{customizeMenu}">
<button id="backgrounds-button" class="menu-option" tabindex="0" <button id="backgrounds-button" class="menu-option" tabindex="0"
role="tab" aria-controls="backgrounds-menu backgrounds-image-menu" role="tab" aria-controls="backgrounds-menu backgrounds-image-menu"
aria-selected="true" aria-labelledby="backgrounds-menu-option"> aria-selected="true" aria-labelledby="backgrounds-menu-option"
title="$i18n{backgroundsOption}">
<div class="menu-option-icon-wrapper"> <div class="menu-option-icon-wrapper">
<div id="backgrounds-icon" class="menu-option-icon"></div> <div id="backgrounds-icon" class="menu-option-icon"></div>
</div> </div>
...@@ -203,7 +204,8 @@ ...@@ -203,7 +204,8 @@
</button> </button>
<button id="shortcuts-button" class="menu-option" tabindex="0" role="tab" <button id="shortcuts-button" class="menu-option" tabindex="0" role="tab"
aria-controls="shortcuts-menu" aria-selected="false" aria-controls="shortcuts-menu" aria-selected="false"
aria-labelledby="shortcuts-menu-option"> aria-labelledby="shortcuts-menu-option"
title="$i18n{shortcutsOption}">
<div class="menu-option-icon-wrapper"> <div class="menu-option-icon-wrapper">
<div id="shortcuts-icon" class="menu-option-icon"></div> <div id="shortcuts-icon" class="menu-option-icon"></div>
</div> </div>
...@@ -213,7 +215,7 @@ ...@@ -213,7 +215,7 @@
</button> </button>
<button id="colors-button" class="menu-option" tabindex="0" role="tab" <button id="colors-button" class="menu-option" tabindex="0" role="tab"
aria-controls="colors-menu" aria-selected="false" aria-controls="colors-menu" aria-selected="false"
aria-labelledby="colors-menu-option"> aria-labelledby="colors-menu-option" title="$i18n{colorsOption}">
<div class="menu-option-icon-wrapper"> <div class="menu-option-icon-wrapper">
<div id="colors-icon" class="menu-option-icon"></div> <div id="colors-icon" class="menu-option-icon"></div>
</div> </div>
...@@ -226,13 +228,15 @@ ...@@ -226,13 +228,15 @@
<div id="backgrounds-menu" class="menu-panel" tabindex="0" <div id="backgrounds-menu" class="menu-panel" tabindex="0"
role="tabpanel" aria-label="$i18n{backgroundsOption}"> role="tabpanel" aria-label="$i18n{backgroundsOption}">
<div id="backgrounds-upload" class="bg-sel-tile-bg"> <div id="backgrounds-upload" class="bg-sel-tile-bg">
<div id="backgrounds-upload-icon" class="bg-sel-tile" tabindex="-1"> <div id="backgrounds-upload-icon" class="bg-sel-tile" tabindex="-1"
aria-label="$i18n{uploadImage}" title="$i18n{uploadImage}">
<div id="backgrounds-upload-arrow"></div> <div id="backgrounds-upload-arrow"></div>
<div id="backgrounds-upload-text">$i18n{uploadImage}</div> <div id="backgrounds-upload-text">$i18n{uploadImage}</div>
</div> </div>
</div> </div>
<div id="backgrounds-default" class="bg-sel-tile-bg"> <div id="backgrounds-default" class="bg-sel-tile-bg">
<div id="backgrounds-default-icon" class="bg-sel-tile" tabindex="-1"> <div id="backgrounds-default-icon" class="bg-sel-tile" tabindex="-1"
aria-label="$i18n{noBackground}" title="$i18n{noBackground}">
<div class="mini-page"> <div class="mini-page">
<div class="mini-header-colorful"></div> <div class="mini-header-colorful"></div>
<div class="mini-shortcuts"></div> <div class="mini-shortcuts"></div>
...@@ -249,7 +253,7 @@ ...@@ -249,7 +253,7 @@
<div class="sh-option"> <div class="sh-option">
<div id="sh-option-cl" class="sh-option-image" tabindex="0" <div id="sh-option-cl" class="sh-option-image" tabindex="0"
role="button" aria-pressed="false" role="button" aria-pressed="false"
aria-labelledby="sh-option-cl-title"> aria-labelledby="sh-option-cl-title" title="$i18n{myShortcuts}">
<div class="sh-option-icon"></div> <div class="sh-option-icon"></div>
<div class="sh-option-mini"> <div class="sh-option-mini">
<div class="mini-page"> <div class="mini-page">
...@@ -266,7 +270,7 @@ ...@@ -266,7 +270,7 @@
<div class="sh-option"> <div class="sh-option">
<div id="sh-option-mv" class="sh-option-image" tabindex="0" <div id="sh-option-mv" class="sh-option-image" tabindex="0"
role="button" aria-pressed="false" role="button" aria-pressed="false"
aria-labelledby="sh-option-mv-title"> aria-labelledby="sh-option-mv-title" title="$i18n{mostVisited}">
<div class="sh-option-icon"></div> <div class="sh-option-icon"></div>
<div class="sh-option-mini"> <div class="sh-option-mini">
<div class="mini-page"> <div class="mini-page">
...@@ -287,7 +291,7 @@ ...@@ -287,7 +291,7 @@
<div id="sh-hide-title">$i18n{hideShortcuts}</div> <div id="sh-hide-title">$i18n{hideShortcuts}</div>
$i18n{hideShortcutsDesc} $i18n{hideShortcutsDesc}
</div> </div>
<div id="sh-hide-toggle-wrapper"> <div id="sh-hide-toggle-wrapper" title="$i18n{hideShortcuts}">
<label class="switch"> <label class="switch">
<input id="sh-hide-toggle" type="checkbox" <input id="sh-hide-toggle" type="checkbox"
aria-labelledby="sh-hide-title"></input> aria-labelledby="sh-hide-title"></input>
...@@ -331,10 +335,11 @@ ...@@ -331,10 +335,11 @@
</div> </div>
</div> </div>
<div id="menu-footer"> <div id="menu-footer">
<button id="menu-cancel" class="bg-sel-footer-button paper secondary <button id="menu-cancel"
ripple">$i18n{cancelButton}</button> class="bg-sel-footer-button paper secondary ripple"
title="$i18n{cancelButton}">$i18n{cancelButton}</button>
<button id="menu-done" class="bg-sel-footer-button paper primary ripple" <button id="menu-done" class="bg-sel-footer-button paper primary ripple"
disabled>$i18n{doneButton}</button> title="$i18n{doneButton}" disabled>$i18n{doneButton}</button>
</div> </div>
</dialog> </dialog>
......
...@@ -162,12 +162,12 @@ ...@@ -162,12 +162,12 @@
<dialog id="customization-menu" class="customize-dialog"> <dialog id="customization-menu" class="customize-dialog">
<div id="menu-header"> <div id="menu-header">
<div id="menu-back-circle" tabindex="0" role="button" <div id="menu-back-circle" tabindex="0" role="button"
aria-label="$i18n{backLabel}"> aria-label="$i18n{backLabel}" title="$i18n{backLabel}">
<div id="menu-back"></div> <div id="menu-back"></div>
</div> </div>
<div id="menu-title">$i18n{customizeMenu}</div> <div id="menu-title">$i18n{customizeMenu}</div>
<div id="refresh-daily-wrapper"> <div id="refresh-daily-wrapper">
<div id="refresh-toggle-wrapper"> <div id="refresh-toggle-wrapper" title="$i18n{refreshDaily}">
<label class="switch"> <label class="switch">
<input id="refresh-daily-toggle" type="checkbox" <input id="refresh-daily-toggle" type="checkbox"
aria-labelledby="refresh-text"></input> aria-labelledby="refresh-text"></input>
...@@ -183,7 +183,8 @@ ...@@ -183,7 +183,8 @@
<div id="menu-nav-panel" role="tablist" aria-label="$i18n{customizeMenu}"> <div id="menu-nav-panel" role="tablist" aria-label="$i18n{customizeMenu}">
<button id="backgrounds-button" class="menu-option" tabindex="0" <button id="backgrounds-button" class="menu-option" tabindex="0"
role="tab" aria-controls="backgrounds-menu backgrounds-image-menu" role="tab" aria-controls="backgrounds-menu backgrounds-image-menu"
aria-selected="true" aria-labelledby="backgrounds-menu-option"> aria-selected="true" aria-labelledby="backgrounds-menu-option"
title="$i18n{backgroundsOption}">
<div class="menu-option-icon-wrapper"> <div class="menu-option-icon-wrapper">
<div id="backgrounds-icon" class="menu-option-icon"></div> <div id="backgrounds-icon" class="menu-option-icon"></div>
</div> </div>
...@@ -193,7 +194,8 @@ ...@@ -193,7 +194,8 @@
</button> </button>
<button id="shortcuts-button" class="menu-option" tabindex="0" <button id="shortcuts-button" class="menu-option" tabindex="0"
role="tab" aria-controls="shortcuts-menu" aria-selected="false" role="tab" aria-controls="shortcuts-menu" aria-selected="false"
aria-labelledby="shortcuts-menu-option"> aria-labelledby="shortcuts-menu-option"
title="$i18n{shortcutsOption}">
<div class="menu-option-icon-wrapper"> <div class="menu-option-icon-wrapper">
<div id="shortcuts-icon" class="menu-option-icon"></div> <div id="shortcuts-icon" class="menu-option-icon"></div>
</div> </div>
...@@ -203,7 +205,7 @@ ...@@ -203,7 +205,7 @@
</button> </button>
<button id="colors-button" class="menu-option" tabindex="0" role="tab" <button id="colors-button" class="menu-option" tabindex="0" role="tab"
aria-controls="colors-menu" aria-selected="false" aria-controls="colors-menu" aria-selected="false"
aria-labelledby="colors-menu-option"> aria-labelledby="colors-menu-option" title="$i18n{colorsOption}">
<div class="menu-option-icon-wrapper"> <div class="menu-option-icon-wrapper">
<div id="colors-icon" class="menu-option-icon"></div> <div id="colors-icon" class="menu-option-icon"></div>
</div> </div>
...@@ -216,14 +218,15 @@ ...@@ -216,14 +218,15 @@
<div id="backgrounds-menu" class="menu-panel" tabindex="0" <div id="backgrounds-menu" class="menu-panel" tabindex="0"
role="tabpanel" aria-label="$i18n{backgroundsOption}"> role="tabpanel" aria-label="$i18n{backgroundsOption}">
<div id="backgrounds-upload" class="bg-sel-tile-bg"> <div id="backgrounds-upload" class="bg-sel-tile-bg">
<div id="backgrounds-upload-icon" class="bg-sel-tile" tabindex="-1"> <div id="backgrounds-upload-icon" class="bg-sel-tile" tabindex="-1"
aria-label="$i18n{uploadImage}" title="$i18n{uploadImage}">
<div id="backgrounds-upload-arrow"></div> <div id="backgrounds-upload-arrow"></div>
<div id="backgrounds-upload-text">$i18n{uploadImage}</div> <div id="backgrounds-upload-text">$i18n{uploadImage}</div>
</div> </div>
</div> </div>
<div id="backgrounds-default" class="bg-sel-tile-bg"> <div id="backgrounds-default" class="bg-sel-tile-bg">
<div id="backgrounds-default-icon" class="bg-sel-tile" <div id="backgrounds-default-icon" class="bg-sel-tile" tabindex="-1"
tabindex="-1"> aria-label="$i18n{noBackground}" title="$i18n{noBackground}">
<div class="mini-page"> <div class="mini-page">
<div class="mini-header-colorful"></div> <div class="mini-header-colorful"></div>
<div class="mini-shortcuts"></div> <div class="mini-shortcuts"></div>
...@@ -240,7 +243,8 @@ ...@@ -240,7 +243,8 @@
<div class="sh-option"> <div class="sh-option">
<div id="sh-option-cl" class="sh-option-image" tabindex="0" <div id="sh-option-cl" class="sh-option-image" tabindex="0"
role="button" aria-pressed="false" role="button" aria-pressed="false"
aria-labelledby="sh-option-cl-title"> aria-labelledby="sh-option-cl-title"
title="$i18n{myShortcuts}">
<div class="sh-option-icon"></div> <div class="sh-option-icon"></div>
<div class="sh-option-mini"> <div class="sh-option-mini">
<div class="mini-page"> <div class="mini-page">
...@@ -257,7 +261,8 @@ ...@@ -257,7 +261,8 @@
<div class="sh-option"> <div class="sh-option">
<div id="sh-option-mv" class="sh-option-image" tabindex="0" <div id="sh-option-mv" class="sh-option-image" tabindex="0"
role="button" aria-pressed="false" role="button" aria-pressed="false"
aria-labelledby="sh-option-mv-title"> aria-labelledby="sh-option-mv-title"
title="$i18n{mostVisited}">
<div class="sh-option-icon"></div> <div class="sh-option-icon"></div>
<div class="sh-option-mini"> <div class="sh-option-mini">
<div class="mini-page"> <div class="mini-page">
...@@ -278,7 +283,7 @@ ...@@ -278,7 +283,7 @@
<div id="sh-hide-title">$i18n{hideShortcuts}</div> <div id="sh-hide-title">$i18n{hideShortcuts}</div>
$i18n{hideShortcutsDesc} $i18n{hideShortcutsDesc}
</div> </div>
<div id="sh-hide-toggle-wrapper"> <div id="sh-hide-toggle-wrapper" title="$i18n{hideShortcuts}">
<label class="switch"> <label class="switch">
<input id="sh-hide-toggle" type="checkbox" <input id="sh-hide-toggle" type="checkbox"
aria-labelledby="sh-hide-title"></input> aria-labelledby="sh-hide-title"></input>
...@@ -306,7 +311,8 @@ ...@@ -306,7 +311,8 @@
</button> </button>
</div> </div>
<div id="color-picker-container" class="bg-sel-tile-bg" <div id="color-picker-container" class="bg-sel-tile-bg"
aria-label="$i18n{colorPickerLabel}" title="$i18n{colorPickerLabel}"> aria-label="$i18n{colorPickerLabel}"
title="$i18n{colorPickerLabel}">
<div id="color-picker-tile" class="bg-sel-tile" tabindex="-1"> <div id="color-picker-tile" class="bg-sel-tile" tabindex="-1">
<div id="left-semicircle"></div> <div id="left-semicircle"></div>
<div id="color-picker-icon"></div> <div id="color-picker-icon"></div>
...@@ -322,10 +328,11 @@ ...@@ -322,10 +328,11 @@
</div> </div>
</div> </div>
<div id="menu-footer"> <div id="menu-footer">
<button id="menu-cancel" class="bg-sel-footer-button paper secondary <button id="menu-cancel"
ripple">$i18n{cancelButton}</button> class="bg-sel-footer-button paper secondary ripple"
title="$i18n{cancelButton}">$i18n{cancelButton}</button>
<button id="menu-done" class="bg-sel-footer-button paper primary ripple" <button id="menu-done" class="bg-sel-footer-button paper primary ripple"
disabled>$i18n{doneButton}</button> title="$i18n{doneButton}" disabled>$i18n{doneButton}</button>
</div> </div>
</dialog> </dialog>
......
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