Privacy Guide: overwrite fragment's |focus()|

This is a follow-up to crrev.com/c/3541986/comments/a769ec52_33a2a9b4.
It overwrites the |focus()| function in the individual PG fragments to
put the focus on the corresponding inner elements when the fragment gets
focused. This removes the need for the PG page to know about inner
elements of the fragments.

Bug: 1215630
Change-Id: Id31d4c141c9cc203293165f84d2bf4fe86a34f81
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3564572
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Rainhard Findling <rainhard@chromium.org>
Cr-Commit-Position: refs/heads/main@{#988452}

chrome/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_clear_on_exit_fragment.html

@@ -1,5 +1,5 @@
 <style include="privacy-guide-fragment-shared"></style>
-<div class="header" focus-element tabindex="-1">
+<div class="header" tabindex="-1">
   <picture>
     <source
         srcset="./images/privacy_guide/clear_on_exit_graphic_dark.svg"

chrome/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_clear_on_exit_fragment.ts

@@ -35,6 +35,10 @@ export class PrivacyGuideClearOnExitFragmentElement extends PolymerElement {
       },
     };
   }
+
+  override focus() {
+    this.shadowRoot!.querySelector<HTMLElement>('.header')!.focus();
+  }
 }
 
 customElements.define(

chrome/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_completion_fragment.html

@@ -21,7 +21,7 @@
     width: calc(100% - 48px);  /* 48px = 2x :host horizontal padding */
   }
 </style>
-<div class="headline-container" focus-element tabindex="-1">
+<div class="headline-container" tabindex="-1">
   <picture>
     <source
         srcset="./images/privacy_guide/completion_banner_dark.svg"

chrome/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_completion_fragment.ts

@@ -59,6 +59,10 @@ export class PrivacyGuideCompletionFragmentElement extends
         (event: UpdateSyncStateEvent) => this.updateWaaLink_(event.signedIn));
   }
 
+  override focus() {
+    this.shadowRoot!.querySelector<HTMLElement>('.headline-container')!.focus();
+  }
+
   /**
    * Updates the completion card waa link depending on the signin state.
    */

chrome/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_cookies_fragment.html

@@ -1,5 +1,5 @@
 <style include="privacy-guide-fragment-shared"></style>
-<div class="header" focus-element tabindex="-1">
+<div class="header" tabindex="-1">
   <picture>
     <source
         srcset="./images/privacy_guide/cookies_graphic_dark.svg"

chrome/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_cookies_fragment.ts

@@ -63,6 +63,10 @@ export class PrivacyGuideCookiesFragmentElement extends
     this.addEventListener('view-exit-finish', this.onViewExitFinish_);
   }
 
+  override focus() {
+    this.shadowRoot!.querySelector<HTMLElement>('.header')!.focus();
+  }
+
   private onViewEnterStart_() {
     this.startStateBlock3PIncognito_ =
         this.getPref('generated.cookie_primary_setting').value ===

chrome/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_history_sync_fragment.html

@@ -1,5 +1,5 @@
 <style include="privacy-guide-fragment-shared"></style>
-<div class="header" focus-element tabindex="-1">
+<div class="header" tabindex="-1">
   <picture>
     <source
         srcset="./images/privacy_guide/history_sync_graphic_dark.svg"

chrome/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_history_sync_fragment.ts

@@ -101,6 +101,10 @@ export class PrivacyGuideHistorySyncFragmentElement extends
     this.addEventListener('view-exit-finish', this.onViewExitFinish_);
   }
 
+  override focus() {
+    this.shadowRoot!.querySelector<HTMLElement>('.header')!.focus();
+  }
+
   private onViewExitFinish_() {
     const endStateHistorySyncOn = this.syncPrefs_.typedUrlsSynced;
     let state: PrivacyGuideSettingsStates|null = null;

chrome/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_msbb_fragment.html

@@ -1,5 +1,5 @@
 <style include="privacy-guide-fragment-shared"></style>
-<div class="header" focus-element tabindex="-1">
+<div class="header" tabindex="-1">
   <picture>
     <source
         srcset="./images/privacy_guide/msbb_graphic_dark.svg"

chrome/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_msbb_fragment.ts

@@ -53,6 +53,10 @@ export class PrivacyGuideMsbbFragmentElement extends
     this.addEventListener('view-exit-finish', this.onViewExitFinish_);
   }
 
+  override focus() {
+    this.shadowRoot!.querySelector<HTMLElement>('.header')!.focus();
+  }
+
   private onViewEnterStart_() {
     this.startStateMsbbOn_ =
         this.getPref('url_keyed_anonymized_data_collection.enabled').value;

chrome/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_page.ts

@@ -417,12 +417,9 @@ export class SettingsPrivacyGuidePageElement extends PrivacyGuideBase {
       }
 
       // On navigations within privacy guide, put the focus on the newly shown
-      // fragment. Every fragment has a [focus-element] element that is focused
-      // programmatically when the fragment is navigated to.
-      const elementToFocus =
-          assert(this.shadowRoot!.querySelector<HTMLElement>(
-                     '#' + this.privacyGuideStep_)!)
-              .shadowRoot!.querySelector<HTMLElement>('[focus-element]');
+      // fragment.
+      const elementToFocus = assert(this.shadowRoot!.querySelector<HTMLElement>(
+          '#' + this.privacyGuideStep_)!);
       afterNextRender(this, () => elementToFocus!.focus());
     }
   }

chrome/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_safe_browsing_fragment.html

@@ -1,5 +1,5 @@
 <style include="privacy-guide-fragment-shared"></style>
-<div class="header" focus-element tabindex="-1">
+<div class="header" tabindex="-1">
   <picture>
     <source
         srcset="./images/privacy_guide/safe_browsing_graphic_dark.svg"

chrome/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_safe_browsing_fragment.ts

@@ -63,6 +63,10 @@ export class PrivacyGuideSafeBrowsingFragmentElement extends
     this.addEventListener('view-exit-finish', this.onViewExitFinish_);
   }
 
+  override focus() {
+    this.shadowRoot!.querySelector<HTMLElement>('.header')!.focus();
+  }
+
   private onViewEnterStart_() {
     this.startStateEnhanced_ = this.getPref('generated.safe_browsing').value ===
         SafeBrowsingSetting.ENHANCED;

chrome/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_welcome_fragment.html

@@ -21,7 +21,7 @@
     width: calc(100% - 48px);  /* 48px = 2x :host horizontal padding */
   }
 </style>
-<div class="headline-container" focus-element tabindex="-1">
+<div class="headline-container" tabindex="-1">
   <picture>
     <source
         srcset="./images/privacy_guide/welcome_banner_dark.svg"

chrome/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_welcome_fragment.ts

@@ -28,6 +28,10 @@ export class PrivacyGuideWelcomeFragmentElement extends PolymerElement {
     return getTemplate();
   }
 
+  override focus() {
+    this.shadowRoot!.querySelector<HTMLElement>('.headline-container')!.focus();
+  }
+
   private onStartButtonClick_(e: Event) {
     e.stopPropagation();
     this.dispatchEvent(