[Nearby] Fix device name focus issue in onboarding sharesheet

- In the nearby onboarding sharesheet, the device name field is
not autofocused when the page appears. To fix the issue, This CL
adds a call to RequestFocus() when building up the sharesheet's UI.

Bug: 1156395
Change-Id: Ibd3db9a5e0d51521a259b38f70cd741d6c1597c4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2582815
Commit-Queue: Michael Checo <michaelcheco@google.com>
Reviewed-by: James Vecore <vecore@google.com>
Cr-Commit-Position: refs/heads/master@{#837038}

chrome/browser/nearby_sharing/sharesheet/nearby_share_action.cc

@@ -106,6 +106,10 @@ void NearbyShareAction::LaunchAction(
   // load chrome://nearby into the webview
   web_view->LoadInitialURL(GURL(chrome::kChromeUINearbyShareURL));
 
+  // Without requesting focus, the sharesheet will launch in an unfocused state
+  // which raises accessibility issues with the "Device name" input.
+  web_view->RequestFocus();
+
   auto* webui = web_view->GetWebContents()->GetWebUI();
   DCHECK(webui != nullptr);
 

chrome/browser/resources/nearby_share/shared/nearby_onboarding_page.js

@@ -27,21 +27,9 @@ Polymer({
 
   listeners: {
     'next': 'onNext_',
+    'view-enter-start': 'onViewEnterStart_',
   },
 
-  /** @override */
-  attached() {
-    // Manually focus the device name field. Typically we would use the
-    // autofocus attribute, but because the view is initially hidden via CSS the
-    // input is not present on page load. We instead set focus in an async
-    // function.
-    const deviceName = this.$$('#deviceName');
-    if (deviceName) {
-      setTimeout(function() {
-        deviceName.focus();
-      }, 0);
-    }
-  },
 
   /**
    * @private
@@ -58,6 +46,11 @@ Polymer({
         });
   },
 
+  /** @private */
+  onViewEnterStart_() {
+    this.$$('#deviceName').focus();
+  },
+
   /** @private */
   onDeviceNameInput_() {
     nearby_share.getNearbyShareSettings()

chrome/test/data/webui/nearby_share/shared/nearby_onboarding_page_test.js

@@ -39,6 +39,7 @@ suite('nearby-onboarding-page', function() {
       allowedContacts: [],
     };
     document.body.appendChild(element);
+    element.fire('view-enter-start');
   });
 
   test('Renders onboarding page', async function() {