Shimless: Use localized link for the RSU page

Using localized-link makes the link ChromeVox compliant.

https://screenshot.googleplex.com/BhQHmtke3CsubnZ

Bug: 1198187
Test: browser_tests
Change-Id: Iab2ba00ee535567eea3635ee2a6d52197c12a30e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3858030
Commit-Queue: Anton Swifton <swifton@google.com>
Reviewed-by: Gavin Williams <gavinwill@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1039995}
diff --git a/ash/webui/shimless_rma/resources/onboarding_enter_rsu_wp_disable_code_page.html b/ash/webui/shimless_rma/resources/onboarding_enter_rsu_wp_disable_code_page.html
index 521166f2..86d9af8 100644
--- a/ash/webui/shimless_rma/resources/onboarding_enter_rsu_wp_disable_code_page.html
+++ b/ash/webui/shimless_rma/resources/onboarding_enter_rsu_wp_disable_code_page.html
@@ -29,11 +29,6 @@
     width: 320px;
   }
 
-  #rsuCodeDialogLink {
-    color: var(--cros-link-color);
-    text-decoration: none;
-  }
-
   #qrCodeCanvas {
       border: 1px solid;
       border-color: var(--google-grey-200);
@@ -55,7 +50,9 @@
   <div slot="left-pane">
     <h1>[[i18n('rsuCodePageTitleText')]]</h1>
     <div class="instructions">
-      <span inner-h-t-m-l="[[rsuInstructionsText_]]"></span>
+      <localized-link id="rsuCodeDialogLink"
+          localized-string="[[rsuInstructionsText_]]">
+      </localized-link>
     </div>
     <div id="inputContainer">
       <cr-input
diff --git a/ash/webui/shimless_rma/resources/onboarding_enter_rsu_wp_disable_code_page.js b/ash/webui/shimless_rma/resources/onboarding_enter_rsu_wp_disable_code_page.js
index ef3c2a2..991fe19 100644
--- a/ash/webui/shimless_rma/resources/onboarding_enter_rsu_wp_disable_code_page.js
+++ b/ash/webui/shimless_rma/resources/onboarding_enter_rsu_wp_disable_code_page.js
@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'chrome://resources/cr_components/localized_link/localized_link.js';
 import './shimless_rma_fonts_css.js';
 import './shimless_rma_shared_css.js';
 import './base_page.js';
@@ -232,9 +233,9 @@
 
   /** @private */
   setRsuInstructionsText_() {
-    this.rsuInstructionsText_ =
-        this.i18nAdvanced('rsuCodeInstructionsText', {attrs: ['id']});
-    const linkElement = this.shadowRoot.querySelector('#rsuCodeDialogLink');
+    this.rsuInstructionsText_ = this.i18nAdvanced('rsuCodeInstructionsText');
+    const linkElement = this.shadowRoot.querySelector('#rsuCodeDialogLink')
+                            .shadowRoot.querySelector('a');
     linkElement.setAttribute('href', '#');
     linkElement.addEventListener('click', () => {
       if (this.allButtonsDisabled) {
diff --git a/chrome/test/data/webui/chromeos/shimless_rma/onboarding_enter_rsu_wp_disable_code_page_test.js b/chrome/test/data/webui/chromeos/shimless_rma/onboarding_enter_rsu_wp_disable_code_page_test.js
index 6263925..bd17ebc 100644
--- a/chrome/test/data/webui/chromeos/shimless_rma/onboarding_enter_rsu_wp_disable_code_page_test.js
+++ b/chrome/test/data/webui/chromeos/shimless_rma/onboarding_enter_rsu_wp_disable_code_page_test.js
@@ -122,7 +122,9 @@
   test('EnterRsuWpDisableCodePageOpenChallengeDialog', async () => {
     await initializeEnterRsuWpDisableCodePage('', '');
 
-    component.shadowRoot.querySelector('#rsuCodeDialogLink').click();
+    component.shadowRoot.querySelector('#rsuCodeDialogLink')
+        .shadowRoot.querySelector('a')
+        .click();
     assertTrue(component.shadowRoot.querySelector('#rsuChallengeDialog').open);
   });
 
@@ -139,7 +141,9 @@
     await initializeEnterRsuWpDisableCodePage('', '');
 
     component.allButtonsDisabled = true;
-    component.shadowRoot.querySelector('#rsuCodeDialogLink').click();
+    component.shadowRoot.querySelector('#rsuCodeDialogLink')
+        .shadowRoot.querySelector('a')
+        .click();
     assertFalse(component.shadowRoot.querySelector('#rsuChallengeDialog').open);
   });
 
diff --git a/chromeos/chromeos_strings.grd b/chromeos/chromeos_strings.grd
index c9c9441..ba1abc2 100644
--- a/chromeos/chromeos_strings.grd
+++ b/chromeos/chromeos_strings.grd
@@ -2883,7 +2883,7 @@
         Perform RMA Server Unlock
       </message>
       <message name="IDS_SHIMLESS_RMA_RSU_CODE_INSTRUCTIONS" translateable="false" desc="Instructions for the RSU challenge page.">
-        Use this QR code to get the 8 character unlock code. You can also manually type <ph name="LINK_BEGIN">&lt;a id="rsuCodeDialogLink"&gt;</ph>this URL<ph name="LINK_END">&lt;/a&gt;</ph>.
+        Use this QR code to get the 8 character unlock code. You can also manually type <ph name="LINK_BEGIN">&lt;a&gt;</ph>this URL<ph name="LINK_END">&lt;/a&gt;</ph>.
       </message>
       <message name="IDS_SHIMLESS_RMA_RSU_CODE_LABEL" translateable="false" desc="Label for the RSU code input box.">
         Enter the 8-characters