Merge "Get rid of DIPolymerElement and KeyboardShortcutMixin"
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-bulk-vote-flow/gr-change-list-bulk-vote-flow.ts b/polygerrit-ui/app/elements/change-list/gr-change-list-bulk-vote-flow/gr-change-list-bulk-vote-flow.ts
index 7bdb741..0bbddc4 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-bulk-vote-flow/gr-change-list-bulk-vote-flow.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-bulk-vote-flow/gr-change-list-bulk-vote-flow.ts
@@ -38,6 +38,7 @@
 import {allSettled} from '../../../utils/async-util';
 import {pluralize} from '../../../utils/string-util';
 import {GerritNav} from '../../core/gr-navigation/gr-navigation';
+import {GrDialog} from '../../shared/gr-dialog/gr-dialog';
 
 @customElement('gr-change-list-bulk-vote-flow')
 export class GrChangeListBulkVoteFlow extends LitElement {
@@ -53,6 +54,8 @@
 
   @query('#actionOverlay') actionOverlay!: GrOverlay;
 
+  @query('gr-dialog') dialog?: GrDialog;
+
   @state() account?: AccountInfo;
 
   static override get styles() {
@@ -153,10 +156,7 @@
       permittedLabels
     ).filter(label => !triggerLabels.some(l => l.name === label.name));
     return html`
-      <gr-button
-        id="voteFlowButton"
-        flatten
-        @click=${() => this.actionOverlay.open()}
+      <gr-button id="voteFlowButton" flatten @click=${this.openOverlay}
         >Vote</gr-button
       >
       <gr-overlay id="actionOverlay" with-backdrop="">
@@ -219,6 +219,14 @@
     }
   }
 
+  private async openOverlay() {
+    await this.actionOverlay.open();
+    this.actionOverlay.setFocusStops({
+      start: queryAndAssert(this.dialog, 'header'),
+      end: queryAndAssert(this.dialog, 'footer'),
+    });
+  }
+
   private renderErrors() {
     if (getOverallStatus(this.progressByChange) !== ProgressStatus.FAILED) {
       return nothing;
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-reviewer-flow/gr-change-list-reviewer-flow.ts b/polygerrit-ui/app/elements/change-list/gr-change-list-reviewer-flow/gr-change-list-reviewer-flow.ts
index ea51514..230244e3 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-reviewer-flow/gr-change-list-reviewer-flow.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-reviewer-flow/gr-change-list-reviewer-flow.ts
@@ -37,10 +37,11 @@
 } from '../../shared/gr-account-list/gr-account-list';
 import '@polymer/iron-icon/iron-icon';
 import {getReplyByReason} from '../../../utils/attention-set-util';
-import {intersection} from '../../../utils/common-util';
+import {intersection, queryAndAssert} from '../../../utils/common-util';
 import {accountOrGroupKey} from '../../../utils/account-util';
 import {ValueChangedEvent} from '../../../types/events';
 import {fireAlert, fireReload} from '../../../utils/event-util';
+import {GrDialog} from '../../shared/gr-dialog/gr-dialog';
 
 @customElement('gr-change-list-reviewer-flow')
 export class GrChangeListReviewerFlow extends LitElement {
@@ -88,6 +89,8 @@
 
   @query('gr-overlay#confirm-cc') private ccConfirmOverlay?: GrOverlay;
 
+  @query('gr-dialog') dialog?: GrDialog;
+
   private readonly reportingService = getAppContext().reportingService;
 
   private getBulkActionsModel = resolve(this, bulkActionsModelToken);
@@ -360,10 +363,15 @@
       .map(reviewer => getDisplayName(this.serverConfig, reviewer));
   }
 
-  private openOverlay() {
+  private async openOverlay() {
     this.resetFlow();
     this.isOverlayOpen = true;
-    this.overlay?.open();
+    // Must await the overlay opening because the dialog is lazily rendered.
+    await this.overlay?.open();
+    this.overlay?.setFocusStops({
+      start: queryAndAssert(this.dialog, 'header'),
+      end: queryAndAssert(this.dialog, 'footer'),
+    });
   }
 
   private closeOverlay() {
diff --git a/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.ts b/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.ts
index 5317832..0dff8c3 100644
--- a/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.ts
+++ b/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.ts
@@ -71,10 +71,10 @@
     // TODO(TS): to avoid ts error for:
     // Only public and protected methods of the base class are accessible
     // via the 'super' keyword.
-    // we call IronFocsablesHelper directly here
-    // Currently IronFocsablesHelper is not exported from iron-focusables-helper
-    // as it should so we use Polymer.IronFocsablesHelper here instead
-    // (can not use the IronFocsablesHelperClass
+    // we call IronFocusablesHelper directly here
+    // Currently IronFocusablesHelper is not exported from iron-focusables-helper
+    // as it should so we use Polymer.IronFocusablesHelper here instead
+    // (can not use the IronFocusablesHelperClass
     // in case different behavior due to singleton)
     // once the type contains the exported member,
     // should replace with: