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:

committed by
Chromium LUCI CQ

parent
ff9d73b7bc
commit
3d44d10447
ash/webui/personalization_app
personalization_app_ui.cc
resources
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(
|
||||
|
Reference in New Issue
Block a user