Settings: cr-expand-button, use pointer cursor for label

The label when clicked toggles expansion. The bug as reported was
selecting the label text causes expansion. Without the pointer cursor
it's surprising to the user that an action will be taken while clicking
on the label text during selection. The problem is the surprising
expansion and not the expansion on clicking the text.

Bug: 870205
Change-Id: I5c5200f54a54bba50cb6fc67c668b8d298b98c94
Reviewed-on: https://chromium-review.googlesource.com/1166216Reviewed-by: Scott Chen <scottchen@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#582755}

ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.html

@@ -25,7 +25,7 @@
         flex: 1;
       }
     </style>
-    <div id="outer">
+    <div id="outer" actionable>
       <div id="label"><slot></slot></div>
       <paper-icon-button-light class$="[[iconName_(expanded)]]">
         <button disabled="[[disabled]]" aria-label$="[[alt]]"

ui/webui/resources/cr_elements/cr_expand_button/cr_expand_button.js

@@ -54,7 +54,6 @@ Polymer({
     return expanded ? 'true' : 'false';
   },
 
-
   /**
    * @param {boolean} expanded
    * @private
@@ -111,6 +110,9 @@ Polymer({
    * @private
    */
   updateRippleHoldDown_: function(holdDown) {
-    this.$$('paper-ripple').holdDown = holdDown;
+    const button = /** @type {{ensureRipple: Function, getRipple: Function}} */
+        (this.$$('paper-icon-button-light'));
+    button.ensureRipple();
+    button.getRipple().holdDown = holdDown;
   },
 });