0

personalization: use localized-link for photos

When linking to photos.google.com in google photos zero state,
use localized-link for better aria information.

Bug: b:275426943
Test: open google photos wallpaper shared album with no photos
Change-Id: I8c3ac4ee93bde3a2a62c25f85278cfbb6aacf32e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4375981
Reviewed-by: Yuki Awano <yawano@google.com>
Commit-Queue: Jeffrey Young <cowmoo@google.com>
Cr-Commit-Position: refs/heads/main@{#1123333}
This commit is contained in:
Jeffrey Young
2023-03-28 22:49:53 +00:00
committed by Chromium LUCI CQ
parent ff9d73b7bc
commit 3d44d10447
4 changed files with 47 additions and 21 deletions
ash/webui/personalization_app
chrome/test/data/webui/chromeos/personalization_app

@ -4,6 +4,8 @@
#include "ash/webui/personalization_app/personalization_app_ui.h"
#include <string>
#include "ash/constants/ash_features.h"
#include "ash/public/cpp/ambient/ambient_client.h"
#include "ash/public/cpp/wallpaper/wallpaper_controller.h"
@ -38,10 +40,8 @@ namespace ash::personalization_app {
namespace {
inline constexpr char kGooglePhotosURL[] = "https://photos.google.com";
GURL GetGooglePhotosURL() {
return GURL(kGooglePhotosURL);
std::u16string GetGooglePhotosURL() {
return u"https://photos.google.com";
}
bool IsAmbientModeAllowed() {
@ -297,16 +297,18 @@ void AddStrings(content::WebUIDataSource* source) {
source->AddLocalizedStrings(kLocalizedStrings);
source->AddString("googlePhotosURL", GetGooglePhotosURL());
source->AddString(
"ambientModeAlbumsSubpageGooglePhotosTitle",
l10n_util::GetStringFUTF16(
IDS_PERSONALIZATION_APP_AMBIENT_MODE_ALBUMS_SUBPAGE_GOOGLE_PHOTOS_TITLE,
base::UTF8ToUTF16(GetGooglePhotosURL().spec())));
GetGooglePhotosURL()));
source->AddString(
"ambientModeAlbumsSubpageGooglePhotosNoAlbum",
l10n_util::GetStringFUTF16(
IDS_PERSONALIZATION_APP_AMBIENT_MODE_ALBUMS_SUBPAGE_GOOGLE_PHOTOS_NO_ALBUM,
base::UTF8ToUTF16(GetGooglePhotosURL().spec())));
GetGooglePhotosURL()));
source->UseStringsJs();
source->EnableReplaceI18nInJS();

@ -7,12 +7,7 @@
overflow: hidden;
}
a {
color: var(--cros-link-color);
text-decoration: none;
}
div {
localized-link {
color: var(--cros-text-color-secondary);
font: var(--cros-body-1-font);
max-width: 236px;
@ -29,5 +24,5 @@
</iron-media-query>
<template is="dom-if" if="[[getMessageLabel_(tab)]]">
<img src="[[getImageSource_(isDarkModeActive_)]]" aria-hidden="true">
<div id="message" inner-h-t-m-l="[[getMessage_(tab)]]"></div>
<localized-link id="message" localized-string="[[getMessage_(tab)]]"></localized-link>
</template>

@ -6,6 +6,7 @@
* @fileoverview Polymer element that displays the Google Photos zero state.
*/
import 'chrome://resources/cr_components/localized_link/localized_link.js';
import '../../css/wallpaper.css.js';
import '../../css/common.css.js';
@ -59,7 +60,8 @@ export class GooglePhotosZeroState extends Base {
const label = this.getMessageLabel_(tab);
return this.i18nAdvanced(label, {
substitutions: [
'<a target="_blank" href="https://photos.google.com">photos.google.com</a>',
`<a target="_blank" href="${
this.i18n('googlePhotosURL')}">photos.google.com</a>`,
],
});
}

@ -34,11 +34,24 @@ suite('GooglePhotosZeroState', function() {
googlePhotosZeroStateElement.tab = tab;
await waitAfterNextRender(googlePhotosZeroStateElement);
const localizedLink =
googlePhotosZeroStateElement.shadowRoot!.querySelector(
'localized-link');
assertTrue(!!localizedLink, 'localized link exists');
// `localizedLink.localizedString` typescript type is string but is
// actually TrustedHTML.
assertTrue(
(localizedLink.localizedString as unknown) instanceof TrustedHTML,
'localizedLink has message set as TrustedHTML');
assertEquals(
'No image available. To add photos, go to photos.google.com',
googlePhotosZeroStateElement.shadowRoot!.getElementById(
'message')!.innerText,
'inner text matches');
'No image available. To add photos, go to ' +
'<a target="_blank" href="https://photos.google.com">' +
'photos.google.com</a>',
localizedLink.localizedString.toString(),
'localized link message matches');
assertTrue(
!!googlePhotosZeroStateElement.shadowRoot!.querySelector('img'),
'img is shown');
@ -50,10 +63,24 @@ suite('GooglePhotosZeroState', function() {
googlePhotosZeroStateElement.tab = GooglePhotosTab.PHOTOS_BY_ALBUM_ID;
await waitAfterNextRender(googlePhotosZeroStateElement);
const localizedLink =
googlePhotosZeroStateElement.shadowRoot!.querySelector(
'localized-link');
assertTrue(!!localizedLink, 'localized link exists');
// `localizedLink.localizedString` typescript type is string but is
// actually TrustedHTML.
assertTrue(
(localizedLink.localizedString as unknown) instanceof TrustedHTML,
'localizedLink has message set as TrustedHTML');
assertEquals(
`This album doesn't have any photos. To add photos, go to photos.google.com`,
googlePhotosZeroStateElement.shadowRoot!.getElementById(
'message')!.innerText,
`This album doesn't have any photos. ` +
'To add photos, go to ' +
'<a target="_blank" href="https://photos.google.com">' +
'photos.google.com</a>',
localizedLink.localizedString.toString(),
'inner text matches on photos_by_album_id tab');
assertTrue(