Bug 1429940 - Part 2 - Use HTML headings inside the "label" element for labeling "groupbox" elements in Preferences, instead of the "caption" element. r=MarcoZ,dao,jaws,flod
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Tue, 20 Nov 2018 15:14:18 +0000
changeset 503840 004331df8823ee887cc787e29ef7efe4fa4e596f
parent 503839 781e474c75714b384c3246a257e9389a2771c505
child 503841 8a25480541382c670e4f17148b218660ebc63ff1
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMarcoZ, dao, jaws, flod
bugs1429940
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1429940 - Part 2 - Use HTML headings inside the "label" element for labeling "groupbox" elements in Preferences, instead of the "caption" element. r=MarcoZ,dao,jaws,flod This makes it possible to navigate by headings when using accessibility technology. Information labels displayed when removing the master password are also restored. Differential Revision: https://phabricator.services.mozilla.com/D11792
browser/base/content/pageinfo/pageInfo.xul
browser/base/content/sanitize.xul
browser/components/newtab/lib/AboutPreferences.jsm
browser/components/preferences/colors.xul
browser/components/preferences/connection.xul
browser/components/preferences/fonts.xul
browser/components/preferences/in-content/findInPage.js
browser/components/preferences/in-content/home.xul
browser/components/preferences/in-content/main.xul
browser/components/preferences/in-content/preferences.js
browser/components/preferences/in-content/preferences.xul
browser/components/preferences/in-content/privacy.xul
browser/components/preferences/in-content/search.xul
browser/components/preferences/in-content/sync.js
browser/components/preferences/in-content/sync.xul
browser/components/preferences/sanitize.xul
browser/extensions/formautofill/FormAutofillPreferences.jsm
browser/themes/shared/incontentprefs/preferences.inc.css
toolkit/locales/en-US/toolkit/preferences/preferences.ftl
toolkit/mozapps/preferences/removemp.xul
--- a/browser/base/content/pageinfo/pageInfo.xul
+++ b/browser/base/content/pageinfo/pageInfo.xul
@@ -274,19 +274,17 @@
         <button command="cmd_help" label="&helpButton.label;" dlgtype="help"/>
       </hbox>
     </vbox>
 
     <!-- Security & Privacy -->
     <vbox id="securityPanel">
       <!-- Identity Section -->
       <groupbox>
-        <caption>
-          <label class="header" value="&securityView.identity.header;"/>
-        </caption>
+        <label class="header" value="&securityView.identity.header;"/>
         <grid>
           <columns>
             <column/>
             <column flex="1"/>
           </columns>
           <rows>
             <!-- Domain -->
             <row>
@@ -321,19 +319,17 @@
               <textbox id="security-identity-validity-value" readonly="true"/>
             </row>
           </rows>
         </grid>
       </groupbox>
 
       <!-- Privacy & History section -->
       <groupbox>
-        <caption>
-          <label class="header" value="&securityView.privacy.header;"/>
-        </caption>
+        <label class="header" value="&securityView.privacy.header;"/>
         <grid>
           <columns>
             <column flex="1"/>
             <column flex="1"/>
           </columns>
           <rows>
             <!-- History -->
             <row>
@@ -368,19 +364,17 @@
               </hbox>
             </row>
           </rows>
         </grid>
       </groupbox>
 
       <!-- Technical Details section -->
       <groupbox>
-        <caption>
-          <label class="header" value="&securityView.technical.header;"/>
-        </caption>
+        <label class="header" value="&securityView.technical.header;"/>
         <label id="security-technical-shortform"/>
         <description id="security-technical-longform1"/>
         <description id="security-technical-longform2"/>
         <description id="security-technical-certificate-transparency"/>
       </groupbox>
 
       <hbox pack="end">
         <button command="cmd_help" label="&helpButton.label;" dlgtype="help"/>
--- a/browser/base/content/sanitize.xul
+++ b/browser/base/content/sanitize.xul
@@ -11,16 +11,17 @@
 
 
 <?xml-stylesheet href="chrome://browser/content/sanitizeDialog.css"?>
 
 <!DOCTYPE dialog>
 
 <dialog id="SanitizeDialog" type="child"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
         buttons="accept,cancel"
         persist="lastSelected screenX screenY"
         role="dialog"
         data-l10n-id="dialog-title"
         data-l10n-attrs="style"
         onload="gSanitizePromptDialog.init();"
         ondialogaccept="return gSanitizePromptDialog.sanitize();">
 
@@ -66,17 +67,17 @@
       </vbox>
     </hbox>
     <spacer flex="1"/>
   </vbox>
 
   <separator class="thin"/>
 
   <groupbox>
-    <caption><label data-l10n-id="history-section-label"></label></caption>
+    <label><html:h2 data-l10n-id="history-section-label"/></label>
     <grid flex="1">
       <columns>
         <column data-l10n-id="sanitize-prefs-style" data-l10n-attrs="style"/>
         <column flex="1"/>
       </columns>
       <rows>
         <row>
           <checkbox data-l10n-id="item-history-and-downloads"
@@ -98,17 +99,17 @@
           <checkbox data-l10n-id="item-form-search-history"
                     preference="privacy.cpd.formdata"
                     onsyncfrompreference="return gSanitizePromptDialog.onReadGeneric();"/>
         </row>
       </rows>
     </grid>
   </groupbox>
   <groupbox>
-    <caption><label data-l10n-id="data-section-label"></label></caption>
+    <label><html:h2 data-l10n-id="data-section-label"/></label>
     <grid flex="1">
       <columns>
         <column data-l10n-id="sanitize-prefs-style" data-l10n-attrs="style"/>
         <column flex="1"/>
       </columns>
       <rows>
         <row>
           <checkbox data-l10n-id="item-site-preferences"
--- a/browser/components/newtab/lib/AboutPreferences.jsm
+++ b/browser/components/newtab/lib/AboutPreferences.jsm
@@ -5,16 +5,18 @@
 
 ChromeUtils.import("resource://gre/modules/Services.jsm");
 ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm");
 ChromeUtils.defineModuleGetter(this, "PluralForm", "resource://gre/modules/PluralForm.jsm");
 const {actionTypes: at} = ChromeUtils.import("resource://activity-stream/common/Actions.jsm", {});
 
 XPCOMUtils.defineLazyGlobalGetters(this, ["fetch"]);
 
+const HTML_NS = "http://www.w3.org/1999/xhtml";
+
 const PREFERENCES_LOADED_EVENT = "home-pane-loaded";
 
 // These "section" objects are formatted in a way to be similar to the ones from
 // SectionsManager to construct the preferences view.
 const PREFS_BEFORE_SECTIONS = [
   {
     id: "search",
     pref: {
@@ -157,21 +159,21 @@ this.AboutPreferences = class AboutPrefe
       `href="data:text/css,${encodeURIComponent(CUSTOM_CSS)}" type="text/css"`),
       document.documentElement);
 
     // Insert a new group immediately after the homepage one
     const homeGroup = document.getElementById("homepageGroup");
     const contentsGroup = homeGroup.insertAdjacentElement("afterend", homeGroup.cloneNode());
     contentsGroup.id = "homeContentsGroup";
     contentsGroup.setAttribute("data-subcategory", "contents");
-    const caption = createAppend("caption", contentsGroup);
-    const captionLabel = createAppend("label", caption);
-    captionLabel.setAttribute("value", formatString("prefs_home_header"));
-    const description = createAppend("description", contentsGroup);
-    description.textContent = formatString("prefs_home_description");
+    createAppend("label", contentsGroup)
+      .appendChild(document.createElementNS(HTML_NS, "h2"))
+      .textContent = formatString("prefs_home_header");
+    createAppend("description", contentsGroup)
+      .textContent = formatString("prefs_home_description");
 
     // Add preferences for each section
     prefStructure.forEach(sectionData => {
       const {
         id,
         pref: prefData,
         icon = "webextension",
         maxRows,
--- a/browser/components/preferences/colors.xul
+++ b/browser/components/preferences/colors.xul
@@ -27,17 +27,17 @@
   <script type="application/javascript" src="chrome://global/content/preferencesBindings.js"/>
 
   <keyset>
     <key data-l10n-id="colors-close-key" modifiers="accel" oncommand="Preferences.close(event)"/>
   </keyset>
 
   <hbox>
     <groupbox flex="1">
-      <caption><label data-l10n-id="colors-text-and-background"/></caption>
+      <label><html:h2 data-l10n-id="colors-text-and-background"/></label>
       <hbox align="center">
         <label data-l10n-id="colors-text-header" control="foregroundtextmenu"/>
         <spacer flex="1"/>
         <html:input type="color" id="foregroundtextmenu"
                     preference="browser.display.foreground_color"/>
       </hbox>
       <hbox align="center" style="margin-top: 5px">
         <label data-l10n-id="colors-background" control="backgroundmenu" />
@@ -48,17 +48,17 @@
       <separator class="thin"/>
       <hbox align="center">
         <checkbox id="browserUseSystemColors" data-l10n-id="colors-use-system"
                   preference="browser.display.use_system_colors"/>
       </hbox>
     </groupbox>
 
     <groupbox flex="1">
-      <caption><label data-l10n-id="colors-links-header"/></caption>
+      <label><html:h2 data-l10n-id="colors-links-header"/></label>
       <hbox align="center">
         <label data-l10n-id="colors-unvisited-links" control="unvisitedlinkmenu" />
         <spacer flex="1"/>
         <html:input type="color" id="unvisitedlinkmenu"
                     preference="browser.anchor_color"/>
       </hbox>
       <hbox align="center" style="margin-top: 5px">
         <label data-l10n-id="colors-visited-links" control="visitedlinkmenu" />
--- a/browser/components/preferences/connection.xul
+++ b/browser/components/preferences/connection.xul
@@ -4,16 +4,17 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <?xml-stylesheet href="chrome://global/skin/"?>
 <?xml-stylesheet href="chrome://browser/skin/preferences/preferences.css"?>
 
 <dialog id="ConnectionsDialog" type="child"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
         data-l10n-id="connection-window"
         data-l10n-attrs="title, style"
         buttons="accept,cancel,help"
         persist="lastSelected screenX screenY"
         role="dialog"
         onbeforeaccept="return gConnectionsDialog.beforeAccept();"
         onload="gConnectionsDialog.checkForSystemProxy();"
         helpTopic="prefs-connection-settings"
@@ -40,17 +41,17 @@
         align="top" hidden="true" class="extension-controlled">
     <description control="disableProxyExtension" flex="1" />
     <button id="disableProxyExtension"
             class="extension-controlled-button accessory-button"
             data-l10n-id="connection-disable-extension" />
   </hbox>
 
   <groupbox>
-    <caption><label data-l10n-id="connection-proxy-configure" /></caption>
+    <label><html:h2 data-l10n-id="connection-proxy-configure"/></label>
 
     <radiogroup id="networkProxyType" preference="network.proxy.type"
                 onsyncfrompreference="return gConnectionsDialog.readProxyType();">
       <radio value="0" data-l10n-id="connection-proxy-option-no" />
       <radio value="4" data-l10n-id="connection-proxy-option-auto" />
       <radio value="5" data-l10n-id="connection-proxy-option-system" id="systemPref" hidden="true" />
       <radio value="1" data-l10n-id="connection-proxy-option-manual"/>
       <grid class="indent" flex="1">
--- a/browser/components/preferences/fonts.xul
+++ b/browser/components/preferences/fonts.xul
@@ -5,16 +5,17 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/preferences/preferences.css"?>
 
 <dialog id="FontsDialog" type="child"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
         data-l10n-id="fonts-window"
         data-l10n-attrs="title"
         buttons="accept,cancel,help"
         persist="lastSelected screenX screenY"
         role="dialog"
         helpTopic="prefs-fonts-and-colors"
         ondialoghelp="openPrefsHelp()">
 
@@ -26,58 +27,56 @@
   <script type="application/javascript" src="chrome://global/content/preferencesBindings.js"/>
 
   <keyset>
     <key data-l10n-id="fonts-window-close" modifiers="accel" oncommand="Preferences.close(event)"/>
   </keyset>
 
   <!-- Fonts for: [ Language ] -->
   <groupbox>
-    <caption>
-      <hbox align="center">
-        <label data-l10n-id="fonts-langgroup-header" control="selectLangs"/>
-      </hbox>
-      <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
-      <hbox>
-        <menulist id="selectLangs" preference="font.language.group"
-                  onsyncfrompreference="return gFontsDialog.readFontLanguageGroup();">
-          <menupopup>
-            <menuitem value="ar"              data-l10n-id="fonts-langgroup-arabic"/>
-            <menuitem value="x-armn"          data-l10n-id="fonts-langgroup-armenian"/>
-            <menuitem value="x-beng"          data-l10n-id="fonts-langgroup-bengali"/>
-            <menuitem value="zh-CN"           data-l10n-id="fonts-langgroup-simpl-chinese"/>
-            <menuitem value="zh-HK"           data-l10n-id="fonts-langgroup-trad-chinese-hk"/>
-            <menuitem value="zh-TW"           data-l10n-id="fonts-langgroup-trad-chinese"/>
-            <menuitem value="x-cyrillic"      data-l10n-id="fonts-langgroup-cyrillic"/>
-            <menuitem value="x-devanagari"    data-l10n-id="fonts-langgroup-devanagari"/>
-            <menuitem value="x-ethi"          data-l10n-id="fonts-langgroup-ethiopic"/>
-            <menuitem value="x-geor"          data-l10n-id="fonts-langgroup-georgian"/>
-            <menuitem value="el"              data-l10n-id="fonts-langgroup-el"/>
-            <menuitem value="x-gujr"          data-l10n-id="fonts-langgroup-gujarati"/>
-            <menuitem value="x-guru"          data-l10n-id="fonts-langgroup-gurmukhi"/>
-            <menuitem value="he"              data-l10n-id="fonts-langgroup-hebrew"/>
-            <menuitem value="ja"              data-l10n-id="fonts-langgroup-japanese"/>
-            <menuitem value="x-knda"          data-l10n-id="fonts-langgroup-kannada"/>
-            <menuitem value="x-khmr"          data-l10n-id="fonts-langgroup-khmer"/>
-            <menuitem value="ko"              data-l10n-id="fonts-langgroup-korean"/>
-            <menuitem value="x-western"       data-l10n-id="fonts-langgroup-latin"/>
-            <menuitem value="x-mlym"          data-l10n-id="fonts-langgroup-malayalam"/>
-            <menuitem value="x-math"          data-l10n-id="fonts-langgroup-math"/>
-            <menuitem value="x-orya"          data-l10n-id="fonts-langgroup-odia"/>
-            <menuitem value="x-sinh"          data-l10n-id="fonts-langgroup-sinhala"/>
-            <menuitem value="x-tamil"         data-l10n-id="fonts-langgroup-tamil"/>
-            <menuitem value="x-telu"          data-l10n-id="fonts-langgroup-telugu"/>
-            <menuitem value="th"              data-l10n-id="fonts-langgroup-thai"/>
-            <menuitem value="x-tibt"          data-l10n-id="fonts-langgroup-tibetan"/>
-            <menuitem value="x-cans"          data-l10n-id="fonts-langgroup-canadian"/>
-            <menuitem value="x-unicode"       data-l10n-id="fonts-langgroup-other"/>
-          </menupopup>
-        </menulist>
-      </hbox>
-    </caption>
+    <hbox align="center">
+      <label control="selectLangs"><html:h2 data-l10n-id="fonts-langgroup-header"/></label>
+    </hbox>
+    <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
+    <hbox>
+      <menulist id="selectLangs" preference="font.language.group"
+                onsyncfrompreference="return gFontsDialog.readFontLanguageGroup();">
+        <menupopup>
+          <menuitem value="ar"              data-l10n-id="fonts-langgroup-arabic"/>
+          <menuitem value="x-armn"          data-l10n-id="fonts-langgroup-armenian"/>
+          <menuitem value="x-beng"          data-l10n-id="fonts-langgroup-bengali"/>
+          <menuitem value="zh-CN"           data-l10n-id="fonts-langgroup-simpl-chinese"/>
+          <menuitem value="zh-HK"           data-l10n-id="fonts-langgroup-trad-chinese-hk"/>
+          <menuitem value="zh-TW"           data-l10n-id="fonts-langgroup-trad-chinese"/>
+          <menuitem value="x-cyrillic"      data-l10n-id="fonts-langgroup-cyrillic"/>
+          <menuitem value="x-devanagari"    data-l10n-id="fonts-langgroup-devanagari"/>
+          <menuitem value="x-ethi"          data-l10n-id="fonts-langgroup-ethiopic"/>
+          <menuitem value="x-geor"          data-l10n-id="fonts-langgroup-georgian"/>
+          <menuitem value="el"              data-l10n-id="fonts-langgroup-el"/>
+          <menuitem value="x-gujr"          data-l10n-id="fonts-langgroup-gujarati"/>
+          <menuitem value="x-guru"          data-l10n-id="fonts-langgroup-gurmukhi"/>
+          <menuitem value="he"              data-l10n-id="fonts-langgroup-hebrew"/>
+          <menuitem value="ja"              data-l10n-id="fonts-langgroup-japanese"/>
+          <menuitem value="x-knda"          data-l10n-id="fonts-langgroup-kannada"/>
+          <menuitem value="x-khmr"          data-l10n-id="fonts-langgroup-khmer"/>
+          <menuitem value="ko"              data-l10n-id="fonts-langgroup-korean"/>
+          <menuitem value="x-western"       data-l10n-id="fonts-langgroup-latin"/>
+          <menuitem value="x-mlym"          data-l10n-id="fonts-langgroup-malayalam"/>
+          <menuitem value="x-math"          data-l10n-id="fonts-langgroup-math"/>
+          <menuitem value="x-orya"          data-l10n-id="fonts-langgroup-odia"/>
+          <menuitem value="x-sinh"          data-l10n-id="fonts-langgroup-sinhala"/>
+          <menuitem value="x-tamil"         data-l10n-id="fonts-langgroup-tamil"/>
+          <menuitem value="x-telu"          data-l10n-id="fonts-langgroup-telugu"/>
+          <menuitem value="th"              data-l10n-id="fonts-langgroup-thai"/>
+          <menuitem value="x-tibt"          data-l10n-id="fonts-langgroup-tibetan"/>
+          <menuitem value="x-cans"          data-l10n-id="fonts-langgroup-canadian"/>
+          <menuitem value="x-unicode"       data-l10n-id="fonts-langgroup-other"/>
+        </menupopup>
+      </menulist>
+    </hbox>
 
     <grid>
       <columns>
         <column/>
         <column flex="1"/>
         <column/>
         <column/>
       </columns>
@@ -249,17 +248,17 @@
                 preference="browser.display.use_document_fonts"
                 onsyncfrompreference="return gFontsDialog.readUseDocumentFonts();"
                 onsynctopreference="return gFontsDialog.writeUseDocumentFonts();"/>
     </hbox>
   </groupbox>
 
   <!-- Text Encoding -->
   <groupbox>
-    <caption><label data-l10n-id="fonts-languages-fallback-header"/></caption>
+    <label><html:h2 data-l10n-id="fonts-languages-fallback-header"/></label>
     <description data-l10n-id="fonts-languages-fallback-desc"/>
     <hbox align="center">
       <label data-l10n-id="fonts-languages-fallback-label" control="DefaultCharsetList"/>
       <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
       <hbox>
         <menulist id="DefaultCharsetList" preference="intl.charset.fallback.override">
           <menupopup>
             <menuitem data-l10n-id="fonts-languages-fallback-name-auto"        value=""/>
--- a/browser/components/preferences/in-content/findInPage.js
+++ b/browser/components/preferences/in-content/findInPage.js
@@ -305,17 +305,17 @@ var gSearchResultsPane = {
       }
     } else {
       noResultsEl.hidden = true;
       document.getElementById("sorry-message-query").textContent = "";
       // Going back to General when cleared
       gotoPref("paneGeneral");
 
       // Hide some special second level headers in normal view
-      for (let element of document.querySelectorAll("caption.search-header")) {
+      for (let element of document.querySelectorAll(".search-header")) {
         element.hidden = true;
       }
     }
 
     window.dispatchEvent(new CustomEvent("PreferencesSearchCompleted", { detail: query }));
   },
 
   /**
--- a/browser/components/preferences/in-content/home.xul
+++ b/browser/components/preferences/in-content/home.xul
@@ -17,17 +17,17 @@
           data-preference-related="browser.startup.homepage"
           data-l10n-id="home-restore-defaults"
           preference="pref.browser.homepage.disable_button.restore_default"/>
 </hbox>
 
 <groupbox id="homepageGroup"
           data-category="paneHome"
           hidden="true">
-  <caption><label data-l10n-id="home-new-windows-tabs-header"/></caption>
+  <label><html:h2 data-l10n-id="home-new-windows-tabs-header"/></label>
   <description data-l10n-id="home-new-windows-tabs-description2" />
 
   <hbox id="homepageAndNewWindowsOption">
     <label control="homeMode" data-l10n-id="home-homepage-mode-label" flex="1" />
 
     <vbox class="homepageMenuItemContainer" flex="1">
       <textbox id="homePrefHidden"
               preference="browser.startup.homepage"
--- a/browser/components/preferences/in-content/main.xul
+++ b/browser/components/preferences/in-content/main.xul
@@ -22,17 +22,17 @@
       data-category="paneGeneral">
       <label class="header-name" flex="1" data-l10n-id="pane-general-title"/>
 </hbox>
 
 <!-- Startup -->
 <groupbox id="startupGroup"
           data-category="paneGeneral"
           hidden="true">
-  <caption><label data-l10n-id="startup-header"/></caption>
+  <label><html:h2 data-l10n-id="startup-header"/></label>
 
 #ifdef MOZ_DEV_EDITION
   <vbox id="separateProfileBox">
     <checkbox id="separateProfileMode"
               data-l10n-id="separate-profile-mode"/>
     <hbox id="sync-dev-edition-root" lign="center" class="indent" hidden="true">
       <label id="useFirefoxSync" data-l10n-id="use-firefox-sync"/>
       <deck id="getStarted">
@@ -69,17 +69,17 @@
   </vbox>
 #endif
 
 </groupbox>
 
 <!-- Tab preferences -->
 <groupbox data-category="paneGeneral"
           hidden="true">
-    <caption><label data-l10n-id="tabs-group-header"/></caption>
+    <label><html:h2 data-l10n-id="tabs-group-header"/></label>
 
     <checkbox id="ctrlTabRecentlyUsedOrder" data-l10n-id="ctrl-tab-recently-used-order"
               preference="browser.ctrlTab.recentlyUsedOrder"
               oncommand="Services.prefs.clearUserPref('browser.ctrlTab.migrated');"/>
 
     <checkbox id="linkTargeting" data-l10n-id="open-new-link-as-tabs"
               preference="browser.link.open_newwindow"
               onsyncfrompreference="return gMainPane.readLinkTarget();"
@@ -133,17 +133,17 @@
       class="subcategory"
       hidden="true"
       data-category="paneGeneral">
   <label class="header-name" flex="1" data-l10n-id="language-and-appearance-header"/>
 </hbox>
 
 <!-- Fonts and Colors -->
 <groupbox id="fontsGroup" data-category="paneGeneral" hidden="true">
-  <caption><label data-l10n-id="fonts-and-colors-header"/></caption>
+  <label><html:h2 data-l10n-id="fonts-and-colors-header"/></label>
 
   <hbox id="fontSettings">
     <hbox align="center" flex="1">
       <label control="defaultFont" data-l10n-id="default-font"/>
       <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
       <hbox flex="1">
         <menulist id="defaultFont" flex="1" delayprefsave="true" onsyncfrompreference="return FontBuilder.readFontSelection(this);"/>
       </hbox>
@@ -275,17 +275,17 @@
                 colors-visited-links
               "/>
     </hbox>
   </hbox>
 </groupbox>
 
 <!-- Languages -->
 <groupbox id="languagesGroup" data-category="paneGeneral" hidden="true">
-  <caption><label data-l10n-id="language-header"/></caption>
+  <label><html:h2 data-l10n-id="language-header"/></label>
 
   <vbox id="browserLanguagesBox" align="start" hidden="true">
     <description flex="1" controls="chooseBrowserLanguage" data-l10n-id="choose-browser-language-description"/>
     <hbox>
       <menulist id="defaultBrowserLanguage" oncommand="gMainPane.onBrowserLanguageChange(event)">
         <menupopup/>
       </menulist>
       <button id="manageBrowserLanguagesButton"
@@ -348,17 +348,17 @@
       class="subcategory"
       hidden="true"
       data-category="paneGeneral">
   <label class="header-name" flex="1" data-l10n-id="files-and-applications-title"/>
 </hbox>
 
 <!--Downloads-->
 <groupbox id="downloadsGroup" data-category="paneGeneral" hidden="true">
-  <caption><label data-l10n-id="download-header"/></caption>
+  <label><html:h2 data-l10n-id="download-header"/></label>
 
   <radiogroup id="saveWhere"
               preference="browser.download.useDownloadDir"
               onsyncfrompreference="return gMainPane.readUseDownloadDir();">
     <hbox>
       <radio id="saveTo"
              value="true"
              data-l10n-id="download-save-to"/>
@@ -375,17 +375,17 @@
            hidden="true"/>
     <radio id="alwaysAsk"
            value="false"
            data-l10n-id="download-always-ask-where"/>
   </radiogroup>
 </groupbox>
 
 <groupbox id="applicationsGroup" data-category="paneGeneral" hidden="true">
-  <caption><label data-l10n-id="applications-header"/></caption>
+  <label><html:h2 data-l10n-id="applications-header"/></label>
   <description data-l10n-id="applications-description"/>
   <textbox id="filter" flex="1"
            type="search"
            data-l10n-id="applications-filter"
            aria-controls="handlersView"/>
 
   <richlistbox id="handlersView"
                preference="pref.downloads.disable_button.edit_actions">
@@ -398,17 +398,17 @@
                  flex="1"/>
     </listheader>
   </richlistbox>
 </groupbox>
 
 
 <!-- DRM Content -->
 <groupbox id="drmGroup" data-category="paneGeneral" data-subcategory="drm" hidden="true">
-  <caption><label data-l10n-id="drm-content-header"/></caption>
+  <label><html:h2 data-l10n-id="drm-content-header"/></label>
   <grid id="contentGrid2">
     <columns>
       <column flex="1"/>
       <column/>
     </columns>
     <rows id="contentRows-2">
       <row id="playDRMContentRow">
         <hbox align="center">
@@ -430,17 +430,17 @@
       class="subcategory"
       hidden="true"
       data-category="paneGeneral">
   <label class="header-name" flex="1" data-l10n-id="update-application-title"/>
 </hbox>
 
 <!-- Update -->
 <groupbox id="updateApp" data-category="paneGeneral" hidden="true">
-  <caption class="search-header" hidden="true"><label data-l10n-id="update-application-title"/></caption>
+  <label class="search-header" hidden="true"><html:h2 data-l10n-id="update-application-title"/></label>
 
   <label data-l10n-id="update-application-description"/>
   <hbox align="center">
     <vbox flex="1">
       <description id="updateAppInfo">
         <html:a id="releasenotes" target="_blank" data-l10n-name="learn-more" class="learnMore text-link" hidden="true"/>
       </description>
       <description id="distribution" class="text-blurb" hidden="true"/>
@@ -576,17 +576,17 @@
       class="subcategory"
       hidden="true"
       data-category="paneGeneral">
   <label class="header-name" flex="1" data-l10n-id="performance-title"/>
 </hbox>
 
 <!-- Performance -->
 <groupbox id="performanceGroup" data-category="paneGeneral" hidden="true">
-  <caption class="search-header" hidden="true"><label data-l10n-id="performance-title"/></caption>
+  <label class="search-header" hidden="true"><html:h2 data-l10n-id="performance-title"/></label>
 
   <hbox align="center">
     <checkbox id="useRecommendedPerformanceSettings"
               class="tail-with-learn-more"
               data-l10n-id="performance-use-recommended-settings-checkbox"
               preference="browser.preferences.defaultPerformanceSettings.enabled"/>
     <label id="performanceSettingsLearnMore" class="learnMore text-link" data-l10n-id="performance-settings-learn-more"/>
   </hbox>
@@ -622,17 +622,17 @@
       class="subcategory"
       hidden="true"
       data-category="paneGeneral">
   <label class="header-name" flex="1" data-l10n-id="browsing-title"/>
 </hbox>
 
 <!-- Browsing -->
 <groupbox id="browsingGroup" data-category="paneGeneral" hidden="true">
-  <caption class="search-header" hidden="true"><label data-l10n-id="browsing-title"/></caption>
+  <label class="search-header" hidden="true"><html:h2 data-l10n-id="browsing-title"/></label>
 
   <checkbox id="useAutoScroll"
             data-l10n-id="browsing-use-autoscroll"
             preference="general.autoScroll"/>
   <checkbox id="useSmoothScrolling"
             data-l10n-id="browsing-use-smooth-scrolling"
             preference="general.smoothScroll"/>
 
@@ -661,17 +661,17 @@
       class="subcategory"
       hidden="true"
       data-category="paneGeneral">
   <label class="header-name" flex="1" data-l10n-id="network-settings-title"/>
 </hbox>
 
 <!-- Network Settings-->
 <groupbox id="connectionGroup" data-category="paneGeneral" hidden="true">
-  <caption class="search-header" hidden="true"><label data-l10n-id="network-settings-title"/></caption>
+  <label class="search-header" hidden="true"><html:h2 data-l10n-id="network-settings-title"/></label>
 
   <hbox align="center">
     <hbox align="center" flex="1">
       <description id="connectionSettingsDescription" control="connectionSettings"/>
       <spacer width="5"/>
       <label id="connectionSettingsLearnMore" class="learnMore text-link"
         data-l10n-id="network-proxy-connection-learn-more">
       </label>
--- a/browser/components/preferences/in-content/preferences.js
+++ b/browser/components/preferences/in-content/preferences.js
@@ -298,17 +298,17 @@ function scrollAndHighlight(subcategory)
 
 /**
  * If there is no visible second level header it will return first level header,
  * otherwise return second level header.
  * @returns {Element} - The closest displayed header.
  */
 function getClosestDisplayedHeader(element) {
   let header = element.closest("groupbox");
-  let searchHeader = header.querySelector("caption.search-header");
+  let searchHeader = header.querySelector(".search-header");
   if (searchHeader && searchHeader.hidden &&
       header.previousSibling.classList.contains("subcategory")) {
     header = header.previousSibling;
   }
   return header;
 }
 
 function scrollContentTo(element) {
--- a/browser/components/preferences/in-content/preferences.xul
+++ b/browser/components/preferences/in-content/preferences.xul
@@ -20,16 +20,17 @@
 <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd">
 <!ENTITY % certManagerDTD SYSTEM "chrome://pippki/locale/certManager.dtd">
 %brandDTD;
 %certManagerDTD;
 ]>
 
 <page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
       xmlns:html="http://www.w3.org/1999/xhtml"
+      role="document"
       data-l10n-id="pref-page"
       data-l10n-attrs="title">
 
   <linkset>
     <link rel="localization" href="branding/brand.ftl"/>
     <link rel="localization" href="browser/branding/sync-brand.ftl"/>
     <link rel="localization" href="browser/preferences/preferences.ftl"/>
     <!-- Used by fontbuilder.js -->
--- a/browser/components/preferences/in-content/privacy.xul
+++ b/browser/components/preferences/in-content/privacy.xul
@@ -13,19 +13,17 @@
       class="subcategory"
       hidden="true"
       data-category="panePrivacy">
   <label class="header-name" flex="1" data-l10n-id="privacy-header"/>
 </hbox>
 
 <!-- Tracking / Content Blocking -->
 <groupbox id="trackingGroup" data-category="panePrivacy" hidden="true" aria-describedby="contentBlockingDescription">
-  <caption>
-    <label id="contentBlockingHeader" data-l10n-id="content-blocking-header"/>
-  </caption>
+  <label id="contentBlockingHeader"><html:h2 data-l10n-id="content-blocking-header"/></label>
   <vbox data-subcategory="trackingprotection">
     <hbox align="start">
       <image id="trackingProtectionShield"/>
       <vbox flex="1">
         <description class="description-with-side-element">
           <html:span id="contentBlockingDescription" class="tail-with-learn-more" data-l10n-id="content-blocking-description"></html:span>
           <label id="contentBlockingLearnMore" class="learnMore text-link" data-l10n-id="content-blocking-learn-more"/>
         </description>
@@ -200,17 +198,17 @@
         <radio value="false" data-l10n-id="do-not-track-option-default-content-blocking"/>
       </radiogroup>
     </vbox>
   </vbox>
 </groupbox>
 
 <!-- Site Data -->
 <groupbox id="siteDataGroup" data-category="panePrivacy" hidden="true" aria-describedby="totalSiteDataSize">
-  <caption><label data-l10n-id="sitedata-header"/></caption>
+  <label><html:h2 data-l10n-id="sitedata-header"/></label>
 
   <hbox data-subcategory="sitedata" align="baseline">
     <vbox flex="1">
       <description class="description-with-side-element" flex="1">
         <html:span id="totalSiteDataSize" class="tail-with-learn-more"></html:span>
         <label id="siteDataLearnMoreLink"
           class="learnMore text-link" data-l10n-id="sitedata-learn-more"/>
       </description>
@@ -263,17 +261,17 @@
                 " />
       </hbox>
     </vbox>
   </hbox>
 </groupbox>
 
 <!-- Passwords -->
 <groupbox id="passwordsGroup" orient="vertical" data-category="panePrivacy" hidden="true">
-  <caption><label data-l10n-id="logins-header"/></caption>
+  <label><html:h2 data-l10n-id="logins-header"/></label>
 
   <vbox id="passwordSettings">
     <hbox id="savePasswordsBox">
       <checkbox id="savePasswords"
                 data-l10n-id="forms-ask-to-save-logins"
                 preference="signon.rememberSignons"
                 onsyncfrompreference="return gPrivacyPane.readSavePasswords();"
                 flex="1" />
@@ -317,17 +315,17 @@
 <!-- The form autofill section is inserted in to this box
      after the form autofill extension has initialized. -->
 <groupbox id="formAutofillGroupBox"
           data-category="panePrivacy"
           data-subcategory="form-autofill"></groupbox>
 
 <!-- History -->
 <groupbox id="historyGroup" data-category="panePrivacy" hidden="true">
-  <caption><label data-l10n-id="history-header"/></caption>
+  <label><html:h2 data-l10n-id="history-header"/></label>
   <hbox align="center">
     <label id="historyModeLabel"
            control="historyMode"
            data-l10n-id="history-remember-label"/>
     <!-- Please don't remove the wrapping hbox/vbox/box for these elements. It's used to properly compute the search tooltip position. -->
     <hbox>
       <menulist id="historyMode">
         <menupopup>
@@ -418,17 +416,17 @@
     </vbox>
   </hbox>
 </groupbox>
 
 <!-- Address Bar -->
 <groupbox id="locationBarGroup"
           data-category="panePrivacy"
           hidden="true">
-  <caption><label data-l10n-id="addressbar-header"/></caption>
+  <label><html:h2 data-l10n-id="addressbar-header"/></label>
   <label id="locationBarSuggestionLabel" data-l10n-id="addressbar-suggest"/>
   <checkbox id="historySuggestion" data-l10n-id="addressbar-locbar-history-option"
             preference="browser.urlbar.suggest.history"/>
   <checkbox id="bookmarkSuggestion" data-l10n-id="addressbar-locbar-bookmarks-option"
             preference="browser.urlbar.suggest.bookmark"/>
   <checkbox id="openpageSuggestion" data-l10n-id="addressbar-locbar-openpage-option"
             preference="browser.urlbar.suggest.openpage"/>
   <label class="text-link" id="openSearchEnginePreferences"
@@ -438,18 +436,18 @@
 <hbox id="permissionsCategory"
       class="subcategory"
       hidden="true"
       data-category="panePrivacy">
   <label class="header-name" flex="1" data-l10n-id="permissions-header"/>
 </hbox>
 
 <!-- Permissions -->
-<groupbox id="permissionsGroup" data-category="panePrivacy" hidden="true" data-subcategory="permissions" aria-labelledby="permissionsGroupLabel">
-  <caption class="search-header" hidden="true"><label data-l10n-id="permissions-header" id="permissionsGroupLabel"/></caption>
+<groupbox id="permissionsGroup" data-category="panePrivacy" hidden="true" data-subcategory="permissions">
+  <label class="search-header" hidden="true"><html:h2 data-l10n-id="permissions-header"/></label>
 
   <grid>
     <columns>
       <column flex="1"/>
       <column/>
     </columns>
     <rows>
       <row id="locationSettingsRow" align="center" role="group" aria-labelledby="locationPermissionsLabel">
@@ -668,18 +666,18 @@
 #ifdef MOZ_DATA_REPORTING
 <hbox id="dataCollectionCategory"
       class="subcategory"
       hidden="true"
       data-category="panePrivacy">
   <label class="header-name" flex="1" data-l10n-id="collection-header"/>
 </hbox>
 
-<groupbox id="dataCollectionGroup" data-category="panePrivacy" hidden="true" aria-labelledby="dataCollectionGroupLabel">
-  <caption class="search-header" hidden="true"><label data-l10n-id="collection-header" id="dataCollectionGroupLabel"/></caption>
+<groupbox id="dataCollectionGroup" data-category="panePrivacy" hidden="true">
+  <label class="search-header" hidden="true"><html:h2 data-l10n-id="collection-header"/></label>
 
   <description>
     <label class="tail-with-learn-more" data-l10n-id="collection-description"/>
     <label id="dataCollectionPrivacyNotice"
            class="learnMore text-link"
            data-l10n-id="collection-privacy-notice"/>
   </description>
   <vbox data-subcategory="reports">
@@ -740,17 +738,17 @@
       class="subcategory"
       hidden="true"
       data-category="panePrivacy">
   <label class="header-name" flex="1" data-l10n-id="security-header"/>
 </hbox>
 
 <!-- addons, forgery (phishing) UI Security -->
 <groupbox id="browsingProtectionGroup" data-category="panePrivacy" hidden="true">
-  <caption><label data-l10n-id="security-browsing-protection"/></caption>
+  <label><html:h2 data-l10n-id="security-browsing-protection"/></label>
   <hbox align = "center">
     <checkbox id="enableSafeBrowsing"
               data-l10n-id="security-enable-safe-browsing"
               class="tail-with-learn-more"/>
     <label id="enableSafeBrowsingLearnMore"
            class="learnMore text-link" data-l10n-id="security-enable-safe-browsing-link"/>
   </hbox>
   <vbox class="indent">
@@ -758,17 +756,17 @@
               data-l10n-id="security-block-downloads"/>
     <checkbox id="blockUncommonUnwanted"
               data-l10n-id="security-block-uncommon-software"/>
   </vbox>
 </groupbox>
 
 <!-- Certificates -->
 <groupbox id="certSelection" data-category="panePrivacy" hidden="true">
-  <caption><label data-l10n-id="certs-header"/></caption>
+  <label><html:h2 data-l10n-id="certs-header"/></label>
   <description id="CertSelectionDesc" control="certSelection" data-l10n-id="certs-personal-label"/>
 
   <!--
     The values on these radio buttons may look like l10n issues, but
     they're not - this preference uses *those strings* as its values.
     I KID YOU NOT.
   -->
   <radiogroup id="certSelection"
--- a/browser/components/preferences/in-content/search.xul
+++ b/browser/components/preferences/in-content/search.xul
@@ -4,28 +4,28 @@
     <hbox id="searchCategory"
           class="subcategory"
           hidden="true"
           data-category="paneSearch">
       <label class="header-name" flex="1" data-l10n-id="pane-search-title" />
     </hbox>
 
     <groupbox id="searchbarGroup" data-category="paneSearch">
-      <caption><label id="searchbarLabel" data-l10n-id="search-bar-header" /></caption>
-      <radiogroup id="searchBarVisibleGroup" aria-labelledby="searchbarLabel" preference="browser.search.widget.inNavBar">
+      <label control="searchBarVisibleGroup"><html:h2 data-l10n-id="search-bar-header"/></label>
+      <radiogroup id="searchBarVisibleGroup" preference="browser.search.widget.inNavBar">
         <radio id="searchBarHiddenRadio" value="false" data-l10n-id="search-bar-hidden"/>
         <image class="searchBarImage searchBarHiddenImage" role="presentation"/>
         <radio id="searchBarShownRadio" value="true" data-l10n-id="search-bar-shown"/>
         <image class="searchBarImage searchBarShownImage" role="presentation"/>
       </radiogroup>
     </groupbox>
 
     <!-- Default Search Engine -->
     <groupbox id="defaultEngineGroup" data-category="paneSearch">
-      <caption><label data-l10n-id="search-engine-default-header" /></caption>
+      <label><html:h2 data-l10n-id="search-engine-default-header" /></label>
       <description data-l10n-id="search-engine-default-desc" />
 
       <hbox id="browserDefaultSearchExtensionContent"
             align="center" hidden="true" class="extension-controlled">
         <description control="disableDefaultSearchExtension" flex="1"/>
       </hbox>
 
       <hbox>
@@ -47,17 +47,17 @@
         <hbox id="urlBarSuggestionPermanentPBLabel"
               align="center" class="indent">
           <label flex="1" data-l10n-id="search-suggestions-cant-show" />
         </hbox>
       </vbox>
     </groupbox>
 
     <groupbox id="oneClickSearchProvidersGroup" data-category="paneSearch">
-      <caption><label data-l10n-id="search-one-click-header" /></caption>
+      <label><html:h2 data-l10n-id="search-one-click-header" /></label>
       <description data-l10n-id="search-one-click-desc" />
 
       <tree id="engineList" flex="1" rows="8" hidecolumnpicker="true" editable="true"
             seltype="single" allowunderflowscroll="true">
         <treechildren id="engineChildren" flex="1"/>
         <treecols>
           <treecol id="engineShown" type="checkbox" editable="true" sortable="false"/>
           <treecol id="engineName" flex="4" data-l10n-id="search-choose-engine-column" sortable="false"/>
--- a/browser/components/preferences/in-content/sync.js
+++ b/browser/components/preferences/in-content/sync.js
@@ -303,17 +303,18 @@ var gSyncPane = {
     document.getElementById("fxaChangeDeviceName").disabled = !syncReady;
 
     // Clear the profile image (if any) of the previously logged in account.
     document.querySelector("#fxaLoginVerified > .fxaProfileImage").style.removeProperty("list-style-image");
 
     if (state.displayName) {
       fxaLoginStatus.setAttribute("hasName", true);
       displayNameLabel.hidden = false;
-      displayNameLabel.textContent = state.displayName;
+      document.getElementById("fxaDisplayNameHeading").textContent =
+        state.displayName;
     } else {
       fxaLoginStatus.removeAttribute("hasName");
     }
     if (state.avatarURL) {
       let bgImage = "url(\"" + state.avatarURL + "\")";
       let profileImageElement = document.querySelector("#fxaLoginVerified > .fxaProfileImage");
       profileImageElement.style.listStyleImage = bgImage;
 
--- a/browser/components/preferences/in-content/sync.xul
+++ b/browser/components/preferences/in-content/sync.xul
@@ -14,31 +14,31 @@
   <label class="header-name" flex="1" data-l10n-id="pane-sync-title" />
 </hbox>
 
 <deck id="weavePrefsDeck" data-category="paneSync" hidden="true"
       data-hidden-from-search="true">
   <groupbox id="noFxaAccount">
     <hbox>
       <vbox flex="1">
-        <caption><label id="noFxaCaption" data-l10n-id="sync-signedout-caption"/></caption>
+        <label id="noFxaCaption"><html:h2 data-l10n-id="sync-signedout-caption"/></label>
         <description id="noFxaDescription" flex="1" data-l10n-id="sync-signedout-description"/>
       </vbox>
       <vbox>
         <image class="fxaSyncIllustration"/>
       </vbox>
     </hbox>
     <hbox id="fxaNoLoginStatus" align="center" flex="1">
       <vbox>
         <image class="fxaProfileImage"/>
       </vbox>
       <vbox flex="1">
         <hbox align="center" flex="1">
           <hbox align="center" flex="1">
-            <caption><label id="signedOutAccountBoxTitle" data-l10n-id="sync-signedout-account-title"/></caption>
+            <label id="signedOutAccountBoxTitle"><html:h2 data-l10n-id="sync-signedout-account-title"/></label>
           </hbox>
           <button id="noFxaSignIn"
                   class="accessory-button"
                   data-l10n-id="sync-signedout-account-signin"/>
         </hbox>
         <hbox align="center" flex="1">
           <html:a id="noFxaSignUp"
                   class="openLink"
@@ -65,30 +65,32 @@
         class="text-link" target="_blank"/>
     </label>
   </groupbox>
 
   <vbox id="hasFxaAccount">
     <hbox>
       <vbox id="fxaContentWrapper" flex="1">
         <groupbox id="fxaGroup">
-          <caption class="search-header" hidden="true"><label data-l10n-id="pane-sync-title"/></caption>
+          <label class="search-header" hidden="true"><html:h2 data-l10n-id="pane-sync-title"/></label>
 
           <deck id="fxaLoginStatus" flex="1">
 
             <!-- logged in and verified and all is good -->
             <hbox id="fxaLoginVerified" align="center" flex="1">
               <image class="fxaProfileImage actionable"
                      role="button"
                      onclick="gSyncPane.openChangeProfileImage(event);"
                      onkeypress="gSyncPane.openChangeProfileImage(event);"
                      data-l10n-id="sync-profile-picture"/>
               <vbox flex="1" pack="center">
                 <hbox flex="1" align="baseline">
-                  <caption><label id="fxaDisplayName" hidden="true"/></caption>
+                  <label id="fxaDisplayName" hidden="true">
+                    <html:h2 id="fxaDisplayNameHeading"/>
+                  </label>
                   <label id="fxaEmailAddress" flex="1" crop="end"/>
                   <button id="fxaUnlinkButton"
                           class="accessory-button"
                           data-l10n-id="sync-disconnect"/>
                 </hbox>
                 <hbox>
                   <html:a id="verifiedManage" class="openLink"
                           data-l10n-id="sync-manage-account"
@@ -134,17 +136,17 @@
                   <button id="rejectReSignIn" data-l10n-id="sync-sign-in"/>
                   <button id="rejectUnlinkFxaAccount" data-l10n-id="sync-remove-account"/>
                 </hbox>
               </vbox>
             </hbox>
           </deck>
         </groupbox>
         <groupbox id="syncOptions">
-          <caption><label data-l10n-id="sync-signedin-settings-header"/></caption>
+          <label><html:h2 data-l10n-id="sync-signedin-settings-header"/></label>
           <description data-l10n-id="sync-signedin-settings-desc"/>
           <hbox id="fxaSyncEngines">
             <vbox flex="1">
               <!-- by design, no tooltip for bookmarks or history -->
               <checkbox data-l10n-id="sync-engine-bookmarks"
                         preference="engine.bookmarks"/>
               <checkbox data-l10n-id="sync-engine-history"
                         preference="engine.history"/>
@@ -164,19 +166,17 @@
                         preference="engine.prefs"/>
             </vbox>
             <spacer/>
           </hbox>
         </groupbox>
       </vbox>
     </hbox>
     <groupbox>
-      <caption>
-        <label control="fxaSyncComputerName" data-l10n-id="sync-device-name-header"/>
-      </caption>
+      <label control="fxaSyncComputerName"><html:h2 data-l10n-id="sync-device-name-header"/></label>
       <hbox id="fxaDeviceName">
         <textbox id="fxaSyncComputerName" flex="1" disabled="true"/>
         <button id="fxaChangeDeviceName"
                 data-l10n-id="sync-device-name-change"/>
         <button id="fxaCancelChangeDeviceName"
                 data-l10n-id="sync-device-name-cancel"
                 hidden="true"/>
         <button id="fxaSaveChangeDeviceName"
--- a/browser/components/preferences/sanitize.xul
+++ b/browser/components/preferences/sanitize.xul
@@ -7,16 +7,17 @@
 
 <?xml-stylesheet href="chrome://global/skin/"?>
 <?xml-stylesheet href="chrome://browser/skin/preferences/preferences.css"?>
 
 <!DOCTYPE dialog>
 
 <dialog id="SanitizeDialog" type="child"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
         buttons="accept,cancel,help"
         persist="lastSelected screenX screenY"
         role="dialog"
         ondialoghelp="openPrefsHelp()"
         data-l10n-id="sanitize-prefs"
         data-l10n-attrs="style"
         helpTopic="prefs-clear-private-data"
         onload="gSanitizeDialog.init();">
@@ -33,17 +34,17 @@
     <key data-l10n-id="window-close" modifiers="accel" oncommand="Preferences.close(event)"/>
   </keyset>
 
   <script type="application/javascript" src="chrome://browser/content/preferences/sanitize.js"/>
 
   <description data-l10n-id="clear-data-settings-label"></description>
 
   <groupbox>
-    <caption><label data-l10n-id="history-section-label"></label></caption>
+    <label><html:h2 data-l10n-id="history-section-label"/></label>
     <grid flex="1">
       <columns>
         <column data-l10n-id="sanitize-prefs-style" data-l10n-attrs="style"/>
         <column flex="1"/>
       </columns>
       <rows>
         <row>
           <checkbox data-l10n-id="item-history-and-downloads"
@@ -60,17 +61,17 @@
         <row>
           <checkbox data-l10n-id="item-form-search-history"
                     preference="privacy.clearOnShutdown.formdata"/>
         </row>
       </rows>
     </grid>
   </groupbox>
   <groupbox>
-    <caption><label data-l10n-id="data-section-label"></label></caption>
+    <label><html:h2 data-l10n-id="data-section-label"/></label>
     <grid flex="1">
       <columns>
         <column data-l10n-id="sanitize-prefs-style" data-l10n-attrs="style"/>
         <column flex="1"/>
       </columns>
       <rows>
         <row>
           <checkbox data-l10n-id="item-site-preferences"
--- a/browser/extensions/formautofill/FormAutofillPreferences.jsm
+++ b/browser/extensions/formautofill/FormAutofillPreferences.jsm
@@ -31,16 +31,18 @@ const {
   EDIT_CREDITCARD_KEYWORDS,
 } = FormAutofillUtils;
 // Add credit card enabled flag in telemetry environment for recording the number of
 // users who disable/enable the credit card autofill feature.
 
 this.log = null;
 FormAutofill.defineLazyLogGetter(this, EXPORTED_SYMBOLS[0]);
 
+const HTML_NS = "http://www.w3.org/1999/xhtml";
+
 function FormAutofillPreferences() {
   this.bundle = Services.strings.createBundle(BUNDLE_URI);
 }
 
 FormAutofillPreferences.prototype = {
   /**
    * Create the Form Autofill preference group.
    *
@@ -65,18 +67,18 @@ FormAutofillPreferences.prototype = {
   /**
    * Create Form Autofill preference group
    *
    * @param  {XULDocument} document
    */
   createPreferenceGroup(document) {
     let learnMoreURL = Services.urlFormatter.formatURLPref("app.support.baseURL") + "autofill-card-address";
     let formAutofillFragment = document.createDocumentFragment();
-    let formAutofillGroupBoxCaption = document.createXULElement("caption");
-    let formAutofillGroupBoxCaptionLabel = document.createXULElement("label");
+    let formAutofillGroupBoxLabel = document.createXULElement("label");
+    let formAutofillGroupBoxLabelHeading = document.createElementNS(HTML_NS, "h2");
     let formAutofillGroupBoxDescription = document.createXULElement("description");
     let formAutofillGroup = document.createXULElement("vbox");
     let addressAutofill = document.createXULElement("hbox");
     let addressAutofillCheckboxGroup = document.createXULElement("hbox");
     let addressAutofillCheckbox = document.createXULElement("checkbox");
     let addressAutofillLearnMore = document.createXULElement("label");
     let savedAddressesBtn = document.createXULElement("button");
     // Wrappers are used to properly compute the search tooltip positions
@@ -86,17 +88,17 @@ FormAutofillPreferences.prototype = {
     savedAddressesBtn.className = "accessory-button";
     addressAutofillCheckbox.className = "tail-with-learn-more";
     addressAutofillLearnMore.className = "learnMore text-link";
 
     formAutofillGroup.id = "formAutofillGroup";
     addressAutofill.id = "addressAutofill";
     addressAutofillLearnMore.id = "addressAutofillLearnMore";
 
-    formAutofillGroupBoxCaptionLabel.textContent = this.bundle.GetStringFromName("autofillHeader");
+    formAutofillGroupBoxLabelHeading.textContent = this.bundle.GetStringFromName("autofillHeader");
     formAutofillGroupBoxDescription.textContent =
       this.bundle.formatStringFromName("autofillDescription",
                                        [FormAutofillUtils.brandBundle.GetStringFromName("brandShortName")],
                                        1);
 
     addressAutofill.setAttribute("data-subcategory", "address-autofill");
     addressAutofillCheckbox.setAttribute("label", this.bundle.GetStringFromName("autofillAddressesCheckbox"));
     addressAutofillLearnMore.textContent = this.bundle.GetStringFromName("learnMoreLabel");
@@ -114,18 +116,18 @@ FormAutofillPreferences.prototype = {
     // Manually set the checked state
     if (FormAutofill.isAutofillAddressesEnabled) {
       addressAutofillCheckbox.setAttribute("checked", true);
     }
 
     addressAutofillCheckboxGroup.align = "center";
     addressAutofillCheckboxGroup.flex = 1;
 
-    formAutofillGroupBoxCaption.appendChild(formAutofillGroupBoxCaptionLabel);
-    formAutofillFragment.appendChild(formAutofillGroupBoxCaption);
+    formAutofillGroupBoxLabel.appendChild(formAutofillGroupBoxLabelHeading);
+    formAutofillFragment.appendChild(formAutofillGroupBoxLabel);
     formAutofillFragment.appendChild(formAutofillGroupBoxDescription);
     formAutofillFragment.appendChild(formAutofillGroup);
     formAutofillGroup.appendChild(addressAutofill);
     addressAutofill.appendChild(addressAutofillCheckboxGroup);
     addressAutofillCheckboxGroup.appendChild(addressAutofillCheckbox);
     addressAutofillCheckboxGroup.appendChild(addressAutofillLearnMore);
     addressAutofill.appendChild(savedAddressesBtnWrapper);
     savedAddressesBtnWrapper.appendChild(savedAddressesBtn);
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -23,20 +23,20 @@
   width: 100%;
   padding: 0;
 }
 
 groupbox[data-category] {
   margin: 0 0 32px;
 }
 
-caption {
+html|h2 {
   margin: 16px 0 4px;
   font-size: 1.14em;
-  font-weight: 600;
+  line-height: normal;
 }
 
 .header-name {
   margin-bottom: 8px;
 }
 
 description.indent,
 .indent > description {
--- a/toolkit/locales/en-US/toolkit/preferences/preferences.ftl
+++ b/toolkit/locales/en-US/toolkit/preferences/preferences.ftl
@@ -27,13 +27,13 @@ set-password-reenter-password = Re-enter
 set-password-meter = Password quality meter
 set-password-meter-loading = Loading
 master-password-description = A Master Password is used to protect sensitive information like site passwords. If you create a Master Password you will be asked to enter it once per session when { -brand-short-name } retrieves saved information protected by the password.
 master-password-warning = Please make sure you remember the Master Password you have set. If you forget your Master Password, you will be unable to access any of the information protected by it.
 
 remove-password =
     .title = Remove Master Password
 remove-info =
-    .label = You must enter your current password to proceed:
+    .value = You must enter your current password to proceed:
 remove-warning1 = Your Master Password is used to protect sensitive information like site passwords.
 remove-warning2 = If you remove your Master Password your information will not be protected if your computer is compromised.
 remove-password-old-password =
-    .label = Current password:
+    .value = Current password:
--- a/toolkit/mozapps/preferences/removemp.xul
+++ b/toolkit/mozapps/preferences/removemp.xul
@@ -22,17 +22,17 @@
   <vbox id="warnings">
     <description data-l10n-id="remove-warning1"></description>
     <description class="header" data-l10n-id="remove-warning2"></description>
   </vbox>
 
   <separator class="thin"/>
 
   <groupbox>
-    <caption  data-l10n-id="remove-info"/>
+    <label data-l10n-id="remove-info"/>
 
     <hbox align="center">
       <label control="password" data-l10n-id="remove-password-old-password"/> 
       <textbox id="password" type="password"
                oninput="gRemovePasswordDialog.validateInput();"
                aria-describedby="warnings"/>
     </hbox>
   </groupbox>