Bug 1602095 - use moz-label in moz-toggle r=tgiles

This isn't a pressing need, but it helps us get around the browser_all_files_referenced test issue. Also you can set accesskeys on the toggles in about:preferences to see this working in the wild.

Differential Revision: https://phabricator.services.mozilla.com/D171239

toolkit/content/tests/widgets/test_moz_toggle.html

@@ -60,6 +60,25 @@
     is(mozToggle.pressed, false, "The toggle pressed state can be changed via space bar");
     is(button.getAttribute("aria-pressed"), "false", "aria-pressed reflects this change");
   });
+
+  add_task(async function testSupportsAccesskey() {
+    const mozToggle = document.querySelector("moz-toggle");
+    let nextAccesskey = "l";
+    mozToggle.setAttribute("accesskey", nextAccesskey);
+
+    synthesizeKey(
+      nextAccesskey,
+      navigator.platform.includes("Mac")
+        ? { altKey: true, ctrlKey: true }
+        : { altKey: true, shiftKey: true }
+    );
+
+    is(
+      mozToggle.shadowRoot.activeElement,
+      mozToggle.buttonEl,
+      "Focus has moved to the toggle button."
+    );
+  });
 </script>
 </pre>
 </body>

toolkit/content/widgets/moz-toggle/moz-toggle.mjs

@@ -4,6 +4,8 @@
 
 import { html, ifDefined } from "../vendor/lit.all.mjs";
 import { MozLitElement } from "../lit-utils.mjs";
+// eslint-disable-next-line import/no-unassigned-import
+import "chrome://global/content/elements/moz-label.mjs";
 
 /**
  * A simple toggle element that can be used to switch between two states.
@@ -31,6 +33,7 @@ export default class MozToggle extends MozLitElement {
     label: { type: String },
     description: { type: String },
     ariaLabel: { type: String, attribute: "aria-label" },
+    accessKey: { type: String, attribute: "accesskey" },
   };
 
   static get queries() {
@@ -71,7 +74,13 @@ export default class MozToggle extends MozLitElement {
     if (this.label) {
       return html`
         <span class="label-wrapper">
-          <label id="moz-toggle-label" part="label" for="moz-toggle-button">
+          <label
+            is="moz-label"
+            id="moz-toggle-label"
+            part="label"
+            for="moz-toggle-button"
+            accesskey=${ifDefined(this.accessKey)}
+          >
             ${this.label}
           </label>
           ${!this.description ? this.supportLinkTemplate() : ""}

toolkit/content/widgets/moz-toggle/moz-toggle.stories.mjs

@@ -34,6 +34,7 @@ const Template = ({
   ariaLabel,
   l10nId,
   hasSupportLink,
+  accessKey,
 }) => html`
   <div style="max-width: 400px">
     <moz-toggle
@@ -44,6 +45,7 @@ const Template = ({
       aria-label=${ifDefined(ariaLabel)}
       data-l10n-id=${ifDefined(l10nId)}
       data-l10n-attrs="aria-label, description, label"
+      accesskey=${ifDefined(accessKey)}
     >
       ${hasSupportLink
         ? html`
@@ -77,6 +79,7 @@ WithLabel.args = {
   disabled: false,
   l10nId: "moz-toggle-label",
   hasSupportLink: false,
+  accessKey: "h",
 };
 
 export const WithDescription = Template.bind({});