Bug 1688960 - Use h1 and h2 elements for panel headers and subheaders. r=Standard8,yzen,fluent-reviewers,flod

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

browser/base/content/browser-places.js

@@ -236,7 +236,7 @@ var StarUI = {
     this._isNewBookmark = aIsNewBookmark;
     this._itemGuids = null;
 
-    this._element("editBookmarkPanelTitle").value = this._isNewBookmark
+    this._element("editBookmarkPanelTitle").textContent = this._isNewBookmark
       ? gNavigatorBundle.getString("editBookmarkPanel.newBookmarkTitle")
       : gNavigatorBundle.getString("editBookmarkPanel.editBookmarkTitle");
 

browser/base/content/browser.xhtml

@@ -295,7 +295,7 @@
              tabspecific="true"
              aria-labelledby="editBookmarkPanelTitle">
         <box class="panel-header">
-          <label id="editBookmarkPanelTitle"/>
+          <html:h1 id="editBookmarkPanelTitle"/>
           <toolbarbutton tabindex="0" id="editBookmarkPanelInfoButton" class="panel-info-button" oncommand="StarUI.toggleRecommendation();" >
             <image/>
           </toolbarbutton>
@@ -1111,13 +1111,14 @@
                        class="subviewbutton subviewbutton-iconic"
                        command="Tools:Sanitize"/>
         <toolbarseparator/>
-        <label value="&appMenuHistory.recentHistory.label;"
-               class="subview-subheader"/>
+        <html:h2 id="panelMenu_recentHistory" class="subview-subheader">&appMenuHistory.recentHistory.label;</html:h2>
         <toolbaritem id="appMenu_historyMenu"
                      orient="vertical"
                      smoothscroll="false"
                      flatList="true"
-                     tooltip="bhTooltip">
+                     tooltip="bhTooltip"
+                     role="group"
+                     aria-labelledby="panelMenu_recentHistory">
           <!-- history menu items will go here -->
         </toolbaritem>
       </vbox>
@@ -1159,14 +1160,16 @@
                        data-l10n-args='{ "isVisible": false }'
                        oncommand="BookmarkingUI.toggleBookmarksToolbar('bookmark-tools');"/>
         <toolbarseparator/>
-        <label id="panelMenu_recentBookmarks"
-               data-l10n-id="bookmarks-recent-bookmarks-panel"
-               class="subview-subheader"/>
+        <html:h2 id="panelMenu_recentBookmarks"
+            data-l10n-id="bookmarks-recent-bookmarks-panel-subheader"
+            class="subview-subheader"/>
         <toolbaritem id="panelMenu_bookmarksMenu"
                      orient="vertical"
                      smoothscroll="false"
                      flatList="true"
-                     tooltip="bhTooltip">
+                     tooltip="bhTooltip"
+                     role="group"
+                     aria-labelledby="panelMenu_recentBookmarks">
           <!-- bookmarks menu items will go here -->
         </toolbaritem>
       </vbox>
@@ -1338,10 +1341,13 @@
                        data-l10n-id="appmenu-customizetoolbar"
                        command="cmd_CustomizeToolbars"/>
         <toolbarseparator/>
-        <label id="appmenu-developer-tools"
-               data-l10n-id="appmenu-developer-tools-subheader"
-               class="subview-subheader"/>
-        <vbox id="appmenu-developer-tools-view" class="panel-subview-body">
+        <html:h2 id="appmenu-developer-tools"
+            data-l10n-id="appmenu-developer-tools-subheader"
+            class="subview-subheader"/>
+        <vbox id="appmenu-developer-tools-view"
+              class="panel-subview-body"
+              role="group"
+              aria-labelledby="appmenu-developer-tools">
           <!-- Developer Tools menu items are inserted here -->
         </vbox>
       </vbox>

browser/base/content/test/general/browser_bug432599.js

@@ -84,12 +84,12 @@ function checkBookmarksPanel(phase) {
     case 3:
       return promisePopupShown(popupElement);
     case 2:
-      initialValue = titleElement.value;
+      initialValue = titleElement.textContent;
       initialRemoveHidden = removeElement.hidden;
       return promisePopupHidden(popupElement);
     case 4:
       Assert.equal(
-        titleElement.value,
+        titleElement.textContent,
         initialValue,
         "The bookmark panel's title should be the same"
       );

browser/components/customizableui/PanelMultiView.jsm

@@ -1382,9 +1382,7 @@ var PanelView = class extends AssociatedToNode {
       if (value) {
         // The back button has a label in it - we want to select
         // the label that's a direct child of the header.
-        header.querySelector(
-          ".panel-header > label > span"
-        ).textContent = value;
+        header.querySelector(".panel-header > h1 > span").textContent = value;
       } else {
         header.remove();
       }
@@ -1414,12 +1412,12 @@ var PanelView = class extends AssociatedToNode {
       backButton.blur();
     });
 
-    let label = this.document.createXULElement("label");
+    let h1 = this.document.createElement("h1");
     let span = this.document.createElement("span");
     span.textContent = value;
-    label.appendChild(span);
+    h1.appendChild(span);
 
-    header.append(backButton, label);
+    header.append(backButton, h1);
     this.node.prepend(header);
 
     if (gProtonAppMenuEnabled) {

browser/components/places/tests/browser/browser_bookmark_add_tags.js

@@ -59,7 +59,7 @@ add_task(async function test_add_bookmark_tags_from_bookmarkProperties() {
     // Click the bookmark star to bookmark the page.
     await clickBookmarkStar();
     Assert.equal(
-      bookmarkPanelTitle.value,
+      bookmarkPanelTitle.textContent,
       gNavigatorBundle.getString("editBookmarkPanel.newBookmarkTitle"),
       "Bookmark title is correct"
     );
@@ -73,7 +73,7 @@ add_task(async function test_add_bookmark_tags_from_bookmarkProperties() {
   // Click the bookmark star again to add tags.
   await clickBookmarkStar();
   Assert.equal(
-    bookmarkPanelTitle.value,
+    bookmarkPanelTitle.textContent,
     gNavigatorBundle.getString("editBookmarkPanel.editBookmarkTitle"),
     "Bookmark title is correct"
   );

browser/components/places/tests/browser/browser_bookmark_popup.js

@@ -101,7 +101,7 @@ async function test_bookmarks_popup({
         "Page is starred"
       );
       Assert.equal(
-        bookmarkPanelTitle.value,
+        bookmarkPanelTitle.textContent,
         isNewBookmark
           ? gNavigatorBundle.getString("editBookmarkPanel.newBookmarkTitle")
           : gNavigatorBundle.getString("editBookmarkPanel.editBookmarkTitle"),

browser/components/places/tests/browser/browser_bookmark_remove_tags.js

@@ -54,7 +54,7 @@ add_task(async function test_remove_tags_from_BookmarkStar() {
   // Check if the "Edit This Bookmark" panel is open.
   let bookmarkPanelTitle = document.getElementById("editBookmarkPanelTitle");
   Assert.equal(
-    bookmarkPanelTitle.value,
+    bookmarkPanelTitle.textContent,
     gNavigatorBundle.getString("editBookmarkPanel.editBookmarkTitle"),
     "Bookmark panel title is correct."
   );

browser/components/places/tests/browser/browser_bookmarks_change_title.js

@@ -63,7 +63,7 @@ add_task(async function test_change_title_from_BookmarkStar() {
 
   let bookmarkPanelTitle = document.getElementById("editBookmarkPanelTitle");
   Assert.equal(
-    bookmarkPanelTitle.value,
+    bookmarkPanelTitle.textContent,
     gNavigatorBundle.getString("editBookmarkPanel.editBookmarkTitle"),
     "Bookmark title is correct"
   );

browser/locales/en-US/browser/browser.ftl

@@ -551,8 +551,7 @@ bookmarks-show-all-bookmarks =
   .label = Show All Bookmarks
 bookmarks-manage-bookmarks =
   .label = Manage Bookmarks
-bookmarks-recent-bookmarks-panel =
-  .value = Recent Bookmarks
+bookmarks-recent-bookmarks-panel-subheader = Recent Bookmarks
 bookmarks-toolbar-chevron =
   .tooltiptext = Show more bookmarks
 bookmarks-sidebar-content =

browser/themes/shared/controlcenter/panel.inc.css

@@ -306,9 +306,9 @@
 #protections-popup-mainView-panel-header-span,
 #protections-popup-toast-panel-tp-on-desc,
 #protections-popup-toast-panel-tp-off-desc,
-#protections-popup .panel-header > label > span,
-#permission-popup .panel-header > label > span,
-#identity-popup .panel-header > label > span {
+#protections-popup .panel-header > h1 > span,
+#permission-popup .panel-header > h1 > span,
+#identity-popup .panel-header > h1 > span {
   display: inline-block;
   text-align: center;
   overflow-wrap: break-word;

browser/themes/shared/customizableui/panelUI.inc.css

@@ -1519,6 +1519,8 @@ panelmultiview .toolbaritem-combined-buttons > spacer.after-label {
 }
 
 .subview-subheader {
+  font-size: inherit;
+  font-weight: inherit;
   color: var(--panel-description-color);
 }
 
@@ -2001,19 +2003,21 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
   }
 } /** END not Proton **/
 
-.panel-header > label {
+.panel-header > h1 {
+  display: inline;
   flex: auto;
+  font-size: inherit;
   font-weight: 600;
   margin: 4px 0;
   text-align: center;
 }
 
-.panel-header > label > span {
+.panel-header > h1 > span {
   display: inline-block;
   white-space: pre-wrap;
 }
 
-.panel-header > .subviewbutton-back + label {
+.panel-header > .subviewbutton-back + h1 {
   /* Add the size of the back button to center properly. */
   margin-inline-end: 32px;
 }

python/l10n/fluent_migrations/bug_1688960_bookmark_panel_header.py

@@ -0,0 +1,22 @@
+# coding=utf8
+
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+
+from __future__ import absolute_import
+from fluent.migrate.helpers import transforms_from
+from fluent.migrate import COPY_PATTERN
+
+
+def migrate(ctx):
+    """Bug 1688960 - Use h1 elements for .panel-header's , part {index}."""
+    ctx.add_transforms(
+        "browser/browser/browser.ftl",
+        "browser/browser/browser.ftl",
+        transforms_from(
+            """
+bookmarks-recent-bookmarks-panel-subheader = { COPY_PATTERN(from_path, "bookmarks-recent-bookmarks-panel.value") }
+""",
+            from_path="browser/browser/browser.ftl",
+        ),
+    )