Bug 1488011 - Set the checkbox label instead of using an adjacent XUL label so the checkbox focus ring appears correctly. r=MattN

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

--HG--
extra : moz-landing-system : lando

browser/extensions/formautofill/FormAutofillPreferences.jsm

@@ -77,8 +77,6 @@ FormAutofillPreferences.prototype = {
     let addressAutofill = document.createXULElement("hbox");
     let addressAutofillCheckboxGroup = document.createXULElement("hbox");
     let addressAutofillCheckbox = document.createXULElement("checkbox");
-    let addressAutofillCheckboxLabel = document.createXULElement("label");
-    let addressAutofillCheckboxLabelSpacer = document.createXULElement("spacer");
     let addressAutofillLearnMore = document.createXULElement("label");
     let savedAddressesBtn = document.createXULElement("button");
     // Wrappers are used to properly compute the search tooltip positions
@@ -86,7 +84,7 @@ FormAutofillPreferences.prototype = {
     let savedCreditCardsBtnWrapper = document.createXULElement("hbox");
 
     savedAddressesBtn.className = "accessory-button";
-    addressAutofillCheckboxLabelSpacer.className = "tail-with-learn-more";
+    addressAutofillCheckbox.className = "tail-with-learn-more";
     addressAutofillLearnMore.className = "learnMore text-link";
 
     formAutofillGroup.id = "formAutofillGroup";
@@ -100,8 +98,7 @@ FormAutofillPreferences.prototype = {
                                        1);
 
     addressAutofill.setAttribute("data-subcategory", "address-autofill");
-    addressAutofillCheckboxLabel.textContent = this.bundle.GetStringFromName("autofillAddressesCheckbox");
-    addressAutofillCheckbox.setAttribute("aria-label", addressAutofillCheckboxLabel.textContent);
+    addressAutofillCheckbox.setAttribute("label", this.bundle.GetStringFromName("autofillAddressesCheckbox"));
     addressAutofillLearnMore.textContent = this.bundle.GetStringFromName("learnMoreLabel");
     savedAddressesBtn.setAttribute("label", this.bundle.GetStringFromName("savedAddressesBtnLabel"));
     // Align the start to keep the savedAddressesBtn as original size
@@ -121,7 +118,6 @@ FormAutofillPreferences.prototype = {
 
     addressAutofillCheckboxGroup.align = "center";
     addressAutofillCheckboxGroup.flex = 1;
-    addressAutofillCheckboxLabel.flex = 1;
 
     formAutofillGroupBoxCaption.appendChild(formAutofillGroupBoxCaptionLabel);
     formAutofillFragment.appendChild(formAutofillGroupBoxCaption);
@@ -130,9 +126,7 @@ FormAutofillPreferences.prototype = {
     formAutofillGroup.appendChild(addressAutofill);
     addressAutofill.appendChild(addressAutofillCheckboxGroup);
     addressAutofillCheckboxGroup.appendChild(addressAutofillCheckbox);
-    addressAutofillCheckboxGroup.appendChild(addressAutofillCheckboxLabel);
-    addressAutofillCheckboxLabel.appendChild(addressAutofillCheckboxLabelSpacer);
-    addressAutofillCheckboxLabel.appendChild(addressAutofillLearnMore);
+    addressAutofillCheckboxGroup.appendChild(addressAutofillLearnMore);
     addressAutofill.appendChild(savedAddressesBtnWrapper);
     savedAddressesBtnWrapper.appendChild(savedAddressesBtn);
 
@@ -140,7 +134,6 @@ FormAutofillPreferences.prototype = {
       formAutofillFragment,
       formAutofillGroup,
       addressAutofillCheckbox,
-      addressAutofillCheckboxLabel,
       savedAddressesBtn,
     };
 
@@ -148,20 +141,17 @@ FormAutofillPreferences.prototype = {
       let creditCardAutofill = document.createXULElement("hbox");
       let creditCardAutofillCheckboxGroup = document.createXULElement("hbox");
       let creditCardAutofillCheckbox = document.createXULElement("checkbox");
-      let creditCardAutofillCheckboxLabel = document.createXULElement("label");
-      let creditCardAutofillCheckboxLabelSpacer = document.createXULElement("spacer");
       let creditCardAutofillLearnMore = document.createXULElement("label");
       let savedCreditCardsBtn = document.createXULElement("button");
       savedCreditCardsBtn.className = "accessory-button";
-      creditCardAutofillCheckboxLabelSpacer.className = "tail-with-learn-more";
+      creditCardAutofillCheckbox.className = "tail-with-learn-more";
       creditCardAutofillLearnMore.className = "learnMore text-link";
 
       creditCardAutofill.id = "creditCardAutofill";
       creditCardAutofillLearnMore.id = "creditCardAutofillLearnMore";
 
       creditCardAutofill.setAttribute("data-subcategory", "credit-card-autofill");
-      creditCardAutofillCheckboxLabel.textContent = this.bundle.GetStringFromName("autofillCreditCardsCheckbox");
-      creditCardAutofillCheckbox.setAttribute("aria-label", creditCardAutofillCheckboxLabel.textContent);
+      creditCardAutofillCheckbox.setAttribute("label", this.bundle.GetStringFromName("autofillCreditCardsCheckbox"));
       creditCardAutofillLearnMore.textContent = this.bundle.GetStringFromName("learnMoreLabel");
       savedCreditCardsBtn.setAttribute("label", this.bundle.GetStringFromName("savedCreditCardsBtnLabel"));
       // Align the start to keep the savedCreditCardsBtn as original size
@@ -181,19 +171,15 @@ FormAutofillPreferences.prototype = {
 
       creditCardAutofillCheckboxGroup.align = "center";
       creditCardAutofillCheckboxGroup.flex = 1;
-      creditCardAutofillCheckboxLabel.flex = 1;
 
       formAutofillGroup.appendChild(creditCardAutofill);
       creditCardAutofill.appendChild(creditCardAutofillCheckboxGroup);
       creditCardAutofillCheckboxGroup.appendChild(creditCardAutofillCheckbox);
-      creditCardAutofillCheckboxGroup.appendChild(creditCardAutofillCheckboxLabel);
-      creditCardAutofillCheckboxLabel.appendChild(creditCardAutofillCheckboxLabelSpacer);
-      creditCardAutofillCheckboxLabel.appendChild(creditCardAutofillLearnMore);
+      creditCardAutofillCheckboxGroup.appendChild(creditCardAutofillLearnMore);
       creditCardAutofill.appendChild(savedCreditCardsBtnWrapper);
       savedCreditCardsBtnWrapper.appendChild(savedCreditCardsBtn);
 
       this.refs.creditCardAutofillCheckbox = creditCardAutofillCheckbox;
-      this.refs.creditCardAutofillCheckboxLabel = creditCardAutofillCheckboxLabel;
       this.refs.savedCreditCardsBtn = savedCreditCardsBtn;
     }
   },