[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,33 +109,36 @@
   }
 </style>
 
-<div id="header">
-  <div id="headerText">[[interceptionParameters_.headerText]]</div>
-  <div id="avatar-container">
-    <img id="avatar" alt=""
-        src="[[interceptionParameters_.interceptedAccount.pictureUrl]]">
-    <div class="work-badge" id="badge"
-        hidden="[[!interceptionParameters_.interceptedAccount.isManaged]]">
-      <iron-icon class="icon" icon="cr:domain"></iron-icon>
+<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=""
+          src="[[interceptionParameters_.interceptedAccount.pictureUrl]]">
+      <div class="work-badge" id="badge"
+          hidden="[[!interceptionParameters_.interceptedAccount.isManaged]]">
+        <iron-icon class="icon" icon="cr:domain"></iron-icon>
+      </div>
     </div>
   </div>
-</div>
 
-<div id="body">
-  <div id="title">[[interceptionParameters_.bodyTitle]]</div>
-  <div id="contents">[[interceptionParameters_.bodyText]]</div>
-</div>
+  <div id="body">
+    <div id="title">[[interceptionParameters_.bodyTitle]]</div>
+    <div id="contents">[[interceptionParameters_.bodyText]]</div>
+  </div>
 
-<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_"
-        disabled="[[acceptButtonClicked_]]" autofocus>
-      [[interceptionParameters_.confirmButtonLabel]]
-    </cr-button>
-    <cr-button id="cancelButton" on-click="onCancel_"
-        disabled="[[acceptButtonClicked_]]">
-      [[interceptionParameters_.cancelButtonLabel]]
-    </cr-button>
+  <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_"
+          disabled="[[acceptButtonClicked_]]" autofocus>
+        [[interceptionParameters_.confirmButtonLabel]]
+      </cr-button>
+      <cr-button id="cancelButton" on-click="onCancel_"
+          disabled="[[acceptButtonClicked_]]">
+        [[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,32 +117,35 @@
   }
 </style>
 
-<div id="header">
-  <div id="headerText">[[initialProfileName_]]</div>
-  <div id="avatarContainer">
-    <img id="avatar" alt="" src="[[pictureUrl_]]">
-    <div class="work-badge" id="badge" hidden="[[!isManaged_]]">
-      <iron-icon class="icon" icon="cr:domain"></iron-icon>
+<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_]]">
+      <div class="work-badge" id="badge" hidden="[[!isManaged_]]">
+        <iron-icon class="icon" icon="cr:domain"></iron-icon>
+      </div>
     </div>
   </div>
-</div>
 
-<cr-input id="nameInput" pattern=".*\\S.*" value="{{profileName_}}"
-  auto-validate required spellcheck="false">
-</cr-input>
+  <cr-input id="nameInput" pattern=".*\\S.*" value="{{profileName_}}"
+    auto-validate required spellcheck="false">
+  </cr-input>
 
-<hr id="lineSeparator">
+  <div id="lineSeparator"></div>
 
-<div id="pickThemeContainer">
-  <div id="pickThemeTitle">$i18n{profileCustomizationPickThemeTitle}</div>
-  <cr-customize-themes id="themeSelector" auto-confirm-theme-changes>
-  </cr-customize-themes>
-</div>
+  <div id="pickThemeContainer">
+    <div id="pickThemeTitle">$i18n{profileCustomizationPickThemeTitle}</div>
+    <cr-customize-themes id="themeSelector" auto-confirm-theme-changes>
+    </cr-customize-themes>
+  </div>
 
-<div class="action-container">
-  <cr-button id="doneButton" class="action-button"
-      disabled="[[isDoneButtonDisabled_(profileName_)]]"
-      on-click="onDoneCustomizationClicked_" autofocus>
-    $i18n{profileCustomizationDoneLabel}
-  </cr-button>
-<div>
+  <div class="action-container">
+    <cr-button id="doneButton" class="action-button"
+        disabled="[[isDoneButtonDisabled_(profileName_)]]"
+        on-click="onDoneCustomizationClicked_" autofocus>
+      $i18n{profileCustomizationDoneLabel}
+    </cr-button>
+  <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,