1 files changed, 63 insertions, 68 deletions
diff --git a/browser/components/firefoxview/card-container.mjs b/browser/components/firefoxview/card-container.mjs
index 1755d97555..84c6acc5c4 100644
--- a/browser/components/firefoxview/card-container.mjs
+++ b/browser/components/firefoxview/card-container.mjs
@@ -132,76 +132,71 @@ class CardContainer extends MozLitElement {
         rel="stylesheet"
         href="chrome://browser/content/firefoxview/card-container.css"
       />
-      <section
-        aria-labelledby="header"
-        aria-label=${ifDefined(this.sectionLabel)}
-      >
-        ${when(
-          this.toggleDisabled,
-          () => html`<div
-            class=${classMap({
-              "card-container": true,
-              inner: this.isInnerCard,
-              "empty-state": this.isEmptyState && !this.isInnerCard,
-            })}
+      ${when(
+        this.toggleDisabled,
+        () => html`<div
+          class=${classMap({
+            "card-container": true,
+            inner: this.isInnerCard,
+            "empty-state": this.isEmptyState && !this.isInnerCard,
+          })}
+        >
+          <span
+            id="header"
+            class="card-container-header"
+            ?hidden=${ifDefined(this.hideHeader)}
+            toggleDisabled
+            ?withViewAll=${this.showViewAll}
           >
-            <span
-              id="header"
-              class="card-container-header"
-              ?hidden=${ifDefined(this.hideHeader)}
-              toggleDisabled
-              ?withViewAll=${this.showViewAll}
-            >
-              <slot name="header"></slot>
-              <slot name="secondary-header"></slot>
-            </span>
-            <a
-              href="about:firefoxview#${this.shortPageName}"
-              @click=${this.viewAllClicked}
-              class="view-all-link"
-              data-l10n-id="firefoxview-view-all-link"
-              ?hidden=${!this.showViewAll}
-            ></a>
-            <slot name="main"></slot>
-            <slot name="footer" class="card-container-footer"></slot>
-          </div>`,
-          () => html`<details
-            class=${classMap({
-              "card-container": true,
-              inner: this.isInnerCard,
-              "empty-state": this.isEmptyState && !this.isInnerCard,
-            })}
-            ?open=${this.isExpanded}
-            ?isOpenTabsView=${this.removeBlockEndMargin}
-            @toggle=${this.onToggleContainer}
+            <slot name="header"></slot>
+            <slot name="secondary-header"></slot>
+          </span>
+          <a
+            href="about:firefoxview#${this.shortPageName}"
+            @click=${this.viewAllClicked}
+            class="view-all-link"
+            data-l10n-id="firefoxview-view-all-link"
+            ?hidden=${!this.showViewAll}
+          ></a>
+          <slot name="main"></slot>
+          <slot name="footer" class="card-container-footer"></slot>
+        </div>`,
+        () => html`<details
+          class=${classMap({
+            "card-container": true,
+            inner: this.isInnerCard,
+            "empty-state": this.isEmptyState && !this.isInnerCard,
+          })}
+          ?open=${this.isExpanded}
+          ?isOpenTabsView=${this.removeBlockEndMargin}
+          @toggle=${this.onToggleContainer}
+          role=${this.isInnerCard ? "presentation" : "group"}
+        >
+          <summary
+            class="card-container-header"
+            ?hidden=${ifDefined(this.hideHeader)}
+            ?withViewAll=${this.showViewAll}
           >
-            <summary
-              id="header"
-              class="card-container-header"
-              ?hidden=${ifDefined(this.hideHeader)}
-              ?withViewAll=${this.showViewAll}
-            >
-              <span
-                class="icon chevron-icon"
-                aria-role="presentation"
-                data-l10n-id="firefoxview-collapse-button-${this.isExpanded
-                  ? "hide"
-                  : "show"}"
-              ></span>
-              <slot name="header"></slot>
-            </summary>
-            <a
-              href="about:firefoxview#${this.shortPageName}"
-              @click=${this.viewAllClicked}
-              class="view-all-link"
-              data-l10n-id="firefoxview-view-all-link"
-              ?hidden=${!this.showViewAll}
-            ></a>
-            <slot name="main"></slot>
-            <slot name="footer" class="card-container-footer"></slot>
-          </details>`
-        )}
-      </section>
+            <span
+              class="icon chevron-icon"
+              role="presentation"
+              data-l10n-id="firefoxview-collapse-button-${this.isExpanded
+                ? "hide"
+                : "show"}"
+            ></span>
+            <slot name="header"></slot>
+          </summary>
+          <a
+            href="about:firefoxview#${this.shortPageName}"
+            @click=${this.viewAllClicked}
+            class="view-all-link"
+            data-l10n-id="firefoxview-view-all-link"
+            ?hidden=${!this.showViewAll}
+          ></a>
+          <slot name="main"></slot>
+          <slot name="footer" class="card-container-footer"></slot>
+        </details>`
+      )}
     `;
   }
 }