[OS-Settings a11y]: Routing to a settings-section now puts focus there as well.

The OS Settings' settings-menu element acts as a table of contents containing
names of all the sections. When the user clicks one of these items [1], the
screen automatically scrolls down to that section's header [2]. However, the
DOM focus (and therefore the a11y focuse) remain on the menu item instead of
passing to the section itself [3]. This behavior is both inconvenient and
counter-intuitive because users expect a navigating to an element to
correspond to focusing on it. In particular, if the user is unable to see the
screen, this transition is especially hard to follow.

This CL corrects this behavior in OS Setting [4] as demonstrated in [5].

Update: See [6] for a video of Patchset 3 (i.e. with the outline removed).

[1] https://screenshot.googleplex.com/TrP1LgfE5YD
[2] https://screenshot.googleplex.com/SLSwfWzmkOH
[3] https://screenshot.googleplex.com/LENuPfqdEMC
[4] Note that this change does not affect browser settings. The fix can be
easily extended to browser settings by adding the line added here to
os_settings_main's onShowingSection_() method to settings_main's
onShowingSection_() method.
[5] https://drive.google.com/file/d/1c9yBaLBUnVwXyV5PHZnOoCkLCt2uRcZK/view?usp=sharing
[6] https://drive.google.com/file/d/1jx2sOnJFqfLp5BffhfiUq3Y65hz5kG2I/view?usp=sharing

Bug: 987406
Change-Id: I9794d706dc57fc42ce9202c709e280a32888b8a6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1874816
Commit-Queue: Jordy Greenblatt <jordynass@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Cr-Commit-Position: refs/heads/master@{#710174}

chrome/browser/resources/settings/chromeos/os_settings_main/os_settings_main.js

@@ -174,6 +174,7 @@ Polymer({
     const overscroll = Math.max(0, this.offsetParent.clientHeight - distance);
     this.setOverscroll_(overscroll);
     section.scrollIntoView();
+    section.focus();
   },
 
   /**

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

@@ -20,6 +20,7 @@
         letter-spacing: .25px;
         margin-bottom: 12px;
         margin-top: var(--cr-section-vertical-margin);
+        outline: none;
         padding-bottom: 4px;
         padding-top: 8px;
       }
@@ -36,7 +37,7 @@
       }
     </style>
     <div id="header">
-      <h2 class="title"
+      <h2 class="title" tabindex="-1"
           aria-hidden$="[[getTitleHiddenStatus_(pageTitle)]]">[[pageTitle]]</h2>
     </div>
     <div id="card">

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

@@ -58,5 +58,9 @@ let SettingsSectionElement = Polymer({
    */
   getTitleHiddenStatus_: function() {
     return this.pageTitle ? false : 'true';
+  },
+
+  focus: function() {
+    this.$$('.title').focus();
   }
 });