Reland: Add title/subtitle localization keys for OOBE dialogs

Initially reviewed on: https://chromium-review.googlesource.com/c/chromium/src/+/1955728

Bug: 955194, 893934
Change-Id: I453ffb21ce148912ad58fe8ceaa2c6e354872d72
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1980210Reviewed-by: Roman Aleksandrov <raleksandrov@google.com>
Commit-Queue: Denis Kuznetsov [CET] <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#727172}

chrome/browser/resources/chromeos/login/app_downloading.html

@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="app_downloading.css">
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <oobe-dialog id="app-downloading-dialog" role="dialog" has-buttons
+        subtitle-key="appDownloadingScreenDescription"
         aria-label$="[[getDialogTitleA11yString_(numOfApps)]]"
         no-footer-padding>
       <iron-icon src="chrome://oobe/playstore.svg" slot="oobe-icon">
@@ -22,9 +23,6 @@
       <h1 slot="title" id="title-plural" hidden="[[hasSingleApp]]">
         [[i18nDynamic(locale, 'appDownloadingScreenTitlePlural', numOfApps)]]
       </h1>
-      <div slot="subtitle">
-        [[i18nDynamic(locale, 'appDownloadingScreenDescription')]]
-      </div>
       <div id="app-downloading-video-container" slot="footer">
         <if expr="chromeos and _google_chrome">
           <video loop="loop" autoplay="autoplay" muted>

chrome/browser/resources/chromeos/login/arc_terms_of_service.html

@@ -11,12 +11,11 @@
     <link rel="stylesheet" href="oobe_dialog_host.css">
     <link rel="stylesheet" href="arc_terms_of_service.css">
     <link rel="stylesheet" href="oobe_flex_layout.css">
-    <oobe-dialog id="arc-tos-dialog" has-buttons class="arc-tos-loading">
+    <oobe-dialog id="arc-tos-dialog" has-buttons class="arc-tos-loading"
+        title-key="arcTermsOfServiceScreenHeading"
+        subtitle-key="arcTermsOfServiceScreenDescription">
       <iron-icon src="chrome://oobe/playstore.svg" slot="oobe-icon">
       </iron-icon>
-      <h1 slot="title" i18n-content="arcTermsOfServiceScreenHeading"></h1>
-      <div slot="subtitle" i18n-content="arcTermsOfServiceScreenDescription">
-      </div>
       <div id="arc-tos-container" slot="footer" class="flex layout vertical">
         <div id="arc-tos-view-container" class="arc-tos-content flex">
           <webview id="arc-tos-view" allowTransparency

chrome/browser/resources/chromeos/login/demo_preferences.html

@@ -8,13 +8,11 @@
     <link rel="stylesheet" href="demo_preferences.css">
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <oobe-dialog role="dialog" has-buttons
-        aria-label$="[[i18nDynamic(locale, 'demoPreferencesScreenTitle')]]">
+        aria-label$="[[i18nDynamic(locale, 'demoPreferencesScreenTitle')]]"
+        title-key="demoPreferencesScreenTitle">
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-32:gear" icon2x="oobe-64:gear">
       </hd-iron-icon>
-      <h1 slot="title">
-        [[i18nDynamic(locale, 'demoPreferencesScreenTitle')]]
-      </h1>
       <div slot="footer" class="layout vertical">
         <div id="languageDropdownContainer" class="flex layout center horizontal
             justified language-selection-entry">

chrome/browser/resources/chromeos/login/demo_setup.html

@@ -4,24 +4,22 @@
     <link rel="stylesheet" href="demo_setup.css">
     <link rel="stylesheet" href="oobe_flex_layout.css">
 
-    <oobe-dialog id="demoSetupProgressDialog" role="dialog" has-buttons hidden>
+    <oobe-dialog id="demoSetupProgressDialog" role="dialog" has-buttons hidden
+      title-key="demoSetupProgressScreenTitle">
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-32:computer" icon2x="oobe-64:computer">
       </hd-iron-icon>
-      <h1 slot="title">
-        [[i18nDynamic(locale, 'demoSetupProgressScreenTitle')]]
-      </h1>
       <div slot="footer" class="flex layout vertical center center-justified">
         <paper-spinner-lite id="spinner" dir="ltr" active></paper-spinner-lite>
       </div>
     </oobe-dialog>
 
     <oobe-dialog id="demoSetupErrorDialog" role="dialog" has-buttons hidden
-        aria-label$="[[i18nDynamic(locale, 'demoSetupErrorScreenTitle')]]">
+        aria-label$="[[i18nDynamic(locale, 'demoSetupErrorScreenTitle')]]"
+        title-key="demoSetupErrorScreenTitle">
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-32:computer" icon2x="oobe-64:computer">
       </hd-iron-icon>
-      <h1 slot="title">[[i18nDynamic(locale, 'demoSetupErrorScreenTitle')]]</h1>
       <div slot="subtitle">[[errorMessage_]]</div>
       <div slot="footer" class="flex layout vertical center center-justified">
         <img srcset="images/alert-illustration_1x.svg 1x,

chrome/browser/resources/chromeos/login/discover/modules/discover_module_pin_setup.html

@@ -40,16 +40,12 @@
       </div>
     </oobe-dialog>
     <oobe-dialog role="dialog" has-buttons on-keypress="onKeypress_"
+        title-key="discoverPinSetupPasswordTitle"
+        subtitle-key="discoverPinSetupPasswordSubTitle"
         hidden="[[isStepHidden_(step_, 'password')]]">
       <hd-iron-icon slot="oobe-icon" icon1x="oobe-32:lock"
           icon2x="oobe-64:lock">
       </hd-iron-icon>
-      <h1 slot="title">
-        [[i18nDynamic(locale, 'discoverPinSetupPasswordTitle')]]
-      </h1>
-      <div slot="subtitle">
-        [[i18nDynamic(locale, 'discoverPinSetupPasswordSubTitle')]]
-      </div>
       <div slot="footer" class="flex layout horizontal">
         <cr-input id="passwordInput" type="password"
             placeholder="[[i18nDynamic(locale, 'passwordPromptPasswordLabel')]]"

chrome/browser/resources/chromeos/login/encryption_migration.html

@@ -25,12 +25,10 @@
       </oobe-dialog>
     </template>
     <template is="dom-if" if="[[isReady_(uiState)]]">
-      <oobe-dialog tabindex="0" id="ready-dialog" has-buttons>
+      <oobe-dialog tabindex="0" id="ready-dialog" has-buttons
+          title-key="migrationReadyTitle"
+          subtitle-key="migrationReadyDescription">
         <iron-icon slot="oobe-icon" class="warning-icon"></iron-icon>
-        <h1 slot="title">[[i18nDynamic(locale,'migrationReadyTitle')]]</h1>
-        <div slot="subtitle">
-          [[i18nDynamic(locale,'migrationReadyDescription')]]
-        </div>
         <template is="dom-if" if="[[isEnoughBattery]]">
           <div slot="footer" class="layout vertical center center-justified">
             <img srcset="images/security_update_1x.png 1x,
@@ -70,12 +68,10 @@
       </oobe-dialog>
     </template>
     <template is="dom-if" if="[[isMigrating_(uiState)]]">
-      <oobe-dialog id="migrating-dialog" tabindex="0">
+      <oobe-dialog id="migrating-dialog" tabindex="0"
+          title-key="migrationMigratingTitle"
+          subtitle-key="migrationMigratingDescription">
         <iron-icon slot="oobe-icon" class="chrome-logo"></iron-icon>
-        <h1 slot="title">[[i18nDynamic(locale,'migrationMigratingTitle')]]</h1>
-        <div slot="subtitle">
-          [[i18nDynamic(locale,'migrationMigratingDescription')]]
-        </div>
         <div slot="footer" class="flex layout vertical">
           <paper-progress id="migration-progress"
               value="[[progress]]" max="1" step="0.001"
@@ -90,13 +86,11 @@
       </oobe-dialog>
     </template>
     <template is="dom-if" if="[[isMigrationFailed_(uiState)]]">
-      <oobe-dialog id="error-dialog" tabindex="0" has-buttons>
+      <oobe-dialog id="error-dialog" tabindex="0" has-buttons
+          title-key="migrationFailedTitle"
+          subtitle-key="migrationFailedSubtitle">
         <iron-icon icon="cr:warning" slot="oobe-icon" class="warning">
         </iron-icon>
-        <h1 slot="title">[[i18nDynamic(locale,'migrationFailedTitle')]]</h1>
-        <div slot="subtitle">
-          [[i18nDynamic(locale,'migrationFailedSubtitle')]]
-        </div>
         <div slot="footer">
           <div>[[i18nDynamic(locale,'migrationFailedMessage')]]</div>
         </div>
@@ -113,12 +107,10 @@
       </oobe-dialog>
     </template>
     <template is="dom-if" if="[[isNotEnoughSpace_(uiState)]]">
-      <oobe-dialog id="insufficient-space-dialog" tabindex="0" has-buttons>
+      <oobe-dialog id="insufficient-space-dialog" tabindex="0" has-buttons
+          title-key="migrationReadyTitle"
+          subtitle-key="migrationReadyDescription">
         <iron-icon slot="oobe-icon" class="chrome-logo"></iron-icon>
-        <h1 slot="title">[[i18nDynamic(locale,'migrationReadyTitle')]]</h1>
-        <div slot="subtitle">
-          [[i18nDynamic(locale,'migrationReadyDescription')]]
-        </div>
         <div slot="footer" class="layout vertical" aria-live="polite">
           <div class="warning">
             [[i18nDynamic(locale,'migrationNospaceWarningLabel')]]

chrome/browser/resources/chromeos/login/enterprise_enrollment.html

@@ -15,10 +15,9 @@
       <link rel="stylesheet" href="enterprise_enrollment.css">
       <div id="step-signin" hidden$="[[!eq_(currentStep_, 'signin')]]">
         <oobe-dialog class="gaia-dialog" role="dialog"
-                     id="enrollment-gaia-dialog" has-buttons no-header
-                     no-footer-padding
-                     footer-shrinkable
-                     show-buttons-overlay="[[authenticatorDialogDisplayed_]]">
+            id="enrollment-gaia-dialog" has-buttons no-header
+            no-footer-padding footer-shrinkable
+            show-buttons-overlay="[[authenticatorDialogDisplayed_]]">
           <div slot="footer" class="flex layout vertical">
             <webview id="oauth-enroll-auth-view"
                      name="oauth-enroll-auth-view">
@@ -32,16 +31,13 @@
         </oobe-dialog>
       </div>
       <div id="step-working" hidden$="[[!eq_(currentStep_, 'working')]]">
-          <oobe-dialog id="oauth-enroll-working">
+          <oobe-dialog id="oauth-enroll-working"
+              title-key="oauthEnrollScreenTitle">
             <hd-iron-icon slot="oobe-icon"
                 icon1x="oobe-32:briefcase" icon2x="oobe-64:briefcase">
             </hd-iron-icon>
-            <h1 slot="title">
-              [[i18nDynamic(locale, 'oauthEnrollScreenTitle')]]
-            </h1>
             <paper-progress slot="progress" indeterminate>
             </paper-progress>
-
             <div slot="footer" class="flex layout vertical" role="alert">
               <div class="oauth-enroll-step-message">
                 [[i18nDynamic(locale, 'oauthEnrollWorking')]]
@@ -51,8 +47,8 @@
       </div>
       <div id="step-ad-join" hidden$="[[!eq_(currentStep_, 'ad-join')]]">
         <offline-ad-login id="oauth-enroll-ad-join-ui" is-domain-join
-            class="fit" i18n-values=
-                "ad-welcome-message:oauthEnrollAdDomainJoinWelcomeMessage">
+            class="fit"
+            ad-welcome-message-key="oauthEnrollAdDomainJoinWelcomeMessage">
         </offline-ad-login>
       </div>
       <div id="step-error" role="alert"
@@ -68,13 +64,10 @@
       <div id="step-success" hidden$="[[!eq_(currentStep_, 'success')]]"
           role="alert">
         <oobe-dialog id="oauth-enroll-success-card" has-buttons
-            footer-shrinkable>
+            title-key="oauthEnrollSuccessTitle" footer-shrinkable>
           <hd-iron-icon slot="oobe-icon"
               icon1x="oobe-32:briefcase" icon2x="oobe-64:briefcase">
           </hd-iron-icon>
-          <h1 slot="title">
-            [[i18nDynamic(locale, 'oauthEnrollSuccessTitle')]]
-          </h1>
           <div slot="subtitle">
             <div hidden="[[!isEmpty_(enrolledDomain_)]]">
               [[i18nDynamic(locale,'oauthEnrollSuccessTitle')]]
@@ -101,16 +94,12 @@
       </div>
       <div id="step-attribute-prompt"
           hidden$="[[!eq_(currentStep_, 'attribute-prompt')]]">
-        <oobe-dialog id="oauth-enroll-attribute-prompt-card" has-buttons>
+        <oobe-dialog id="oauth-enroll-attribute-prompt-card" has-buttons
+            title-key="oauthEnrollScreenTitle"
+            subtitle-key="oauthEnrollDeviceInformation">
           <hd-iron-icon slot="oobe-icon"
               icon1x="oobe-32:briefcase" icon2x="oobe-64:briefcase">
           </hd-iron-icon>
-          <h1 slot="title">
-            [[i18nDynamic(locale, 'oauthEnrollScreenTitle')]]
-          </h1>
-          <div slot="subtitle">
-            [[i18nDynamic(locale, 'oauthEnrollDeviceInformation')]]
-          </div>
           <div slot="footer" class="layout vertical start">
             <div class="oauth-enroll-step-message">
               <span id="oauth-enroll-attribute-prompt-message">

chrome/browser/resources/chromeos/login/fingerprint_setup.html

@@ -16,17 +16,13 @@
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <oobe-dialog id="setupFingerprint" role="dialog" has-buttons
         footer-shrinkable
+        title-key="setupFingerprintScreenTitle"
+        subtitle-key="setupFingerprintScreenDescription"
         aria-label$="[[i18nDynamic(locale, 'setupFingerprintScreenTitle')]]"
         hidden>
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-32:fingerprint" icon2x="oobe-64:fingerprint">
       </hd-iron-icon>
-      <h1 slot="title">
-        [[i18nDynamic(locale, 'setupFingerprintScreenTitle')]]
-      </h1>
-      <div slot="subtitle">
-          [[i18nDynamic(locale, 'setupFingerprintScreenDescription')]]
-      </div>
       <div slot="footer" class="flex layout vertical center center-justified">
         <img class="oobe-illustration"
             srcset="images/1x/finger_unlock.svg 1x,
@@ -42,17 +38,13 @@
       </div>
     </oobe-dialog>
     <oobe-dialog id="placeFinger" role="dialog" has-buttons footer-shrinkable
+        title-key="placeFingerScreenTitle"
+        subtitle-key="setupFingerprintScreenDescription"
         aria-label$="[[i18nDynamic(locale, 'placeFingerScreenTitle')]]"
         hidden>
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-32:fingerprint" icon2x="oobe-64:fingerprint">
       </hd-iron-icon>
-      <h1 slot="title">
-        [[i18nDynamic(locale, 'placeFingerScreenTitle')]]
-      </h1>
-      <div slot="subtitle">
-          [[i18nDynamic(locale, 'setupFingerprintScreenDescription')]]
-      </div>
       <div slot="footer" class="flex layout vertical center center-justified">
         <div id="sensorLocationContainer" class="oobe-illustration">
           <template is="dom-if" if="[[shouldUseLottieAnimation_]]">

chrome/browser/resources/chromeos/login/marketing_opt_in.html

@@ -10,13 +10,11 @@
     <link rel="stylesheet" href="marketing_opt_in.css">
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <oobe-dialog id="marketingOptInOverviewDialog" role="dialog" has-buttons
+        title-key="marketingOptInScreenTitle"
         aria-label$="[[i18nDynamic(locale, 'marketingOptInScreenTitle')]]">
       <hd-iron-icon slot="oobe-icon" icon1x="oobe-32:checkmark"
           icon2x="oobe-32:checkmark">
       </hd-iron-icon>
-      <h1 slot="title">
-        [[i18nDynamic(locale, 'marketingOptInScreenTitle')]]
-      </h1>
       <div slot="subtitle">
         [[i18nRecursive(locale, 'marketingOptInScreenSubtitle', 'productName')]]
       </div>

chrome/browser/resources/chromeos/login/offline_ad_login.html

@@ -23,7 +23,7 @@
     'userRealm' - Autocomplete realm for the user input.
     'disabled' - Whether the UI disabled. Could be used to disable the UI
                  during blocking IO operations.
-    'adWelcomeMessage' - Welcome message on top of the UI.
+    'adWelcomeMessageKey' - ID of localized welcome message on top of the UI.
 
   Events:
     'authCompleted' - Fired when user enters login and password. Fires with an
@@ -52,16 +52,12 @@
     <link rel="stylesheet" href="oobe_iron_flex_layout_fix.css">
     <link rel="stylesheet" href="offline_ad_login.css">
     <oobe-dialog id="unlockStep" hidden="[[!unlockPasswordStep]]"
-        aria-label$="[[adWelcomeMessage]]" has-buttons>
+        title-key="adUnlockTitle"
+        subtitle-key="adUnlockSubtitle"
+        aria-label$="[[i18nDynamic(locale, adWelcomeMessagekey)]]" has-buttons>
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-32:briefcase" icon2x="oobe-64:briefcase">
       </hd-iron-icon>
-      <h1 slot="title" class="welcome-message">
-        [[i18nDynamic(locale, 'adUnlockTitle')]]
-      </h1>
-      <div slot="subtitle">
-        [[i18nDynamic(locale, 'adUnlockSubtitle')]]
-      </div>
       <div slot="footer" id="adUnlock">
         <cr-input id="unlockPasswordInput" type="password" slot="inputs"
             invalid="{{unlockPasswordInvalid}}"
@@ -79,12 +75,11 @@
       </div>
     </oobe-dialog>
     <oobe-dialog id="credsStep" hidden="[[unlockPasswordStep]]"
-        aria-label$="[[adWelcomeMessage]]" has-buttons>
+        title-key="[[adWelcomeMessageKey]]"
+        aria-label$="[[i18nDynamic(locale, adWelcomeMessagekey)]]" has-buttons>
       <hd-iron-icon slot="oobe-icon" hidden="[[!isDomainJoin]]"
           icon1x="oobe-32:briefcase" icon2x="oobe-64:briefcase">
       </hd-iron-icon>
-      <h1 slot="title" id="welcomeMsg"
-          class="welcome-message">[[adWelcomeMessage]]</h1>
       <div slot="subtitle" hidden="[[isDomainJoin]]">
         [[i18nDynamic(locale, 'enterpriseInfoMessage', realm)]]
       </div>

chrome/browser/resources/chromeos/login/offline_ad_login.js

@@ -72,9 +72,9 @@ Polymer({
      */
     userNameLabel: {type: String, value: ''},
     /**
-     * Welcome message on top of the UI.
+     * ID of localized welcome message on top of the UI.
      */
-    adWelcomeMessage: String,
+    adWelcomeMessageKey: String,
     /**
      * Error message for the machine name input.
      */

chrome/browser/resources/chromeos/login/oobe_adb_sideloading_screen.html

@@ -16,14 +16,12 @@
     <!-- Dialog for normal confirmation -->
     <oobe-dialog id="enableAdbSideloadDialog" role="dialog" has-buttons
         footer-shrinkable
+        title-key="enableAdbSideloadingSetupTitle"
         aria-label$="[[i18nDynamic(locale, 'enableAdbSideloadingSetupTitle')]]"
         hidden="[[!isState_(uiState_, 'setup')]]">
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-32:alert" icon2x="oobe-64:alert">
       </hd-iron-icon>
-      <h1 slot="title">
-        [[i18nDynamic(locale, 'enableAdbSideloadingSetupTitle')]]
-      </h1>
       <div slot="subtitle">
         <div>
           [[i18nDynamic(locale, 'enableAdbSideloadingSetupMessage')]]
@@ -53,14 +51,12 @@
     <!-- Dialog for error -->
     <oobe-dialog id="enableAdbSideloadErrorDialog" role="dialog" has-buttons
         footer-shrinkable
+        title-key="enableAdbSideloadingErrorTitle"
         aria-label$="[[i18nDynamic(locale, 'enableAdbSideloadingSetupTitle')]]"
         hidden="[[!isState_(uiState_, 'error')]]">
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-32:alert" icon2x="oobe-64:alert">
       </hd-iron-icon>
-      <h1 slot="title">
-        [[i18nDynamic(locale, 'enableAdbSideloadingErrorTitle')]]
-      </h1>
       <div slot="subtitle">
         [[i18nDynamic(locale, 'enableAdbSideloadingErrorMessage')]]
         <a href="#" on-tap="onLearnMoreTap_">

chrome/browser/resources/chromeos/login/oobe_dialog.html

@@ -55,6 +55,9 @@
     has-buttons - shows bottom buttons menu
     footer-shrinkable - whether footer should be shrunk to fit the container.
                         Most likely should be set for oobe-illustration's.
+    title-key - ID of localized string to be used as default title element.
+    subtitle-key - ID of localized string to be used as default subtitle
+                   element.
 
   I.e. [no-header no-footer-padding] will make the footer occupy all the dialog
   space.
@@ -73,10 +76,14 @@
         </div>
         <div id="oobe-title" class="slot-container layout vertical
             end-justified">
-          <slot name="title"></slot>
+          <slot name="title">
+            <h1>[[i18nDynamic(locale, titleKey)]]</h1>
+          </slot>
         </div>
         <div id="oobe-subtitle" class="slot-container layout vertical">
-          <slot name="subtitle"></slot>
+          <slot name="subtitle">
+            <div>[[i18nDynamic(locale, subtitleKey)]]</div>
+          </slot>
         </div>
         <div id="oobe-progress" class="slot-container layout vertical">
           <slot name="progress"></slot>

chrome/browser/resources/chromeos/login/oobe_dialog.js

@@ -5,7 +5,7 @@
 Polymer({
   is: 'oobe-dialog',
 
-  behaviors: [CrScrollableBehavior],
+  behaviors: [OobeI18nBehavior, CrScrollableBehavior],
 
   properties: {
     /**
@@ -73,6 +73,21 @@ Polymer({
       type: Boolean,
       value: false,
     },
+
+    /* The ID of the localized string to be used as title text when no "title"
+     * slot elements are specified.
+     */
+    titleKey: {
+      type: String,
+    },
+
+    /* The ID of the localized string to be used as subtitle text when no
+     * "subtitle" slot elements are specified.
+     */
+    subtitleKey: {
+      type: String,
+    },
+
   },
 
   focus: function() {

chrome/browser/resources/chromeos/login/oobe_enable_kiosk.html

@@ -11,11 +11,10 @@
     <link rel="stylesheet" href="oobe_dialog_host.css">
     <link rel="stylesheet" href="oobe_flex_layout.css">
 
-    <oobe-dialog id="dialog" role="dialog" aria-labelledby="title"
+    <oobe-dialog id="dialog" role="dialog"
+        title-key="kioskEnableWarningText"
+        aria-label$="[[i18nDynamic(locale, 'kioskEnableWarningText')]]"
         has-buttons footer-shrinkable>
-      <h1 id="title" slot="title">
-        [[i18nDynamic(locale,'kioskEnableWarningText')]]
-      </h1>
       <div slot="subtitle">
         <span hidden="[[!eq_(state_, 'confirm')]]">
           [[i18nDynamic(locale,'kioskEnableWarningDetails')]]

chrome/browser/resources/chromeos/login/oobe_eula.html

@@ -13,23 +13,20 @@
     <link rel="stylesheet" href="oobe_eula.css">
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <oobe-dialog id="eulaLoadingDialog" hidden="[[!eulaLoadingScreenShown]]"
-        role="dialog" aria-labelledby="loadingTitle" has-buttons
-        full-screen-dialog>
-      <iron-icon icon="oobe-eula:googleg" slot="oobe-icon"></iron-icon>
-      <h1 slot="title" id="loadingTitle">
-        [[i18nDynamic(locale, 'termsOfServiceLoading')]]
-      </h1>
+        title-key="termsOfServiceLoading" role="dialog"
+        aria-label$="[[i18nDynamic(locale, 'termsOfServiceLoading')]]"
+        has-buttons full-screen-dialog>
+      <hd-iron-icon slot="oobe-icon"
+          icon1x="oobe-32:googleg" icon2x="oobe-64:googleg">
+      </hd-iron-icon>
     </oobe-dialog>
     <oobe-dialog id="eulaDialog" hidden="[[eulaLoadingScreenShown]]"
-        role="dialog" aria-labelledby="eulaTitle"
-        aria-describedby="crosEulaFrame"
-        has-buttons>
+        role="dialog" title-key="oobeEulaSectionTitle"
+        aria-label$="[[i18nDynamic(locale, 'oobeEulaSectionTitle')]]"
+        aria-describedby="crosEulaFrame" has-buttons>
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-32:googleg" icon2x="oobe-64:googleg">
       </hd-iron-icon>
-      <h1 slot="title" id="eulaTitle">
-        [[i18nDynamic(locale, 'oobeEulaSectionTitle')]]
-      </h1>
       <div slot="footer" class="flex layout vertical">
         <webview id="crosEulaFrame" allowTransparency
             role="document" class="flex oobe-tos-webview"
@@ -66,14 +63,12 @@
         </oobe-text-button>
       </div>
     </oobe-dialog>
-    <oobe-dialog id="installationSettingsDialog" role="dialog"
-        aria-labelledby="settingsTitle" has-buttons hidden>
+    <oobe-dialog id="installationSettingsDialog" role="dialog" has-buttons
+      title-key="eulaSystemInstallationSettings" hidden
+      aria-label$="[[i18nDynamic(locale, 'eulaSystemInstallationSettings')]]">
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-32:googleg" icon2x="oobe-64:googleg">
       </hd-iron-icon>
-      <h1 slot="title" id="settingsTitle">
-        [[i18nDynamic(locale, 'eulaSystemInstallationSettings')]]
-      </h1>
       <!-- TODO(antrim): find out why do we have everything in subtitle -->
       <div slot="subtitle" id="settingsSubtitle">
         <div>

chrome/browser/resources/chromeos/login/oobe_hid_detection.html

@@ -51,15 +51,11 @@
     <link rel="stylesheet" href="oobe_dialog_host.css">
     <link rel="stylesheet" href="oobe_hid_detection.css">
     <link rel="stylesheet" href="oobe_flex_layout.css">
-    <oobe-dialog has-buttons>
+    <oobe-dialog has-buttons
+        title-key="hidDetectionInvitation"
+        subtitle-key="hidDetectionPrerequisites">
       <iron-icon icon="oobe-hid-detection:bluetooth" slot="oobe-icon">
       </iron-icon>
-      <h1 slot="title">
-        [[i18nDynamic(locale, 'hidDetectionInvitation')]]
-      </h1>
-      <div slot="subtitle">
-        [[i18nDynamic(locale, 'hidDetectionPrerequisites')]]
-      </div>
       <div slot="footer" class="flex layout vertical">
         <div class="layout vertical justified hid-selection-entry">
           <div class="flex layout horizontal center">

chrome/browser/resources/chromeos/login/oobe_network.html

@@ -7,13 +7,13 @@
     <link rel="stylesheet" href="oobe_dialog_host.css">
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <oobe-dialog id="networkDialog" role="dialog" on-show-dialog="onShown_"
+        title-key="networkSectionTitle"
         aria-label$="[[i18nDynamic(locale, 'networkSectionTitle')]]"
         has-buttons full-screen-dialog>
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-network-32:dialog-icon-wifi"
           icon2x="oobe-network-64:dialog-icon-wifi">
       </hd-iron-icon>
-      <h1 slot="title">[[i18nDynamic(locale, 'networkSectionTitle')]]</h1>
       <div slot="subtitle" hidden$="[[isDemoModeSetup]]">
         [[i18nDynamic(locale, 'networkSectionHint')]]
       </div>

chrome/browser/resources/chromeos/login/oobe_reset.html

@@ -13,14 +13,12 @@
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <link rel="stylesheet" href="oobe_reset.css">
     <oobe-dialog id="resetDialog" role="dialog"
+        title-key="resetWarningTitle"
         i18n-values="aria-label:resetScreenAccessibleTitle" has-buttons
         footer-shrinkable>
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-32:alert" icon2x="oobe-64:alert">
       </hd-iron-icon>
-      <h1 slot="title">
-        [[i18nDynamic(locale, 'resetWarningTitle')]]
-      </h1>
       <div slot="subtitle" class="powerwash-warning">
         <div hidden="[[!isState_(uiState_, 'powerwash-proposal-view')]]">
           [[i18nDynamic(locale, 'resetPowerwashWarningDetails')]]

chrome/browser/resources/chromeos/login/oobe_supervision_transition.html

@@ -8,7 +8,8 @@
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <link rel="stylesheet" href="oobe_supervision_transition.css">
     <oobe-dialog id="supervisionTransitionDialog" role="alert"
-        aria-label$="[[getDialogA11yTitle_(locale, isRemovingSupervision_)]]">
+        aria-label$="[[getDialogA11yTitle_(locale, isRemovingSupervision_)]]"
+        subtitle-key="supervisionTransitionIntroMessage">
       <iron-icon src="chrome://oobe/supervision_icon.png" slot="oobe-icon"
           class="supervision-icon" aria-hidden="true">
       </iron-icon>
@@ -20,26 +21,19 @@
           [[i18nDynamic(locale,'removingSupervisionTitle')]]
         </div>
       </h1>
-      <div slot="subtitle">
-        [[i18nDynamic(locale,'supervisionTransitionIntroMessage')]]
-      </div>
       <div slot="footer" aria-live="off">
         <paper-progress class="slow" aria-hidden="true" indeterminate>
         </paper-progress>
       </div>
     </oobe-dialog>
     <oobe-dialog id="supervisionTransitionErrorDialog" role="alert"
+        title-key="supervisionTransitionErrorTitle"
+        subtitle-key="supervisionTransitionErrorMessage"
         aria-label$="[[i18nDynamic(locale,'supervisionTransitionErrorTitle')]]"
         has-buttons hidden>
       <iron-icon src="chrome://oobe/supervision_icon.png" slot="oobe-icon"
           aria-hidden="true">
       </iron-icon>
-      <h1 slot="title">
-        [[i18nDynamic(locale,'supervisionTransitionErrorTitle')]]
-      </h1>
-      <div slot="subtitle">
-        [[i18nDynamic(locale,'supervisionTransitionErrorMessage')]]
-      </div>
       <div slot="bottom-buttons" class="layout horizontal end-justified">
         <oobe-text-button id="accept-button" on-tap="onAcceptAndContinue_"
             text-key="supervisionTransitionButton" inverse></oobe-text-button>

chrome/browser/resources/chromeos/login/oobe_terms_of_service.html

@@ -16,20 +16,12 @@
 
     <!-- ERROR DIALOG -->
     <oobe-dialog id="termsOfServiceErrorDialog" role="dialog"
-        aria-labelledby="title"
+        title-key="termsOfServiceError"
+        subtitle-key="termsOfServiceTryAgain"
+        aria-label$="[[i18nDynamic(locale, 'termsOfServiceError')]]"
         hidden="[[!isInErrorState_(uiState)]]" has-buttons>
       <iron-icon icon="cr:warning" slot="oobe-icon" class="warning">
       </iron-icon>
-      <h1 id="title" slot="title">
-        <div>
-          [[i18nDynamic(locale, 'termsOfServiceError')]]
-        </div>
-      </h1>
-      <div slot="subtitle">
-        <div>
-          [[i18nDynamic(locale, 'termsOfServiceTryAgain')]]
-        </div>
-      </div>
       <div slot="bottom-buttons" class="flex layout horizontal">
         <oobe-back-button id="errorBackButton"
             disabled="[[backButtonDisabled_]]"

chrome/browser/resources/chromeos/login/oobe_update.html

@@ -28,10 +28,10 @@
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <link rel="stylesheet" href="oobe_update.css">
     <oobe-dialog hidden="[[!checkingForUpdate]]" tabindex="0"
+        title-key="checkingForUpdates"
         aria-live="polite" id="checking-for-updates-dialog" footer-shrinkable
         full-screen-dialog>
       <iron-icon icon="oobe-update:googleg" slot="oobe-icon"></iron-icon>
-      <h1 slot="title" i18n-content="checkingForUpdates"></h1>
       <div slot="subtitle" class="update-subtitle" id="checkingForUpdatesMsg"
           i18n-content="checkingForUpdatesMsg">
       </div>
@@ -48,6 +48,7 @@
       </div>
     </oobe-dialog>
     <oobe-dialog hidden="[[!requiresPermissionForCellular]]" tabindex="0"
+        subtitle-key="updateOverCellularPromptMessage"
         aria-live="polite" has-buttons footer-shrinkable
         id="cellular-permission-dialog">
       <iron-icon icon="oobe-update:googleg" slot="oobe-icon"></iron-icon>
@@ -55,9 +56,6 @@
           [[i18nRecursive(locale, 'updateOverCellularPromptTitle',
                           'productName')]]
       </h1>
-      <div slot="subtitle" class="update-subtitle">
-          [[i18nDynamic(locale, 'updateOverCellularPromptMessage')]]
-      </div>
       <div slot="footer" class="flex layout vertical center-justified center">
         <img class="update-illustration oobe-illustration"
             srcset="images/1x/updating_1x.svg 1x,
@@ -71,11 +69,11 @@
       </div>
     </oobe-dialog>
     <oobe-dialog footer-shrinkable id="updating-dialog"
+        title-key="updatingScreenTitle"
         hidden="[[hideUpdatingScreen_(checkingForUpdate,
                                       requiresPermissionForCellular)]]"
         tabindex="0" aria-live="polite">
       <iron-icon icon="oobe-update:googleg" slot="oobe-icon"></iron-icon>
-      <h1 slot="title" i18n-content="updatingScreenTitle"></h1>
       <div slot="subtitle" class="update-subtitle"
           i18n-content="installingUpdateDesc"
           hidden="[[updateCompleted]]"></div>

chrome/browser/resources/chromeos/login/oobe_welcome.html

@@ -71,11 +71,11 @@
         debugging-link-visible="[[debuggingLinkVisible_]]">
     </oobe-welcome-dialog>
     <oobe-dialog id="languageScreen" role="dialog" hidden has-buttons
+        title-key="languageSectionTitle"
         aria-label$="[[i18nDynamic(locale, 'languageSectionTitle')]]">
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-welcome-32:language" icon2x="oobe-welcome-64:language">
       </hd-iron-icon>
-      <h1 slot="title">[[i18nDynamic(locale, 'languageSectionTitle')]]</h1>
       <div id="setup-container" slot="footer" class="layout vertical">
         <div id="languageDropdownContainer"
             class="flex layout center horizontal justified
@@ -110,17 +110,13 @@
       </div>
     </oobe-dialog>
     <oobe-dialog id="accessibilityScreen" role="dialog" hidden has-buttons
+        title-key="accessibilitySectionTitle"
+        subtitle-key="accessibilitySectionHint"
         aria-label$="[[i18nDynamic(locale, 'accessibilitySectionTitle')]]">
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-welcome-32:accessibility"
           icon2x="oobe-welcome-64:accessibility">
       </hd-iron-icon>
-      <h1 slot="title">
-        [[i18nDynamic(locale, 'accessibilitySectionTitle')]]
-      </h1>
-      <div slot="subtitle">
-        [[i18nDynamic(locale, 'accessibilitySectionHint')]]
-      </div>
       <div slot="footer" class="layout vertical scroll">
         <oobe-a11y-option id="accessibility-spoken-feedback"
         checked="[[a11yStatus.spokenFeedbackEnabled]]"
@@ -236,11 +232,11 @@
       </div>
     </oobe-dialog>
     <oobe-dialog id="timezoneScreen" role="dialog" hidden has-buttons
+        title-key="timezoneSectionTitle"
         aria-label$="[[i18nDynamic(locale, 'timezoneSectionTitle')]]">
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-welcome-32:timezone" icon2x="oobe-welcome-64:timezone">
       </hd-iron-icon>
-      <h1 slot="title">[[i18nDynamic(locale, 'timezoneSectionTitle')]]</h1>
       <div slot="footer" class="layout vertical">
         <div class="flex layout center horizontal justified
               timezone-selection-entry">
@@ -261,13 +257,11 @@
       </div>
     </oobe-dialog>
     <oobe-dialog id="oobeAdvancedOptionsScreen" role="dialog" hidden has-buttons
+        title-key="advancedOptionsSectionTitle"
         aria-label$="[[i18nDynamic(locale, 'advancedOptionsSectionTitle')]]">
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-welcome-32:settings" icon2x="oobe-welcome-64:settings">
       </hd-iron-icon>
-      <h1 slot="title">
-        [[i18nDynamic(locale, 'advancedOptionsSectionTitle')]]
-      </h1>
       <div slot="footer" class="layout vertical">
         <div class="flex layout vertical center-justified
             advanced-options-entry">

chrome/browser/resources/chromeos/login/packaged_license_screen.html

@@ -11,14 +11,12 @@
     <link rel="stylesheet" href="oobe_dialog_host.css">
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <oobe-dialog id="packagedLicenseDialog"
+        title-key="oobePackagedLicenseTitle"
         aria-label$="[[i18nDynamic(locale, 'oobePackagedLicenseTitle')]]"
         role="dialog" has-buttons>
       <hd-iron-icon slot="oobe-icon"
           icon1x="oobe-32:briefcase" icon2x="oobe-64:briefcase">
       </hd-iron-icon>
-      <h1 slot="title">
-        [[i18nDynamic(locale, 'oobePackagedLicenseTitle')]]
-      </h1>
       <div slot="subtitle">
         <p>[[i18nDynamic(locale, 'oobePackagedLicenseSubtitleP1')]]</p>
         <p>[[i18nDynamic(locale, 'oobePackagedLicenseSubtitleP2')]]</p>

chrome/browser/resources/chromeos/login/recommend_apps.html

@@ -12,13 +12,11 @@
     <link rel="stylesheet" href="recommend_apps.css">
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <oobe-dialog id="recommend-apps-dialog" role="dialog" has-buttons
+        title-key="oobePackagedLicenseTitle"
         aria-label$="[[i18nDynamic(locale, 'recommendAppsScreenTitle')]]"
         no-footer-padding footer-shrinkable class="recommend-apps-loading">
       <iron-icon src="chrome://oobe/playstore.svg" slot="oobe-icon">
       </iron-icon>
-      <h1 slot="title">
-        [[i18nDynamic(locale, 'recommendAppsScreenTitle')]]
-      </h1>
       <div id="subtitle" slot="subtitle"></div>
       <div id="app-list-error" slot="subtitle">
         [[i18nDynamic(locale, 'recommendAppsError')]]

chrome/browser/resources/chromeos/login/screen_gaia_signin.html

@@ -46,20 +46,18 @@
     </offline-gaia>
     <offline-ad-login id="offline-ad-auth" class="gaia-dialog"
         hidden="[[!isStep_(step_, 'ad')]]"
-        i18n-values="ad-welcome-message:loginWelcomeMessage">
+        ad-welcome-message-key="loginWelcomeMessage">
     </offline-ad-login>
     <security-token-pin id="pinDialog" parameters="[[pinDialogParameters_]]"
         hidden="[[!isStep_(step_, 'pin')]]"
         on-cancel="onPinDialogCanceled_" on-completed="onPinDialogCompleted_">
     </security-token-pin>
     <oobe-dialog id="saml-interstitial" role="dialog" has-buttons
+        title-key="loginWelcomeMessage"
         hidden="[[!isStep_(step_, 'saml-interstitial')]]">
       <hd-iron-icon slot="oobe-icon" icon1x="oobe-32:googleg"
           icon2x="oobe-64:googleg">
       </hd-iron-icon>
-      <h1 slot="title">
-        [[i18nDynamic(locale, 'loginWelcomeMessage')]]
-      </h1>
       <div slot="subtitle" hidden="[[isEmpty_(samlInterstitialDomain_)]]">
         [[i18nDynamic(locale, 'enterpriseInfoMessage',
                       samlInterstitialDomain_)]]

chrome/browser/resources/chromeos/login/screen_tpm_error.html

 <div id="tpm-error-message" class="step faded hidden" hidden>
-  <oobe-dialog id="tpm-error-dialog" role="dialog" has-buttons>
+  <oobe-dialog id="tpm-error-dialog" role="dialog" has-buttons
+      title-key="errorTpmFailureTitle" subtitle-key="errorTpmFailureReboot">
     <iron-icon slot="oobe-icon" icon="cr:warning" class="warning">
     </iron-icon>
-    <h1 slot="title" i18n-content="errorTpmFailureTitle"></h1>
-    <div slot="subtitle" i18n-content="errorTpmFailureReboot"></div>
     <div slot="bottom-buttons" class="layout horizontal end-justified">
       <oobe-text-button id="tpm-restart-button" inverse
           text-key="errorTpmFailureRebootButton">

chrome/browser/resources/chromeos/login/security_token_pin.html

@@ -12,13 +12,12 @@
   <template>
 
     <oobe-dialog class="gaia-dialog" has-buttons role="dialog"
-        aria-labelledby="title" aria-describedby="description">
+        title-key="securityTokenPinDialogTitle"
+        aria-label$="[[i18nDynamic(locale, 'securityTokenPinDialogTitle')]]"
+        aria-describedby="description">
       <hd-iron-icon slot="oobe-icon" icon1x="oobe-32:lock"
           icon2x="oobe-64:lock">
       </hd-iron-icon>
-      <h1 slot="title" id="title">
-        [[i18nDynamic(locale, 'securityTokenPinDialogTitle')]]
-      </h1>
       <div slot="subtitle" id="subtitle">
         <span id="description">
           [[i18nDynamic(locale, 'securityTokenPinDialogSubtitle')]]

chrome/browser/resources/chromeos/login/update_required_card.html

@@ -70,13 +70,9 @@
     </oobe-dialog>
 
     <oobe-dialog hidden="[[showOn_(ui_state, 'update-need-permission')]]"
-        has-buttons>
-      <h1 slot="title">
-        [[i18nDynamic(locale,'updateOverCellularPromptTitle')]]
-      </h1>
-      <div slot="subtitle" class="update-subtitle">
-        [[i18nDynamic(locale,'updateOverCellularPromptMessage')]]
-      </div>
+        has-buttons
+        title-key="updateOverCellularPromptTitle"
+        subtitle-key="updateOverCellularPromptMessage">
       <div slot="bottom-buttons" class="layout horizontal end-justified">
         <cr-button on-click="onCellularPermissionRejected_">
           [[i18nDynamic(locale,'RejectUpdateOverCellularButton')]]