Issue 6514 - IOToggle Custom Element

js/io-toggle.js

-/* globals module, require */
+/*
+ * This file is part of Adblock Plus <https://adblockplus.org/>,
+ * Copyright (C) 2006-present eyeo GmbH
+ *
+ * Adblock Plus is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * Adblock Plus is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
+ */
 
 "use strict";
 
 const IOElement = require("./io-element");
+const {boolean} = IOElement.utils;
 
 class IOToggle extends IOElement
 {
   // action, checked, and disabled should be reflected down the button
   static get observedAttributes()
   {
     return ["action", "checked", "disabled"];
   }
 
   created()
   {
     this.addEventListener("click", this);
     this.render();
   }
 
   get checked()
   {
     return this.hasAttribute("checked");
   }
 
   set checked(value)
   {
-    booleanAttribute.call(this, "checked", value);
+    boolean.attribute(this, "checked", value);
     this.render();
   }
 
   get disabled()
   {
     return this.hasAttribute("disabled");
   }
 
   set disabled(value)
   {
-    booleanAttribute.call(this, "disabled", value);
-    this.firstElementChild.disabled = this._disabled;
+    boolean.attribute(this, "disabled", value);
+    this.render();
   }
 
   onclick(event)
   {
     if (!this.disabled)
     {
       this.checked = !this.checked;
+      if (this.ownerDocument.activeElement !== this.child)
+      {
+        this.child.focus();
+      }
       this.dispatchEvent(new CustomEvent("change", {
         bubbles: true,
         cancelable: true,
         detail: this.checked
       }));
     }
   }
 
   render()
   {
     this.html`
     <button
       role="checkbox"
+      disabled="${this.disabled}"
       data-action="${this.action}"
       aria-checked="${this.checked}"
       aria-disabled="${this.disabled}"
     />`;
   }
 }
 
 IOToggle.define("io-toggle");
-
-function asBoolean(value)
-{
-  return typeof value === "string" ? JSON.parse(value) : !!value;
-}
-
-function booleanAttribute(name, value)
-{
-  if (asBoolean(value))
-  {
-    this.setAttribute(name, "true");
-  }
-  else
-  {
-    this.removeAttribute(name);
-  }
-}