[CrOS Settings] Change subpage 'back' a11y label and description

This CL changes the aria label from simply "Back." to something more
descriptive to the screen reader user: "[Subpage title] back button",
with the role description: "Click to navigate away from [Subpage title]
page" so that the user is aware that they are currently at the
"[name of subpage]" subpage, and that activating the back button will
cause a route change to the previous page.

Videos:
https://drive.google.com/drive/folders/14JjstEYIC3-la2gIlGzo1pRa__NXDYBm?usp=sharing

Bug: 1071284
Change-Id: I4bd6e4400c84b63fe89ad2fe68f62e6d6f468657
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2200144
Commit-Queue: Regan Hsu <hsuregan@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#770852}

chrome/app/shared_settings_strings.grdp

 <?xml version="1.0" encoding="utf-8"?>
 <!-- Settings-specific strings shared by Browser and Chrome OS settings -->
 <grit-part>
+  <!-- All subpages -->
+  <message name="IDS_SETTINGS_SUBPAGE_BACK_BUTTON_ARIA_LABEL" desc="Text read by screen readers when focusing on the back button. If the back button is activated, it will navigate to the previous page. This text will only be announced by ChromeVox and will not be visible in the UI.">
+    <ph name="SUBPAGE_TITLE">$1<ex>Bluetooth</ex></ph> subpage back button
+  </message>
+  <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>
+
   <!-- Caption Subpage (strings used by the <settings-captions> element) -->
   <message name="IDS_SETTINGS_CAPTIONS" desc="Name of the settings page which displays caption preferences.">
     Captions

chrome/browser/resources/settings/settings_page/BUILD.gn

@@ -46,6 +46,7 @@ js_library("settings_subpage") {
     "//ui/webui/resources/cr_elements/cr_search_field:cr_search_field",
     "//ui/webui/resources/js:assert",
     "//ui/webui/resources/js:find_shortcut_behavior",
+    "//ui/webui/resources/js:i18n_behavior",
     "//ui/webui/resources/js:load_time_data",
     "//ui/webui/resources/js/cr/ui:focus_without_ink",
   ]
@@ -102,6 +103,7 @@ js_library("settings_subpage.m") {
     "//ui/webui/resources/cr_elements/cr_search_field:cr_search_field.m",
     "//ui/webui/resources/js:assert.m",
     "//ui/webui/resources/js:find_shortcut_behavior.m",
+    "//ui/webui/resources/js:i18n_behavior.m",
     "//ui/webui/resources/js:load_time_data.m",
     "//ui/webui/resources/js/cr/ui:focus_without_ink.m",
   ]

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

@@ -6,6 +6,7 @@
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/html/find_shortcut_behavior.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-resizable-behavior/iron-resizable-behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">
@@ -76,8 +77,11 @@
     </style>
     <div class="cr-row first" id="headerLine">
       <cr-icon-button class="icon-arrow-back" id="closeButton"
-            hidden="[[hideCloseButton]]" on-click="onTapBack_"
-            aria-label="$i18n{back}"></cr-icon-button>
+          hidden="[[hideCloseButton]]" on-click="onTapBack_"
+          aria-label$="[[getBackButtonAriaLabel_(pageTitle)]]"
+          aria-roledescription$=
+              "[[getBackButtonAriaRoleDescription_(pageTitle)]]">
+      </cr-icon-button>
       <template is="dom-if" if="[[titleIcon]]">
         <img id="title-icon" src="[[titleIcon]]" aria-hidden="true">
       </template>

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

@@ -13,6 +13,7 @@ Polymer({
 
   behaviors: [
     FindShortcutBehavior,
+    I18nBehavior,
     Polymer.IronResizableBehavior,
     settings.RouteObserverBehavior,
   ],
@@ -158,6 +159,16 @@ Polymer({
     this.searchTerm = e.detail;
   },
 
+  /** @private */
+  getBackButtonAriaLabel_() {
+    return this.i18n('subpageBackButtonAriaLabel', this.pageTitle);
+  },
+
+  /** @private */
+  getBackButtonAriaRoleDescription_() {
+    return this.i18n('subpageBackButtonAriaRoleDescription', this.pageTitle);
+  },
+
   // Override FindShortcutBehavior methods.
   handleFindShortcut(modalContextOpen) {
     if (modalContextOpen) {

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

@@ -98,6 +98,10 @@ void MainSection::AddLoadTimeData(content::WebUIDataSource* html_source) {
       {"settings", IDS_SETTINGS_SETTINGS},
       {"settingsAltPageTitle", IDS_SETTINGS_ALT_PAGE_TITLE},
       {"subpageArrowRoleDescription", IDS_SETTINGS_SUBPAGE_BUTTON},
+      {"subpageBackButtonAriaLabel",
+       IDS_SETTINGS_SUBPAGE_BACK_BUTTON_ARIA_LABEL},
+      {"subpageBackButtonAriaRoleDescription",
+       IDS_SETTINGS_SUBPAGE_BACK_BUTTON_ARIA_ROLE_DESCRIPTION},
       {"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

@@ -156,6 +156,9 @@ void AddCommonStrings(content::WebUIDataSource* html_source, Profile* profile) {
     {"settings", IDS_SETTINGS_SETTINGS},
     {"settingsAltPageTitle", IDS_SETTINGS_ALT_PAGE_TITLE},
     {"subpageArrowRoleDescription", IDS_SETTINGS_SUBPAGE_BUTTON},
+    {"subpageBackButtonAriaLabel", IDS_SETTINGS_SUBPAGE_BACK_BUTTON_ARIA_LABEL},
+    {"subpageBackButtonAriaRoleDescription",
+     IDS_SETTINGS_SUBPAGE_BACK_BUTTON_ARIA_ROLE_DESCRIPTION},
     {"notValid", IDS_SETTINGS_NOT_VALID},
     {"notValidWebAddress", IDS_SETTINGS_NOT_VALID_WEB_ADDRESS},
     {"notValidWebAddressForContentType",