[profiles][a11y] Profile bubbles are automatically focused and announced

This CL changes the following:
- profile bubbles are automatically focused when shown
- they are announced by screenreaders, using the role="dialog" attribute
- the line separator is ignored when navigating the bubble (this is
  consistent with other line separators, e.g. in settings)

Fixed: 1156103
Change-Id: Icc33d0bc790fffbb1e618a50235d09e99c69fdbc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2582079
Commit-Queue: David Roger <droger@chromium.org>
Reviewed-by: Alex Ilin <alexilin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#835720}

chrome/browser/resources/signin/dice_web_signin_intercept/dice_web_signin_intercept_app.html

 <style include="signin-dialog-shared">
-  :host {
+  #interceptDialog {
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -109,7 +109,9 @@
   }
 </style>
 
-<div id="header">
+<div role="dialog" id="interceptDialog" aria-labelledby="title"
+     aria-describedby="contents">
+  <div id="header">
     <div id="headerText">[[interceptionParameters_.headerText]]</div>
     <div id="avatar-container">
       <img id="avatar" alt=""
@@ -119,14 +121,14 @@
         <iron-icon class="icon" icon="cr:domain"></iron-icon>
       </div>
     </div>
-</div>
+  </div>
 
-<div id="body">
+  <div id="body">
     <div id="title">[[interceptionParameters_.bodyTitle]]</div>
     <div id="contents">[[interceptionParameters_.bodyText]]</div>
-</div>
+  </div>
 
-<div id="actionRow">
+  <div id="actionRow">
     <paper-spinner-lite active="[[acceptButtonClicked_]]"></paper-spinner-lite>
     <div class="action-container">
       <cr-button id="acceptButton" class="action-button" on-click="onAccept_"
@@ -138,4 +140,5 @@
         [[interceptionParameters_.cancelButtonLabel]]
       </cr-button>
     </div>
+  </div>
 </div>

chrome/browser/resources/signin/profile_customization/profile_customization_app.html

 <style include="signin-dialog-shared">
-  :host {
+  #customizeDialog {
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -80,8 +80,7 @@
   }
 
   #lineSeparator {
-    border-top: 1px solid var(--google-grey-refresh-100);
-    margin: 0;
+    border-top: 1px solid var(--cr-separator-color);
   }
 
   #pickThemeContainer {
@@ -118,7 +117,9 @@
   }
 </style>
 
-<div id="header">
+<div role="dialog" id="customizeDialog" aria-labelledby="headerText"
+    aria-describedby="pickThemeTitle">
+  <div id="header">
     <div id="headerText">[[initialProfileName_]]</div>
     <div id="avatarContainer">
       <img id="avatar" alt="" src="[[pictureUrl_]]">
@@ -126,24 +127,25 @@
         <iron-icon class="icon" icon="cr:domain"></iron-icon>
       </div>
     </div>
-</div>
+  </div>
 
-<cr-input id="nameInput" pattern=".*\\S.*" value="{{profileName_}}"
+  <cr-input id="nameInput" pattern=".*\\S.*" value="{{profileName_}}"
     auto-validate required spellcheck="false">
-</cr-input>
+  </cr-input>
 
-<hr id="lineSeparator">
+  <div id="lineSeparator"></div>
 
-<div id="pickThemeContainer">
+  <div id="pickThemeContainer">
     <div id="pickThemeTitle">$i18n{profileCustomizationPickThemeTitle}</div>
     <cr-customize-themes id="themeSelector" auto-confirm-theme-changes>
     </cr-customize-themes>
-</div>
+  </div>
 
-<div class="action-container">
+  <div class="action-container">
     <cr-button id="doneButton" class="action-button"
         disabled="[[isDoneButtonDisabled_(profileName_)]]"
         on-click="onDoneCustomizationClicked_" autofocus>
       $i18n{profileCustomizationDoneLabel}
     </cr-button>
-<div>
+  <div>
+</div>

chrome/browser/resources/signin/profile_customization/profile_customization_app.js

@@ -5,6 +5,7 @@
 import 'chrome://resources/cr_components/customize_themes/customize_themes.js';
 import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 import 'chrome://resources/cr_elements/cr_input/cr_input.m.js';
+import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import 'chrome://resources/cr_elements/icons.m.js';
 import './strings.m.js';

chrome/browser/ui/views/profiles/dice_web_signin_interception_bubble_view.cc

@@ -146,6 +146,7 @@ DiceWebSigninInterceptionBubbleView::DiceWebSigninInterceptionBubbleView(
                                          ->GetWebUI()
                                          ->GetController()
                                          ->GetAs<DiceWebSigninInterceptUI>();
+  SetInitiallyFocusedView(web_view.get());
   DCHECK(web_ui);
   // Unretained is fine because this outlives the inner web UI.
   web_ui->Initialize(

chrome/browser/ui/views/profiles/profile_customization_bubble_view.cc

@@ -54,6 +54,7 @@ ProfileCustomizationBubbleView::ProfileCustomizationBubbleView(
                                        ->GetWebUI()
                                        ->GetController()
                                        ->GetAs<ProfileCustomizationUI>();
+  SetInitiallyFocusedView(web_view.get());
   DCHECK(web_ui);
   web_ui->Initialize(
       base::BindOnce(&ProfileCustomizationBubbleView::OnDoneButtonClicked,