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}

ash/webui/personalization_app/personalization_app_ui.cc

@@ -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";
+std::u16string GetGooglePhotosURL() {
-
+  return u"https://photos.google.com";
-GURL GetGooglePhotosURL() {
-  return GURL(kGooglePhotosURL);
 }
 
 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();

ash/webui/personalization_app/resources/js/wallpaper/google_photos_zero_state_element.html

@@ -7,12 +7,7 @@
     overflow: hidden;
   }
 
-  a {
+  localized-link {
-    color: var(--cros-link-color);
-    text-decoration: none;
-  }
-
-  div {
     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>

ash/webui/personalization_app/resources/js/wallpaper/google_photos_zero_state_element.ts

@@ -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>`,
       ],
     });
   }

chrome/test/data/webui/chromeos/personalization_app/google_photos_zero_state_element_test.ts

@@ -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',
+          'No image available. To add photos, go to ' +
-          googlePhotosZeroStateElement.shadowRoot!.getElementById(
+              '<a target="_blank" href="https://photos.google.com">' +
-                                                      'message')!.innerText,
+              'photos.google.com</a>',
-          'inner text matches');
+          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`,
+        `This album doesn't have any photos. ` +
-        googlePhotosZeroStateElement.shadowRoot!.getElementById(
+            'To add photos, go to ' +
-                                                    'message')!.innerText,
+            '<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(