[ChromeVox] Update bluetooth pin entry style and autofocus

Update ChromeVox bluetooth pin entry style for pairing to a bluetooth
braille display with pin code. Also automatically focus the pin field
upon pairing request from a bluetooth braille display with pin code.

Screenshot: https://screenshot.googleplex.com/ZYVEXuK6uKjUzim

Fixed: 297276124
AX-Relnotes: Automatically focus the PIN code text box on pairing to a Bluetooth Braille display with PIN code.
Change-Id: I27934caae7a3d4aff1acd19052e687a24f10acb9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4809123
Reviewed-by: Anastasia Helfinstein <anastasi@google.com>
Commit-Queue: Josiah Krutz <josiahk@google.com>
Reviewed-by: Wes Okuhara <wesokuhara@google.com>
Auto-Submit: Josiah Krutz <josiahk@google.com>
Cr-Commit-Position: refs/heads/main@{#1188711}

chrome/browser/resources/ash/settings/os_a11y_page/bluetooth_braille_display_ui.html

@@ -12,6 +12,16 @@
     min-height: var(--cr-section-min-height);
   }
 
+  #pinContainer {
+    align-items: baseline;
+    display: flex;
+    height: 32px;
+  }
+
+  #pinLabel {
+    margin-inline-end: var(--cr-section-padding);
+  }
+
   .controls {
     align-items: center;
     display: flex;
@@ -32,9 +42,16 @@
 <div class="container">
   <span class="label">$i18n{chromeVoxBluetoothBrailleDisplaySelectLabel}</span>
   <template is="dom-if" if="[[inPinMode_]]">
-    <div class="container">
-      $i18n{chromeVoxBluetoothBrailleDisplayPincodeLabel}
-      <cr-input type="text" on-change="onPincodeChanged_"></cr-input>
+    <div id="pinContainer">
+      <div id="pinLabel" class="controls">
+        $i18n{chromeVoxBluetoothBrailleDisplayPincodeLabel}
+      </div>
+      <cr-input
+          id="pinCode"
+          aria-label="$i18n{chromeVoxBluetoothBrailleDisplayPincodeLabel}"
+          type="text"
+          on-change="onPincodeChanged_">
+      </cr-input>
     </div>
   </template>
   <template is="dom-if" if="[[!inPinMode_]]">

chrome/browser/resources/ash/settings/os_a11y_page/bluetooth_braille_display_ui.ts

@@ -11,6 +11,7 @@ import 'chrome://resources/cr_components/localized_link/localized_link.js';
 import 'chrome://resources/cr_elements/cr_shared_vars.css.js';
 import '../settings_shared.css.js';
 
+import {afterNextRender} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {DropdownMenuOptionList, SettingsDropdownMenuElement} from '/shared/settings/controls/settings_dropdown_menu.js';
 import {PrefsMixin} from 'chrome://resources/cr_components/settings_prefs/prefs_mixin.js';
 import {CrButtonElement} from 'chrome://resources/cr_elements/cr_button/cr_button.js';
@@ -154,6 +155,11 @@ export class BluetoothBrailleDisplayUiElement extends
     this.pincodeTimeoutId_ = setTimeout(() => {
       this.inPinMode_ = false;
     }, PINCODE_TIMEOUT_MS);
+
+    // Focus pincode input (after it gets added).
+    afterNextRender(this, () => {
+      this.shadowRoot!.querySelector<CrInputElement>('#pinCode')!.focus();
+    });
   }
 
   private async updateControls_() {