[Passwords Import] Focus on first actionable element

Bug: 1440694 Change-Id: I5e24869d6c6becaec6ee93038327e7c51003ae9e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4482441 Reviewed-by: Viktor Semeniuk <vsemeniuk@google.com> Commit-Queue: Andrii Natiahlyi <natiahlyi@google.com> Cr-Commit-Position: refs/heads/main@{#1136553}
blueboxd · Apr 27, 2023 · 80f31c7 · 80f31c7
1 parent 5b68321
commit 80f31c7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/chrome/browser/resources/settings/autofill_page/passwords_import_dialog.html b/chrome/browser/resources/settings/autofill_page/passwords_import_dialog.html
@@ -150,9 +150,7 @@
   <div slot="body">
     <select class="md-select" id="storePicker"
         aria-description="$i18n{importPasswordsStorePickerA11yDescription}"
-        hidden="[[!shouldShowStorePicker_(isAccountStoreUser, dialogState)]]"
-        autofocus="[[shouldShowStorePicker_(isAccountStoreUser,
-          dialogState)]]">
+        hidden="[[!shouldShowStorePicker_(isAccountStoreUser, dialogState)]]">
       <option value="[[storeOptionEnum_.ACCOUNT]]">
         [[getStoreOptionAccountText_(accountEmail, dialogState)]]
       </option>

diff --git a/chrome/browser/resources/settings/autofill_page/passwords_import_dialog.ts b/chrome/browser/resources/settings/autofill_page/passwords_import_dialog.ts
@@ -22,9 +22,10 @@ import {CrCheckboxElement} from 'chrome://resources/cr_elements/cr_checkbox/cr_c
 import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.js';
 import {I18nMixin} from 'chrome://resources/cr_elements/i18n_mixin.js';
 import {assert, assertNotReached} from 'chrome://resources/js/assert_ts.js';
+import {focusWithoutInk} from 'chrome://resources/js/focus_without_ink.js';
 import {sanitizeInnerHtml} from 'chrome://resources/js/parse_html_subset.js';
 import {PluralStringProxyImpl} from 'chrome://resources/js/plural_string_proxy.js';
-import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {afterNextRender, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {loadTimeData} from '../i18n_setup.js';
 
@@ -106,7 +107,10 @@ export class PasswordsImportDialogElement extends
 
   static get properties() {
     return {
-      dialogState: Number,
+      dialogState: {
+        type: Number,
+        observer: 'focusOnFirstActionableItem_',
+      },
 
       importDialogStateEnum_: {
         type: Object,
@@ -205,6 +209,24 @@ export class PasswordsImportDialogElement extends
     this.dialogState = ImportDialogState.START;
   }
 
+  private focusOnFirstActionableItem_() {
+    afterNextRender(this, () => {
+      let elementToFocus = this.$.close as HTMLElement;
+      if (this.isState_(ImportDialogState.CONFLICTS)) {
+        const firstCheckbox =
+            this.$.conflictsList.querySelector('cr-checkbox') as HTMLElement;
+        if (firstCheckbox) {
+          elementToFocus = firstCheckbox;
+        }
+      } else if (!this.shouldHideDeleteFileOption_()) {
+        elementToFocus = this.$.deleteFileOption as HTMLElement;
+      } else if (this.shouldShowStorePicker_()) {
+        elementToFocus = this.$.storePicker as HTMLElement;
+      }
+      focusWithoutInk(elementToFocus);
+    });
+  }
+
   private computeConflictsListClass_(): string {
     return this.inProgress_ ? 'disabled-conflicts-list' : '';
   }
@@ -376,7 +398,6 @@ export class PasswordsImportDialogElement extends
       default:
         assertNotReached();
     }
-    this.$.close.focus();
   }
 
   private async handleSuccess_() {
@@ -418,8 +439,6 @@ export class PasswordsImportDialogElement extends
       this.descriptionText_ = sanitizeInnerHtml(descriptionText);
     }
     this.dialogState = ImportDialogState.SUCCESS;
-
-    this.$.close.focus();
   }
 
   private getStoreOptionAccountText_(): string {