[A11y] Add more context to subpage's learn more icon aria label

Currently aria label for the learn more icon always equals "Learn more".
After this CL it will become subpage title specific:
"Learn more about: ${pageTitle}".

Translation screenshot: https://storage.cloud.google.com/chromium-translation-screenshots/390accd115797c40240451615490104437865414

Fixed: 1313242
Change-Id: I4908fb72f2c2bf83308398a0f24eb4b1aba0a743
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4088545
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Commit-Queue: Elizabeth Popova <lizapopova@google.com>
Cr-Commit-Position: refs/heads/main@{#1084699}

chrome/app/shared_settings_strings.grdp

@@ -8,6 +8,9 @@
   <message name="IDS_SETTINGS_SUBPAGE_BACK_BUTTON_ARIA_ROLE_DESCRIPTION" desc="Description read by screen readers when focusing on the back button. Indicates to the user that activating the back button will cause the settings page to navigate away from the currently displaying subpage to the previous visited page. This text will only be announced by ChromeVox and will not be visible in the UI.">
     Click to navigate away from <ph name="SUBPAGE_TITLE">$1<ex>Bluetooth</ex> subpage</ph>.
   </message>
+  <message name="IDS_SETTINGS_SUBPAGE_LEARN_MORE_ARIA_LABEL" desc="Text read by screen readers when focusing the learn more icon button which corresponds to the subpage title. If the icon button is activated, an external page with the corresponding help article is opened. This text will only be announced by screen readers and will not be visible in the UI.">
+    Learn more about: <ph name="SUBPAGE_TITLE">$1<ex>Payment methods</ex></ph>
+  </message>
 
   <!-- Caption Subpage (strings used by the <settings-captions> element) -->
   <message name="IDS_SETTINGS_CAPTIONS" desc="Title of the subpage for settings related to captions">

chrome/app/shared_settings_strings_grdp/IDS_SETTINGS_SUBPAGE_LEARN_MORE_ARIA_LABEL.png.sha1

@@ -0,0 +1 @@
+390accd115797c40240451615490104437865414

chrome/browser/resources/settings/chromeos/os_settings_page/os_settings_subpage.html

@@ -93,7 +93,7 @@ <h1 class="cr-title-text">[[pageTitle]]</h1>
   <slot name="subpage-title-extra"></slot>
   <template is="dom-if" if="[[learnMoreUrl]]">
     <cr-icon-button iron-icon="cr:help-outline" dir="ltr"
-        aria-label="$i18n{learnMore}" on-click="onHelpClick_">
+        aria-label="[[getLearnMoreAriaLabel_(pageTitle)]]" on-click="onHelpClick_">
     </cr-icon-button>
   </template>
   <template is="dom-if" if="[[searchLabel]]">

chrome/browser/resources/settings/chromeos/os_settings_page/os_settings_subpage.ts

@@ -282,6 +282,10 @@ export class OsSettingsSubpageElement extends OsSettingsSubpageElementBase {
     return this.i18n('subpageBackButtonAriaRoleDescription', this.pageTitle);
   }
 
+  private getLearnMoreAriaLabel_() {
+    return this.i18n('subpageLearnMoreAriaLabel', this.pageTitle);
+  }
+
   // Override FindShortcutMixin methods.
   override handleFindShortcut(modalContextOpen: boolean) {
     if (modalContextOpen) {

chrome/browser/resources/settings/settings_page/settings_subpage.html

@@ -93,7 +93,7 @@ <h1 class="cr-title-text">[[pageTitle]]</h1>
       <slot name="subpage-title-extra"></slot>
       <template is="dom-if" if="[[learnMoreUrl]]">
         <cr-icon-button iron-icon="cr:help-outline" dir="ltr"
-            aria-label="$i18n{learnMore}" on-click="onHelpClick_">
+            aria-label="[[getLearnMoreAriaLabel_(pageTitle)]]" on-click="onHelpClick_">
         </cr-icon-button>
       </template>
       <template is="dom-if" if="[[searchLabel]]">

chrome/browser/resources/settings/settings_page/settings_subpage.ts

@@ -292,6 +292,10 @@ export class SettingsSubpageElement extends SettingsSubpageElementBase {
     return this.i18n('subpageBackButtonAriaRoleDescription', this.pageTitle);
   }
 
+  private getLearnMoreAriaLabel_() {
+    return this.i18n('subpageLearnMoreAriaLabel', this.pageTitle);
+  }
+
   // Override FindShortcutMixin methods.
   override handleFindShortcut(modalContextOpen: boolean) {
     if (modalContextOpen) {

chrome/browser/ui/webui/settings/ash/main_section.cc

@@ -156,6 +156,7 @@ void MainSection::AddLoadTimeData(content::WebUIDataSource* html_source) {
        IDS_SETTINGS_SUBPAGE_BACK_BUTTON_ARIA_LABEL},
       {"subpageBackButtonAriaRoleDescription",
        IDS_SETTINGS_SUBPAGE_BACK_BUTTON_ARIA_ROLE_DESCRIPTION},
+      {"subpageLearnMoreAriaLabel", IDS_SETTINGS_SUBPAGE_LEARN_MORE_ARIA_LABEL},
       {"notValidWebAddress", IDS_SETTINGS_NOT_VALID_WEB_ADDRESS},
       {"notValidWebAddressForContentType",
        IDS_SETTINGS_NOT_VALID_WEB_ADDRESS_FOR_CONTENT_TYPE},

chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc

@@ -200,6 +200,7 @@ void AddCommonStrings(content::WebUIDataSource* html_source, Profile* profile) {
     {"subpageBackButtonAriaLabel", IDS_SETTINGS_SUBPAGE_BACK_BUTTON_ARIA_LABEL},
     {"subpageBackButtonAriaRoleDescription",
      IDS_SETTINGS_SUBPAGE_BACK_BUTTON_ARIA_ROLE_DESCRIPTION},
+    {"subpageLearnMoreAriaLabel", IDS_SETTINGS_SUBPAGE_LEARN_MORE_ARIA_LABEL},
     {"notValid", IDS_SETTINGS_NOT_VALID},
     {"notValidWebAddress", IDS_SETTINGS_NOT_VALID_WEB_ADDRESS},
     {"notValidWebAddressForContentType",

chrome/test/data/webui/settings/settings_subpage_test.ts

@@ -82,6 +82,12 @@ suite('SettingsSubpage', function() {
     assertTrue(!!icon);
     // Check that the icon is forced to always use 'ltr' mode.
     assertEquals('ltr', icon!.getAttribute('dir'));
+    // Check that the icon has proper a11y label.
+    subpage.pageTitle = 'Title';
+    flush();
+    assertEquals(
+        subpage.i18n('subpageLearnMoreAriaLabel', subpage.pageTitle),
+        icon.ariaLabel);
   });
 
   test('favicon', function() {