From 7b2e860018be5c221db3b321038128725322e70f Mon Sep 17 00:00:00 2001
From: YuhanYang <yyhyyh@google.com>
Date: Fri, 17 Mar 2023 19:17:47 +0000
Subject: [PATCH] Settings Split: Use DeepLinkingMixin on per device pages

Set auto focus on the element when directed from existing search tags.

Tested on VM, and browser_tests

Bug: b/241965700
Change-Id: I0a9997f7c6778b57ea4470ae3e0035f9f3a4c8f0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4335985
Commit-Queue: Yuhan Yang <yyhyyh@google.com>
Reviewed-by: David Padlipsky <dpad@google.com>
Cr-Commit-Position: refs/heads/main@{#1118810}
---
 .../per_device_keyboard_subsection.ts         |  2 +-
 .../device_page/per_device_mouse.html         |  6 ++-
 .../per_device_mouse_subsection.html          | 15 ++++--
 .../per_device_mouse_subsection.ts            | 42 ++++++++++++++-
 .../per_device_pointing_stick.html            |  6 ++-
 .../per_device_pointing_stick_subsection.ts   | 38 ++++++++++++-
 .../device_page/per_device_touchpad.html      |  6 ++-
 .../per_device_touchpad_subsection.html       | 25 ++++++---
 .../per_device_touchpad_subsection.ts         | 43 ++++++++++++++-
 .../chromeos/os_settings_v3_browsertest.js    | 13 +++--
 .../per_device_mouse_subsection_test.js       | 52 +++++++++++++++++-
 ...r_device_pointing_stick_subsection_test.js | 52 +++++++++++++++++-
 .../per_device_touchpad_subsection_test.js    | 53 ++++++++++++++++++-
 13 files changed, 319 insertions(+), 34 deletions(-)

diff --git a/chrome/browser/resources/settings/chromeos/device_page/per_device_keyboard_subsection.ts b/chrome/browser/resources/settings/chromeos/device_page/per_device_keyboard_subsection.ts
index de2782e1f1e32..c4ced0d2d5771 100644
--- a/chrome/browser/resources/settings/chromeos/device_page/per_device_keyboard_subsection.ts
+++ b/chrome/browser/resources/settings/chromeos/device_page/per_device_keyboard_subsection.ts
@@ -174,7 +174,7 @@ export class SettingsPerDeviceKeyboardSubsectionElement extends
       return;
     }
 
-    // If there is more than one keyboard, focus on the first one.
+    // If multiple keyboards are available, focus on the first one.
     if (this.keyboardIndex === 0) {
       this.attemptDeepLink();
     }
diff --git a/chrome/browser/resources/settings/chromeos/device_page/per_device_mouse.html b/chrome/browser/resources/settings/chromeos/device_page/per_device_mouse.html
index 8a213e3fcb954..bb499f59d7326 100644
--- a/chrome/browser/resources/settings/chromeos/device_page/per_device_mouse.html
+++ b/chrome/browser/resources/settings/chromeos/device_page/per_device_mouse.html
@@ -1,4 +1,6 @@
-<template is="dom-repeat" items="[[mice]]" as="mouse" restamp>
-  <settings-per-device-mouse-subsection mouse="[[mouse]]">
+<template is="dom-repeat" items="[[mice]]"
+    as="mouse" index-as="index" restamp>
+  <settings-per-device-mouse-subsection mouse="[[mouse]]"
+      mouse-index="[[index]]">
   </settings-per-device-mouse-subsection>
 </template>
diff --git a/chrome/browser/resources/settings/chromeos/device_page/per_device_mouse_subsection.html b/chrome/browser/resources/settings/chromeos/device_page/per_device_mouse_subsection.html
index e6264d69d75dc..00a8f528ca374 100644
--- a/chrome/browser/resources/settings/chromeos/device_page/per_device_mouse_subsection.html
+++ b/chrome/browser/resources/settings/chromeos/device_page/per_device_mouse_subsection.html
@@ -24,13 +24,15 @@ <h2>[[mouse.name]]</h2>
       <settings-dropdown-menu id="mouseSwapButtonDropdown"
           aria-labeledby="mouseSwapButtonLabel"
           pref="{{primaryRightPref}}"
-          menu-options="[[swapPrimaryOptions]]">
+          menu-options="[[swapPrimaryOptions]]"
+          deep-link-focus-id$="[[Setting.kMouseSwapPrimaryButtons]]">
       </settings-dropdown-menu>
     </div>
     <settings-toggle-button id="mouseAcceleration"
         class="hr"
         pref="{{accelerationPref}}"
-        label="$i18n{mouseAccelerationLabel}">
+        label="$i18n{mouseAccelerationLabel}"
+        deep-link-focus-id$="[[Setting.kMouseAcceleration]]">
     </settings-toggle-button>
     <div class="settings-box">
       <div class="start" id="mouseSpeedLabel" aria-hidden="true">
@@ -41,14 +43,16 @@ <h2>[[mouse.name]]</h2>
           ticks="[[sensitivityValues_]]"
           label-aria="$i18n{mouseSpeed}"
           label-min="$i18n{pointerSlow}"
-          label-max="$i18n{pointerFast}">
+          label-max="$i18n{pointerFast}"
+          deep-link-focus-id$="[[Setting.kMouseSpeed]]">
       </settings-slider>
     </div>
     <template is="dom-if" if="[[allowScrollSettings_]]" restamp>
       <settings-toggle-button id="mouseScrollAcceleration"
           class="hr"
           pref="{{scrollAccelerationPref}}"
-          label="$i18n{mouseScrollAccelerationLabel}">
+          label="$i18n{mouseScrollAccelerationLabel}"
+          deep-link-focus-id$="[[Setting.kMouseScrollAcceleration]]">
       </settings-toggle-button>
       <div class="settings-box">
         <div class="start" id="mouseScrollSpeedLabel" aria-hidden="true">
@@ -75,7 +79,8 @@ <h2>[[mouse.name]]</h2>
       </div>
       <cr-toggle id="mouseReverseScroll"
           checked="{{reverseScrollValue}}"
-          aria-labelledby="enableMouseReverseScrollingLabel">
+          aria-labelledby="enableMouseReverseScrollingLabel"
+          deep-link-focus-id$="[[Setting.kMouseReverseScrolling]]">
       </cr-toggle>
     </div>
   </div>
diff --git a/chrome/browser/resources/settings/chromeos/device_page/per_device_mouse_subsection.ts b/chrome/browser/resources/settings/chromeos/device_page/per_device_mouse_subsection.ts
index 3cac63ea60fcd..c6e2fd460b082 100644
--- a/chrome/browser/resources/settings/chromeos/device_page/per_device_mouse_subsection.ts
+++ b/chrome/browser/resources/settings/chromeos/device_page/per_device_mouse_subsection.ts
@@ -23,11 +23,20 @@ import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
 import {PolymerElementProperties} from 'chrome://resources/polymer/v3_0/polymer/interfaces.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {DeepLinkingMixin} from '../deep_linking_mixin.js';
+import {Setting} from '../mojom-webui/setting.mojom-webui.js';
+import {routes} from '../os_settings_routes.js';
+import {RouteObserverMixin} from '../route_observer_mixin.js';
+import {Route} from '../router.js';
+
 import {getInputDeviceSettingsProvider} from './input_device_mojo_interface_provider.js';
 import {InputDeviceSettingsProviderInterface, Mouse} from './input_device_settings_types.js';
 import {getTemplate} from './per_device_mouse_subsection.html.js';
 
-export class SettingsPerDeviceMouseSubsectionElement extends PolymerElement {
+const SettingsPerDeviceMouseSubsectionElementBase =
+    DeepLinkingMixin(RouteObserverMixin(PolymerElement));
+export class SettingsPerDeviceMouseSubsectionElement extends
+    SettingsPerDeviceMouseSubsectionElementBase {
   static get is(): string {
     return 'settings-per-device-mouse-subsection';
   }
@@ -140,6 +149,24 @@ export class SettingsPerDeviceMouseSubsectionElement extends PolymerElement {
       mouse: {
         type: Object,
       },
+
+      /**
+       * Used by DeepLinkingMixin to focus this page's deep links.
+       */
+      supportedSettingIds: {
+        type: Object,
+        value: () => new Set<Setting>([
+          Setting.kMouseSwapPrimaryButtons,
+          Setting.kMouseReverseScrolling,
+          Setting.kMouseAcceleration,
+          Setting.kMouseScrollAcceleration,
+          Setting.kMouseSpeed,
+        ]),
+      },
+
+      mouseIndex: {
+        type: Number,
+      },
     };
   }
 
@@ -155,6 +182,18 @@ export class SettingsPerDeviceMouseSubsectionElement extends PolymerElement {
     ];
   }
 
+  override currentRouteChanged(route: Route): void {
+    // Does not apply to this page.
+    if (route !== routes.PER_DEVICE_MOUSE) {
+      return;
+    }
+
+    // If multiple mice are available, focus on the first one.
+    if (this.mouseIndex === 0) {
+      this.attemptDeepLink();
+    }
+  }
+
   private mouse: Mouse;
   private primaryRightPref: chrome.settingsPrivate.PrefObject;
   private accelerationPref: chrome.settingsPrivate.PrefObject;
@@ -165,6 +204,7 @@ export class SettingsPerDeviceMouseSubsectionElement extends PolymerElement {
   private isInitialized: boolean = false;
   private inputDeviceSettingsProvider: InputDeviceSettingsProviderInterface =
       getInputDeviceSettingsProvider();
+  private mouseIndex: number;
 
   private updateSettingsToCurrentPrefs(): void {
     this.set('primaryRightPref.value', this.mouse.settings.swapRight);
diff --git a/chrome/browser/resources/settings/chromeos/device_page/per_device_pointing_stick.html b/chrome/browser/resources/settings/chromeos/device_page/per_device_pointing_stick.html
index 3099b2a7cd108..e266bed6e68b1 100644
--- a/chrome/browser/resources/settings/chromeos/device_page/per_device_pointing_stick.html
+++ b/chrome/browser/resources/settings/chromeos/device_page/per_device_pointing_stick.html
@@ -1,5 +1,7 @@
-<template is="dom-repeat" items="[[pointingSticks]]" as="pointingStick" restamp>
+<template is="dom-repeat" items="[[pointingSticks]]"
+    as="pointingStick" index-as="index" restamp>
   <settings-per-device-pointing-stick-subsection
-      pointing-stick="[[pointingStick]]">
+      pointing-stick="[[pointingStick]]"
+      pointing-stick-index="[[index]]">
   </settings-per-device-pointing-stick-subsection>
 </template>
diff --git a/chrome/browser/resources/settings/chromeos/device_page/per_device_pointing_stick_subsection.ts b/chrome/browser/resources/settings/chromeos/device_page/per_device_pointing_stick_subsection.ts
index 05a1b112bb4db..84e85c649f6d0 100644
--- a/chrome/browser/resources/settings/chromeos/device_page/per_device_pointing_stick_subsection.ts
+++ b/chrome/browser/resources/settings/chromeos/device_page/per_device_pointing_stick_subsection.ts
@@ -24,13 +24,18 @@ import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
 import {PolymerElementProperties} from 'chrome://resources/polymer/v3_0/polymer/interfaces.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {DeepLinkingMixin} from '../deep_linking_mixin.js';
+import {Setting} from '../mojom-webui/setting.mojom-webui.js';
+import {routes} from '../os_settings_routes.js';
+import {RouteObserverMixin} from '../route_observer_mixin.js';
+import {Route} from '../router.js';
+
 import {getInputDeviceSettingsProvider} from './input_device_mojo_interface_provider.js';
 import {InputDeviceSettingsProviderInterface, PointingStick} from './input_device_settings_types.js';
 import {getTemplate} from './per_device_pointing_stick_subsection.html.js';
 
 const SettingsPerDevicePointingStickSubsectionElementBase =
-    I18nMixin(PolymerElement);
-
+    DeepLinkingMixin(RouteObserverMixin(I18nMixin(PolymerElement)));
 export class SettingsPerDevicePointingStickSubsectionElement extends
     SettingsPerDevicePointingStickSubsectionElementBase {
   static get is(): string {
@@ -106,6 +111,22 @@ export class SettingsPerDevicePointingStickSubsectionElement extends
       },
 
       pointingStick: {type: Object},
+
+      /**
+       * Used by DeepLinkingMixin to focus this page's deep links.
+       */
+      supportedSettingIds: {
+        type: Object,
+        value: () => new Set<Setting>([
+          Setting.kPointingStickAcceleration,
+          Setting.kPointingStickSpeed,
+          Setting.kPointingStickSwapPrimaryButtons,
+        ]),
+      },
+
+      pointingStickIndex: {
+        type: Number,
+      },
     };
   }
 
@@ -118,6 +139,18 @@ export class SettingsPerDevicePointingStickSubsectionElement extends
     ];
   }
 
+  override currentRouteChanged(route: Route): void {
+    // Does not apply to this page.
+    if (route !== routes.PER_DEVICE_POINTING_STICK) {
+      return;
+    }
+
+    // If multiple pointing sticks are available, focus on the first one.
+    if (this.pointingStickIndex === 0) {
+      this.attemptDeepLink();
+    }
+  }
+
   private pointingStick: PointingStick;
   private sensitivityValues: number[];
   private swapPrimaryOptions: number[];
@@ -127,6 +160,7 @@ export class SettingsPerDevicePointingStickSubsectionElement extends
   private isInitialized: boolean = false;
   private inputDeviceSettingsProvider: InputDeviceSettingsProviderInterface =
       getInputDeviceSettingsProvider();
+  private pointingStickIndex: number;
 
   private updateSettingsToCurrentPrefs(): void {
     this.set('primaryRightPref.value', this.pointingStick.settings.swapRight);
diff --git a/chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad.html b/chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad.html
index 1e4289ceb23d4..a535ab9a4a92f 100644
--- a/chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad.html
+++ b/chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad.html
@@ -1,4 +1,6 @@
-<template is="dom-repeat" items="[[touchpads]]" as="touchpad" restamp>
-  <settings-per-device-touchpad-subsection touchpad="[[touchpad]]">
+<template is="dom-repeat" items="[[touchpads]]"
+    as="touchpad" index-as="index" restamp>
+  <settings-per-device-touchpad-subsection
+      touchpad="[[touchpad]]" touchpad-index="[[index]]">
   </settings-per-device-touchpad-subsection>
 </template>
diff --git a/chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad_subsection.html b/chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad_subsection.html
index 4527a184ad381..c4da5fc4b5a6a 100644
--- a/chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad_subsection.html
+++ b/chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad_subsection.html
@@ -19,17 +19,20 @@ <h2>[[getTouchpadName(touchpad.name)]]</h2>
   <div class="subsection">
     <settings-toggle-button id="enableTapToClick"
         pref="{{enableTapToClickPref}}"
-        label="$i18n{touchpadTapToClickEnabledLabel}">
+        label="$i18n{touchpadTapToClickEnabledLabel}"
+        deep-link-focus-id$="[[Setting.kTouchpadTapToClick]]">
     </settings-toggle-button>
     <settings-toggle-button id="enableTapDragging"
         class="hr"
         pref="{{enableTapDraggingPref}}"
-        label="$i18n{tapDraggingLabel}">
+        label="$i18n{tapDraggingLabel}"
+        deep-link-focus-id$="[[Setting.kTouchpadTapDragging]]">
     </settings-toggle-button>
     <settings-toggle-button id="touchpadAcceleration"
         class="hr"
         pref="{{accelerationPref}}"
-        label="$i18n{touchpadAccelerationLabel}">
+        label="$i18n{touchpadAccelerationLabel}"
+        deep-link-focus-id$="[[Setting.kTouchpadAcceleration]]">
     </settings-toggle-button>
     <div class="settings-box">
       <div class="start" id="touchpadSpeedLabel" aria-hidden="true">
@@ -40,14 +43,16 @@ <h2>[[getTouchpadName(touchpad.name)]]</h2>
             ticks="[[sensitivityValues_]]"
             label-aria="$i18n{touchpadSpeed}"
             label-min="$i18n{pointerSlow}"
-            label-max="$i18n{pointerFast}">
+            label-max="$i18n{pointerFast}"
+            deep-link-focus-id$="[[Setting.kTouchpadSpeed]]">
         </settings-slider>
     </div>
     <template is="dom-if" if="[[allowScrollSettings_]]" restamp>
       <settings-toggle-button id="touchpadScrollAcceleration"
           class="hr"
           pref="{{scrollAccelerationPref}}"
-          label="$i18n{touchpadScrollAccelerationLabel}">
+          label="$i18n{touchpadScrollAccelerationLabel}"
+          deep-link-focus-id$="[[Setting.kTouchpadScrollAcceleration]]">
       </settings-toggle-button>
       <div class="settings-box">
         <div class="start" id="touchpadScrollSpeedLabel" aria-hidden="true">
@@ -73,7 +78,9 @@ <h2>[[getTouchpadName(touchpad.name)]]</h2>
             ticks="[[hapticClickSensitivityValues_]]"
             label-aria="$i18n{touchpadHapticClickSensitivityLabel}"
             label-min="$i18n{touchpadHapticLightClickLabel}"
-            label-max="$i18n{touchpadHapticFirmClickLabel}">
+            label-max="$i18n{touchpadHapticFirmClickLabel}"
+            deep-link-focus-id$=
+              "[[Setting.kTouchpadHapticClickSensitivity]]">
         </settings-slider>
       </div>
       <div class="settings-box two-line" id="touchpadHapticFeedbackRow"
@@ -91,7 +98,8 @@ <h2>[[getTouchpadName(touchpad.name)]]</h2>
         </div>
         <cr-toggle id="touchpadHapticFeedbackToggle"
             checked="{{hapticFeedbackValue}}"
-            aria-labelledby="touchpadHapticFeedbackRow">
+            aria-labelledby="touchpadHapticFeedbackRow"
+            deep-link-focus-id$="[[Setting.kTouchpadHapticFeedback]]">
         </cr-toggle>
       </div>
     </template>
@@ -107,7 +115,8 @@ <h2>[[getTouchpadName(touchpad.name)]]</h2>
       </div>
       <cr-toggle id="enableReverseScrollingToggle"
           checked="{{reverseScrollValue}}"
-          aria-labelledby="enableReverseScrollingLabel">
+          aria-labelledby="enableReverseScrollingLabel"
+          deep-link-focus-id$="[[Setting.kTouchpadReverseScrolling]]">
       </cr-toggle>
     </div>
   </div>
diff --git a/chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad_subsection.ts b/chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad_subsection.ts
index 15885bf169085..c052c01e9e603 100644
--- a/chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad_subsection.ts
+++ b/chrome/browser/resources/settings/chromeos/device_page/per_device_touchpad_subsection.ts
@@ -24,13 +24,18 @@ import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
 import {PolymerElementProperties} from 'chrome://resources/polymer/v3_0/polymer/interfaces.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {DeepLinkingMixin} from '../deep_linking_mixin.js';
+import {Setting} from '../mojom-webui/setting.mojom-webui.js';
+import {routes} from '../os_settings_routes.js';
+import {RouteObserverMixin} from '../route_observer_mixin.js';
+import {Route} from '../router.js';
+
 import {getInputDeviceSettingsProvider} from './input_device_mojo_interface_provider.js';
 import {InputDeviceSettingsProviderInterface, Touchpad} from './input_device_settings_types.js';
 import {getTemplate} from './per_device_touchpad_subsection.html.js';
 
 const SettingsPerDeviceTouchpadSubsectionElementBase =
-    I18nMixin(PolymerElement);
-
+    DeepLinkingMixin(RouteObserverMixin(I18nMixin(PolymerElement)));
 export class SettingsPerDeviceTouchpadSubsectionElement extends
     SettingsPerDeviceTouchpadSubsectionElementBase {
   static get is(): string {
@@ -169,6 +174,27 @@ export class SettingsPerDeviceTouchpadSubsectionElement extends
       },
 
       touchpad: {type: Object},
+
+      /**
+       * Used by DeepLinkingMixin to focus this page's deep links.
+       */
+      supportedSettingIds: {
+        type: Object,
+        value: () => new Set<Setting>([
+          Setting.kTouchpadTapToClick,
+          Setting.kTouchpadTapDragging,
+          Setting.kTouchpadReverseScrolling,
+          Setting.kTouchpadAcceleration,
+          Setting.kTouchpadScrollAcceleration,
+          Setting.kTouchpadSpeed,
+          Setting.kTouchpadHapticFeedback,
+          Setting.kTouchpadHapticClickSensitivity,
+        ]),
+      },
+
+      touchpadIndex: {
+        type: Number,
+      },
     };
   }
 
@@ -187,6 +213,18 @@ export class SettingsPerDeviceTouchpadSubsectionElement extends
     ];
   }
 
+  override currentRouteChanged(route: Route): void {
+    // Does not apply to this page.
+    if (route !== routes.PER_DEVICE_TOUCHPAD) {
+      return;
+    }
+
+    // If multiple touchpads are available, focus on the first one.
+    if (this.touchpadIndex === 0) {
+      this.attemptDeepLink();
+    }
+  }
+
   private touchpad: Touchpad;
   private enableTapToClickPref: chrome.settingsPrivate.PrefObject;
   private enableTapDraggingPref: chrome.settingsPrivate.PrefObject;
@@ -200,6 +238,7 @@ export class SettingsPerDeviceTouchpadSubsectionElement extends
   private isInitialized: boolean = false;
   private inputDeviceSettingsProvider: InputDeviceSettingsProviderInterface =
       getInputDeviceSettingsProvider();
+  private touchpadIndex: number;
 
   private updateSettingsToCurrentPrefs(): void {
     this.set(
diff --git a/chrome/test/data/webui/settings/chromeos/os_settings_v3_browsertest.js b/chrome/test/data/webui/settings/chromeos/os_settings_v3_browsertest.js
index 3c897539cd6a4..6f84903fd7d57 100644
--- a/chrome/test/data/webui/settings/chromeos/os_settings_v3_browsertest.js
+++ b/chrome/test/data/webui/settings/chromeos/os_settings_v3_browsertest.js
@@ -449,14 +449,21 @@ TEST_F('OSSettingsCrostiniExtraContainerPageV3Test', 'AllJsTests', () => {
    {enabled: ['ash::features::kInputDeviceSettingsSplit']},
  ],
  ['PerDeviceMouse', 'per_device_mouse_test.js'],
- ['PerDeviceMouseSubsection', 'per_device_mouse_subsection_test.js'],
+ [
+   'PerDeviceMouseSubsection', 'per_device_mouse_subsection_test.js',
+   {enabled: ['ash::features::kInputDeviceSettingsSplit']}
+ ],
  ['PerDevicePointingStick', 'per_device_pointing_stick_test.js'],
  [
    'PerDevicePointingStickSubsection',
-   'per_device_pointing_stick_subsection_test.js'
+   'per_device_pointing_stick_subsection_test.js',
+   {enabled: ['ash::features::kInputDeviceSettingsSplit']}
  ],
  ['PerDeviceTouchpad', 'per_device_touchpad_test.js'],
- ['PerDeviceTouchpadSubsection', 'per_device_touchpad_subsection_test.js'],
+ [
+   'PerDeviceTouchpadSubsection', 'per_device_touchpad_subsection_test.js',
+   {enabled: ['ash::features::kInputDeviceSettingsSplit']}
+ ],
  [
    'PersonalizationPageWithPersonalizationHub',
    'personalization_page_with_personalization_hub_test.js',
diff --git a/chrome/test/data/webui/settings/chromeos/per_device_mouse_subsection_test.js b/chrome/test/data/webui/settings/chromeos/per_device_mouse_subsection_test.js
index 4988499185294..5f0cc4a82ea35 100644
--- a/chrome/test/data/webui/settings/chromeos/per_device_mouse_subsection_test.js
+++ b/chrome/test/data/webui/settings/chromeos/per_device_mouse_subsection_test.js
@@ -4,12 +4,14 @@
 
 import 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
 
-import {FakeInputDeviceSettingsProvider, fakeMice, setInputDeviceSettingsProviderForTesting, SettingsPerDeviceMouseSubsectionElement} from 'chrome://os-settings/chromeos/os_settings.js';
+import {FakeInputDeviceSettingsProvider, fakeMice, Router, routes, setInputDeviceSettingsProviderForTesting, SettingsPerDeviceMouseSubsectionElement} from 'chrome://os-settings/chromeos/os_settings.js';
 import {assert} from 'chrome://resources/ash/common/assert.js';
 import {assertEquals, assertFalse, assertTrue} from 'chrome://webui-test/chai_assert.js';
-import {flushTasks} from 'chrome://webui-test/polymer_test_util.js';
+import {flushTasks, waitAfterNextRender} from 'chrome://webui-test/polymer_test_util.js';
 import {isVisible} from 'chrome://webui-test/test_util.js';
 
+const MOUSE_ACCELERATION_SETTING_ID = 408;
+
 suite('PerDeviceMouseSubsection', function() {
   /**
    * @type {?SettingsPerDeviceMouseSubsectionElement}
@@ -175,4 +177,50 @@ suite('PerDeviceMouseSubsection', function() {
         subsection.shadowRoot.querySelector('#mouseScrollSpeedSlider');
     assertFalse(isVisible(mouseScrollSpeedSlider));
   });
+
+  /**
+   * Verify entering the page with search tags matched will auto focus the
+   * searched element.
+   */
+  test('deep linking mixin focus on the first searched element', async () => {
+    await initializePerDeviceMouseSubsection();
+    const mouseAccelerationToggle =
+        subsection.shadowRoot.querySelector('#mouseAcceleration');
+    subsection.mouseIndex = 0;
+    // Enter the page from auto repeat search tag.
+    const url = new URLSearchParams(
+        'search=mouse+accel&settingId=' +
+        encodeURIComponent(MOUSE_ACCELERATION_SETTING_ID));
+
+    await Router.getInstance().navigateTo(
+        routes.PER_DEVICE_MOUSE,
+        /* dynamicParams= */ url, /* removeSearch= */ true);
+
+    await waitAfterNextRender(mouseAccelerationToggle);
+    assertTrue(!!mouseAccelerationToggle);
+    assertEquals(subsection.shadowRoot.activeElement, mouseAccelerationToggle);
+  });
+
+  /**
+   * Verify entering the page with search tags matched wll not auto focus the
+   * searched element if it's not the first keyboard displayed.
+   */
+  test('deep linkng mixin does not focus on second element', async () => {
+    await initializePerDeviceMouseSubsection();
+    const mouseAccelerationToggle =
+        subsection.shadowRoot.querySelector('#mouseAcceleration');
+    subsection.mouseIndex = 1;
+    // Enter the page from auto repeat search tag.
+    const url = new URLSearchParams(
+        'search=mouse+accel&settingId=' +
+        encodeURIComponent(MOUSE_ACCELERATION_SETTING_ID));
+
+    await Router.getInstance().navigateTo(
+        routes.PER_DEVICE_MOUSE,
+        /* dynamicParams= */ url, /* removeSearch= */ true);
+    await flushTasks();
+
+    assertTrue(!!mouseAccelerationToggle);
+    assertFalse(!!subsection.shadowRoot.activeElement);
+  });
 });
diff --git a/chrome/test/data/webui/settings/chromeos/per_device_pointing_stick_subsection_test.js b/chrome/test/data/webui/settings/chromeos/per_device_pointing_stick_subsection_test.js
index 0565dcd0b4290..975989a3667b5 100644
--- a/chrome/test/data/webui/settings/chromeos/per_device_pointing_stick_subsection_test.js
+++ b/chrome/test/data/webui/settings/chromeos/per_device_pointing_stick_subsection_test.js
@@ -4,10 +4,12 @@
 
 import 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
 
-import {FakeInputDeviceSettingsProvider, fakePointingSticks, setInputDeviceSettingsProviderForTesting, SettingsPerDevicePointingStickSubsectionElement} from 'chrome://os-settings/chromeos/os_settings.js';
+import {FakeInputDeviceSettingsProvider, fakePointingSticks, Router, routes, setInputDeviceSettingsProviderForTesting, SettingsPerDevicePointingStickSubsectionElement} from 'chrome://os-settings/chromeos/os_settings.js';
 import {assert} from 'chrome://resources/ash/common/assert.js';
 import {assertEquals, assertTrue} from 'chrome://webui-test/chai_assert.js';
-import {flushTasks} from 'chrome://webui-test/polymer_test_util.js';
+import {flushTasks, waitAfterNextRender} from 'chrome://webui-test/polymer_test_util.js';
+
+const POINTING_STICK_SPEED_SETTING_ID = 435;
 
 suite('PerDevicePointingStickSubsection', function() {
   /**
@@ -130,4 +132,50 @@ suite('PerDevicePointingStickSubsection', function() {
         fakePointingSticks[1].settings.sensitivity,
         pointingStickSpeedSlider.pref.value);
   });
+
+  /**
+   * Verify entering the page with search tags matched will auto focus the
+   * searched element.
+   */
+  test('deep linking mixin focus on the first searched element', async () => {
+    await initializePerDevicePointingStickSubsection();
+    const pointingStickSpeedSlider =
+        subsection.shadowRoot.querySelector('#pointingStickSpeedSlider');
+    subsection.pointingStickIndex = 0;
+    // Enter the page from auto repeat search tag.
+    const url = new URLSearchParams(
+        'search=trackpoint+speed&settingId=' +
+        encodeURIComponent(POINTING_STICK_SPEED_SETTING_ID));
+
+    await Router.getInstance().navigateTo(
+        routes.PER_DEVICE_POINTING_STICK,
+        /* dynamicParams= */ url, /* removeSearch= */ true);
+
+    await waitAfterNextRender(pointingStickSpeedSlider);
+    assertTrue(!!pointingStickSpeedSlider);
+    assertEquals(subsection.shadowRoot.activeElement, pointingStickSpeedSlider);
+  });
+
+  /**
+   * Verify entering the page with search tags matched wll not auto focus the
+   * searched element if it's not the first keyboard displayed.
+   */
+  test('deep linkng mixin does not focus on second element', async () => {
+    await initializePerDevicePointingStickSubsection();
+    const pointingStickSpeedSlider =
+        subsection.shadowRoot.querySelector('#pointingStickSpeedSlider');
+    subsection.pointingStickIndex = 1;
+    // Enter the page from auto repeat search tag.
+    const url = new URLSearchParams(
+        'search=trackpoint+speed&settingId=' +
+        encodeURIComponent(POINTING_STICK_SPEED_SETTING_ID));
+
+    await Router.getInstance().navigateTo(
+        routes.PER_DEVICE_POINTING_STICK,
+        /* dynamicParams= */ url, /* removeSearch= */ true);
+    await flushTasks();
+
+    assertTrue(!!pointingStickSpeedSlider);
+    assertFalse(!!subsection.shadowRoot.activeElement);
+  });
 });
diff --git a/chrome/test/data/webui/settings/chromeos/per_device_touchpad_subsection_test.js b/chrome/test/data/webui/settings/chromeos/per_device_touchpad_subsection_test.js
index 6ee869173dd22..b6feef988c07b 100644
--- a/chrome/test/data/webui/settings/chromeos/per_device_touchpad_subsection_test.js
+++ b/chrome/test/data/webui/settings/chromeos/per_device_touchpad_subsection_test.js
@@ -4,12 +4,14 @@
 
 import 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
 
-import {FakeInputDeviceSettingsProvider, fakeTouchpads, setInputDeviceSettingsProviderForTesting, SettingsPerDeviceTouchpadSubsectionElement} from 'chrome://os-settings/chromeos/os_settings.js';
+import {FakeInputDeviceSettingsProvider, fakeTouchpads, Router, routes, setInputDeviceSettingsProviderForTesting, SettingsPerDeviceTouchpadSubsectionElement} from 'chrome://os-settings/chromeos/os_settings.js';
 import {assert} from 'chrome://resources/ash/common/assert.js';
 import {assertEquals, assertFalse, assertTrue} from 'chrome://webui-test/chai_assert.js';
-import {flushTasks} from 'chrome://webui-test/polymer_test_util.js';
+import {flushTasks, waitAfterNextRender} from 'chrome://webui-test/polymer_test_util.js';
 import {isVisible} from 'chrome://webui-test/test_util.js';
 
+const TOUCHPAD_SPEED_SETTING_ID = 405;
+
 suite('PerDeviceTouchpadSubsection', function() {
   /**
    * @type {?SettingsPerDeviceTouchpadSubsectionElement}
@@ -282,4 +284,51 @@ suite('PerDeviceTouchpadSubsection', function() {
         subsection.shadowRoot.querySelector('#touchpadHapticFeedbackToggle');
     assertFalse(isVisible(hapticFeedbackToggleButton));
   });
+
+  /**
+   * Verify entering the page with search tags matched will auto focus the
+   * searched element.
+   */
+  test('deep linking mixin focus on the first searched element', async () => {
+    await initializePerDeviceTouchpadSubsection();
+    const touchpadSensitivitySlider =
+        subsection.shadowRoot.querySelector('#touchpadSensitivity');
+    subsection.touchpadIndex = 0;
+    // Enter the page from auto repeat search tag.
+    const url = new URLSearchParams(
+        'search=touchpad+speed&settingId=' +
+        encodeURIComponent(TOUCHPAD_SPEED_SETTING_ID));
+
+    await Router.getInstance().navigateTo(
+        routes.PER_DEVICE_TOUCHPAD,
+        /* dynamicParams= */ url, /* removeSearch= */ true);
+
+    await waitAfterNextRender(touchpadSensitivitySlider);
+    assertTrue(!!touchpadSensitivitySlider);
+    assertEquals(
+        subsection.shadowRoot.activeElement, touchpadSensitivitySlider);
+  });
+
+  /**
+   * Verify entering the page with search tags matched wll not auto focus the
+   * searched element if it's not the first keyboard displayed.
+   */
+  test('deep linkng mixin does not focus on second element', async () => {
+    await initializePerDeviceTouchpadSubsection();
+    const touchpadSensitivitySlider =
+        subsection.shadowRoot.querySelector('#touchpadSensitivity');
+    subsection.touchpadIndex = 1;
+    // Enter the page from auto repeat search tag.
+    const url = new URLSearchParams(
+        'search=touchpad+speed&settingId=' +
+        encodeURIComponent(TOUCHPAD_SPEED_SETTING_ID));
+
+    await Router.getInstance().navigateTo(
+        routes.PER_DEVICE_TOUCHPAD,
+        /* dynamicParams= */ url, /* removeSearch= */ true);
+    await flushTasks();
+
+    assertTrue(!!touchpadSensitivitySlider);
+    assertFalse(!!subsection.shadowRoot.activeElement);
+  });
 });