Fix manage_a11y_page handler for showing shelf buttons

The pref toggle change handler was referencing the toggle using
this.$.<control-id>. This seems to be broken - possibly because the
toggle is inside a template element.

This changes the code to use this.$$('$<control-id>').

BUG=1150682
TEST=Toggle the setting to show shelf navigation buttons in tablet
mode, and verify the shelf state (while in tablet mode) changes.

Change-Id: I522a296320e886693dfd64688c51ab6a5030f9ef
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2548189
Commit-Queue: Toni Baržić <tbarzic@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#829261}

chrome/browser/resources/settings/chromeos/os_a11y_page/manage_a11y_page.js

@@ -496,7 +496,7 @@ Polymer({
       return;
     }
 
-    const enabled = this.$.shelfNavigationButtonsEnabledControl.checked;
+    const enabled = this.$$('#shelfNavigationButtonsEnabledControl').checked;
     this.set(
         'prefs.settings.a11y.tablet_mode_shelf_nav_buttons_enabled.value',
         enabled);

chrome/test/data/webui/settings/chromeos/manage_accessibility_page_tests.js

@@ -48,11 +48,31 @@ suite('ManageAccessibilityPageTests', function() {
     }
   }
 
-  function initPage() {
+  function initPage(opt_prefs) {
     page = document.createElement('settings-manage-a11y-page');
+    page.prefs = opt_prefs || getDefaultPrefs();
     document.body.appendChild(page);
   }
 
+  function getDefaultPrefs() {
+    return {
+      'settings': {
+        'a11y': {
+          'tablet_mode_shelf_nav_buttons_enabled': {
+            key: 'settings.a11y.tablet_mode_shelf_nav_buttons_enabled',
+            type: chrome.settingsPrivate.PrefType.BOOLEAN,
+            value: false,
+          }
+        },
+        'accessibility': {
+          key: 'settings.accessibility',
+          type: chrome.settingsPrivate.PrefType.BOOLEAN,
+          value: false,
+        }
+      }
+    };
+  }
+
   setup(function() {
     deviceBrowserProxy = new TestDevicePageBrowserProxy();
     settings.DevicePageBrowserProxyImpl.instance_ = deviceBrowserProxy;
@@ -100,6 +120,87 @@ suite('ManageAccessibilityPageTests', function() {
     assertTrue(isVisible(page.$$('#shelfNavigationButtonsEnabledControl')));
   });
 
+  test('toggle tablet mode buttons', function() {
+    loadTimeData.overrideValues({
+      isKioskModeActive: false,
+      showTabletModeShelfNavigationButtonsSettings: true,
+    });
+    initPage();
+    Polymer.dom.flush();
+
+    const navButtonsToggle = page.$$('#shelfNavigationButtonsEnabledControl');
+    assertTrue(isVisible(navButtonsToggle));
+    // The default pref value is false.
+    assertFalse(navButtonsToggle.checked);
+
+    // Clicking the toggle should update the toggle checked value, and the
+    // backing preference.
+    navButtonsToggle.click();
+    Polymer.dom.flush();
+
+    assertTrue(navButtonsToggle.checked);
+    assertFalse(navButtonsToggle.disabled);
+    assertTrue(
+        page.prefs.settings.a11y.tablet_mode_shelf_nav_buttons_enabled.value);
+
+    navButtonsToggle.click();
+    Polymer.dom.flush();
+
+    assertFalse(navButtonsToggle.checked);
+    assertFalse(navButtonsToggle.disabled);
+    assertFalse(
+        page.prefs.settings.a11y.tablet_mode_shelf_nav_buttons_enabled.value);
+  });
+
+  test('tablet mode buttons toggle disabled with spoken feedback', function() {
+    loadTimeData.overrideValues({
+      isKioskModeActive: false,
+      showTabletModeShelfNavigationButtonsSettings: true,
+    });
+
+    prefs = getDefaultPrefs();
+    // Enable spoken feedback.
+    prefs.settings.accessibility.value = true;
+
+    initPage(prefs);
+    Polymer.dom.flush();
+
+    const navButtonsToggle = page.$$('#shelfNavigationButtonsEnabledControl');
+    assertTrue(isVisible(navButtonsToggle));
+
+    // If spoken feedback is enabled, the shelf nav buttons toggle should be
+    // disabled and checked.
+    assertTrue(navButtonsToggle.disabled);
+    assertTrue(navButtonsToggle.checked);
+
+    // Clicking the toggle should have no effect.
+    navButtonsToggle.click();
+    Polymer.dom.flush();
+
+    assertTrue(navButtonsToggle.disabled);
+    assertTrue(navButtonsToggle.checked);
+    assertFalse(
+        page.prefs.settings.a11y.tablet_mode_shelf_nav_buttons_enabled.value);
+
+    // The toggle should be enabled if the spoken feedback gets disabled.
+    page.set('prefs.settings.accessibility.value', false);
+    Polymer.dom.flush();
+
+    assertFalse(!!navButtonsToggle.disabled);
+    assertFalse(navButtonsToggle.checked);
+    assertFalse(
+        page.prefs.settings.a11y.tablet_mode_shelf_nav_buttons_enabled.value);
+
+    // Clicking the toggle should update the backing pref.
+    navButtonsToggle.click();
+    Polymer.dom.flush();
+
+    assertFalse(!!navButtonsToggle.disabled);
+    assertTrue(navButtonsToggle.checked);
+    assertTrue(
+        page.prefs.settings.a11y.tablet_mode_shelf_nav_buttons_enabled.value);
+  });
+
   test('some parts are hidden in kiosk mode', function() {
     loadTimeData.overrideValues({
       isKioskModeActive: true,