[filesapp] Make Cancel the default button of the delete confirm dialog

Delete is the default button of the delete confirm dialog. Change that
to the Cancel button to resolve issue 1104191. Add / update tests:

 test.toolbarDeleteButtonOpensDeleteConfirmDialog (new test)

  • use to toolbar Delete button to open the delete confirm dialog
  • verify the dialog Cancel button is focused by default

 testcase.toolbarDeleteButtonKeepFocus (update test)

  • use to toolbar Delete button to open the delete confirm dialog
  • click the dialog Cancel button to close the dialog
  • verify the focus returns to toolbar Delete button: replace the
    existing verification code with a robust CSS :focus selector
  • update comments

Test: browser_tests --gtest_filter="*FilesAppBrowserTests*"
Bug: 1104191
Change-Id: I2465f75b85edd64d9df669d4410b3f82e3edeebc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2690621
Reviewed-by: Jeremie Boulic <jboulic@chromium.org>
Reviewed-by: Alex Danilo <adanilo@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#853416}
diff --git a/chrome/browser/chromeos/file_manager/file_manager_browsertest.cc b/chrome/browser/chromeos/file_manager/file_manager_browsertest.cc
index 0e99baa4..a962d43 100644
--- a/chrome/browser/chromeos/file_manager/file_manager_browsertest.cc
+++ b/chrome/browser/chromeos/file_manager/file_manager_browsertest.cc
@@ -487,6 +487,7 @@
     FilesAppBrowserTest,
     ::testing::Values(
         TestCase("toolbarDeleteWithMenuItemNoEntrySelected"),
+        TestCase("toolbarDeleteButtonOpensDeleteConfirmDialog"),
         TestCase("toolbarDeleteButtonKeepFocus"),
         TestCase("toolbarDeleteEntry").InGuestMode(),
         TestCase("toolbarDeleteEntry"),
diff --git a/ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js b/ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js
index 4543f79..1aa47e6 100644
--- a/ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js
+++ b/ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js
@@ -108,6 +108,7 @@
      */
     this.deleteConfirmDialog = new FilesConfirmDialog(this.element);
     this.deleteConfirmDialog.setOkLabel(str('DELETE_BUTTON_LABEL'));
+    this.deleteConfirmDialog.focusCancelButton = true;
 
     /**
      * Confirm dialog for file move operation.
diff --git a/ui/file_manager/integration_tests/file_manager/toolbar.js b/ui/file_manager/integration_tests/file_manager/toolbar.js
index 6eed02b..efa22dd 100644
--- a/ui/file_manager/integration_tests/file_manager/toolbar.js
+++ b/ui/file_manager/integration_tests/file_manager/toolbar.js
@@ -25,8 +25,31 @@
 };
 
 /**
- * Tests Delete button keeps focus after closing confirmation
- * dialog.
+ * Tests that the toolbar Delete button opens the delete confirm dialog and
+ * that the dialog cancel button has the focus by default.
+ */
+testcase.toolbarDeleteButtonOpensDeleteConfirmDialog = async () => {
+  // Open Files app.
+  const appId =
+      await setupAndWaitUntilReady(RootPath.DRIVE, [], [ENTRIES.desktop]);
+
+  // Select My Desktop Background.png
+  chrome.test.assertTrue(await remoteCall.callRemoteTestUtil(
+      'selectFile', appId, [ENTRIES.desktop.nameText]));
+
+  // Click the toolbar Delete button.
+  await remoteCall.simulateUiClick(appId, '#delete-button');
+
+  // Check: the delete confirm dialog should appear.
+  await remoteCall.waitForElement(appId, '.cr-dialog-container.shown');
+
+  // Check: the dialog cancel button should be focused by default.
+  await remoteCall.waitForElement(appId, 'button.cr-dialog-cancel:focus');
+};
+
+/**
+ * Tests that the toolbar Delete button keeps focus after the delete confirm
+ * dialog is closed.
  */
 testcase.toolbarDeleteButtonKeepFocus = async () => {
   // Open Files app.
@@ -37,18 +60,20 @@
   chrome.test.assertTrue(await remoteCall.callRemoteTestUtil(
       'selectFile', appId, [ENTRIES.desktop.nameText]));
 
+  // Click the toolbar Delete button.
   await remoteCall.simulateUiClick(appId, '#delete-button');
 
-  // Confirm that the confirmation dialog is shown.
+  // Check: the Delete button should lose focus.
+  await remoteCall.waitForElementLost(appId, '#delete-button:focus');
+
+  // Wait until the delete confirm dialog appears.
   await remoteCall.waitForElement(appId, '.cr-dialog-container.shown');
 
-  // Press cancel button.
+  // Click the dialog cancel button.
   await remoteCall.waitAndClickElement(appId, 'button.cr-dialog-cancel');
 
-  // Check focused element is Delete button.
-  const focusedElement =
-      await remoteCall.callRemoteTestUtil('getActiveElement', appId, []);
-  chrome.test.assertEq('delete-button', focusedElement.attributes['id']);
+  // Check: the toolbar Delete button should be focused.
+  await remoteCall.waitForElement(appId, '#delete-button:focus');
 };
 
 /**
@@ -81,7 +106,6 @@
   chrome.test.assertTrue(await remoteCall.callRemoteTestUtil(
       'selectFile', appId, ['My Desktop Background.png']));
 
-
   // Click delete button in the toolbar.
   chrome.test.assertTrue(await remoteCall.callRemoteTestUtil(
       'fakeMouseClick', appId, ['#delete-button']));