[SyncSetup]: Add label for two external link buttons for a11y

This CL adds aria-label for the two external link buttons in the sync
section in chrome://settings/syncSetup page.

Bug: 1066599
Change-Id: I95ff9149b9e1e3da0dbea25b067a26aa7af6fd0d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2132452Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Commit-Queue: Monica Basta <msalama@chromium.org>
Cr-Commit-Position: refs/heads/master@{#756006}

chrome/browser/resources/settings/people_page/people_page.html

@@ -187,7 +187,8 @@
             learn-more-url="$i18n{syncAndGoogleServicesLearnMoreURL}">
           <settings-sync-page
               sync-status="[[syncStatus]]" prefs="{{prefs}}"
-              page-visibility="[[pageVisibility.privacy]]">
+              page-visibility="[[pageVisibility.privacy]]"
+              focus-config="[[focusConfig_]]">
           </settings-sync-page>
         </settings-subpage>
       </template>

chrome/browser/resources/settings/people_page/sync_page.html

@@ -2,11 +2,12 @@
 
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/util.html">
+<link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
-<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
-<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
 <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/cr_elements/shared_vars_css.html">
@@ -93,6 +94,11 @@
         left: auto;
         right: 0;
       }
+
+      cr-link-row {
+        padding-inline-start: 0;
+        padding-inline-end: 8px;
+      }
     </style>
     <template is="dom-if" if="[[shouldShowSyncAccountControl_(
         syncStatus.syncSystemEnabled)]]">
@@ -157,34 +163,18 @@
       <div id="[[pages_.CONFIGURE]]"
           hidden$="[[!isStatus_(pages_.CONFIGURE, pageStatus_)]]">
         <div id="other-sync-items" class="list-frame">
-          <div id="sync-advanced-row" class="list-item first"
-              on-click="onSyncAdvancedTap_" actionable>
-            <div class="start" id="page-title" aria-hidden="true">
-              $i18n{syncAdvancedPageTitle}
-            </div>
-            <cr-icon-button class="subpage-arrow" aria-labelledby="page-title"
-                aria-roledescription="$i18n{subpageArrowRoleDescription}">
-            </cr-icon-button>
-          </div>
+          <cr-link-row id="sync-advanced-row"
+              label="$i18n{syncAdvancedPageTitle}"
+              on-click="onSyncAdvancedClick_"></cr-link-row>
 
-          <a class="inherit-color no-outline list-item" tabindex="-1"
-              target="_blank" href="$i18n{activityControlsUrl}"
-              on-click="onActivityControlsTap_">
-            <div class="start settings-box-text">
-              $i18n{personalizeGoogleServicesTitle}
-            </div>
-            <cr-icon-button class="icon-external"></cr-icon-button>
-          </a>
+          <cr-link-row class="hr"
+              label="$i18n{personalizeGoogleServicesTitle}"
+              on-click="onActivityControlsClick_" external></cr-link-row>
 
-          <a id="syncDashboardLink"
-              class="inherit-color no-outline list-item"
-              tabindex="-1" target="_blank" href="$i18n{syncDashboardUrl}"
-              hidden="[[syncStatus.supervisedUser]]">
-            <div class="start settings-box-text">
-              $i18n{manageSyncedDataTitle}
-            </div>
-            <cr-icon-button class="icon-external"></cr-icon-button>
-          </a>
+          <cr-link-row id="syncDashboardLink" class="hr"
+              label="$i18n{manageSyncedDataTitle}"
+              on-click="onSyncDashboardLinkClick_"
+              hidden="[[syncStatus.supervisedUser]]" external></cr-link-row>
 
           <template is="dom-if" if="[[!syncSetupFriendlySettings_]]">
             <div id="encryptionDescription"

chrome/browser/resources/settings/people_page/sync_page.js

@@ -25,6 +25,12 @@ Polymer({
       notify: true,
     },
 
+    /** @private {!Map<string, (string|Function)>} */
+    focusConfig: {
+      type: Object,
+      observer: 'onFocusConfigChange_',
+    },
+
     /** @private */
     pages_: {
       type: Object,
@@ -231,6 +237,14 @@ Polymer({
     return this.syncStatus != undefined && !!this.syncStatus.managed;
   },
 
+  /** @private */
+  onFocusConfigChange_() {
+    const router = settings.Router.getInstance();
+    this.focusConfig.set(router.getRoutes().SYNC_ADVANCED, () => {
+      cr.ui.focusWithoutInk(assert(this.$$('#sync-advanced-row')));
+    });
+  },
+
   /** @private */
   onSetupCancelDialogBack_() {
     /** @type {!CrDialogElement} */ (this.$$('#setupCancelDialog')).cancel();
@@ -381,9 +395,15 @@ Polymer({
   },
 
   /** @private */
-  onActivityControlsTap_() {
+  onActivityControlsClick_() {
     chrome.metricsPrivate.recordUserAction('Sync_OpenActivityControlsPage');
     this.browserProxy_.openActivityControlsUrl();
+    window.open(loadTimeData.getString('activityControlsUrl'));
+  },
+
+  /** @private */
+  onSyncDashboardLinkClick_() {
+    window.open(loadTimeData.getString('syncDashboardUrl'));
   },
 
   /**
@@ -512,7 +532,7 @@ Polymer({
   },
 
   /** @private */
-  onSyncAdvancedTap_() {
+  onSyncAdvancedClick_() {
     const router = settings.Router.getInstance();
     router.navigateTo(router.getRoutes().SYNC_ADVANCED);
   },

chrome/test/data/webui/settings/people_page_sync_page_test.js

@@ -141,7 +141,9 @@ cr.define('settings_people_page_sync_page', function() {
       assertTrue(syncPage.$$('#sync-separator').hidden);
       assertTrue(otherItems.classList.contains('list-frame'));
       assertEquals(
-          otherItems.querySelectorAll(':scope > .list-item').length, 4);
+          otherItems.querySelectorAll(':scope > .list-item').length, 1);
+      assertEquals(
+          otherItems.querySelectorAll(':scope > cr-link-row').length, 3);
 
       // Test sync paused state.
       syncPage.syncStatus = {