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"><a id="rsuCodeDialogLink"></ph>this URL<ph name="LINK_END"></a></ph>.
+ Use this QR code to get the 8 character unlock code. You can also manually type <ph name="LINK_BEGIN"><a></ph>this URL<ph name="LINK_END"></a></ph>.
</message>
<message name="IDS_SHIMLESS_RMA_RSU_CODE_LABEL" translateable="false" desc="Label for the RSU code input box.">
Enter the 8-characters