Bug 1764137 - Add correct aria-roles to named-deck in firefoxview r=Gijs

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

browser/components/firefoxview/firefoxview.html

@@ -34,7 +34,7 @@
     </nav>
     <main>
       <template id="sync-setup-template">
-        <named-deck class="sync-setup-container" data-prefix="id:">
+        <named-deck class="sync-setup-container" role="region" aria-labelledby="collapsible-synced-tabs-header" data-prefix="id:">
           <div name="sync-setup-view0" data-prefix="id:-view0" class="card card-no-hover error-state" data-prefix="aria-labelledby:-view0-header">
             <icon class="icon info primary"></icon><h3 data-prefix="id:-view0-header" class="card-header"></h3>
             <section>

browser/components/storybook/stories/named-deck.stories.js

@@ -20,7 +20,7 @@ export const Tabs = () => html`
     <button is="named-deck-button" deck="tabs-deck" name="tab-2">Tab 2</button>
     <button is="named-deck-button" deck="tabs-deck" name="tab-3">Tab 3</button>
   </button-group>
-  <named-deck id="tabs-deck">
+  <named-deck id="tabs-deck" is-tabbed>
     <p name="tab-1">This is tab 1</p>
     <p name="tab-2">This is tab 2</p>
     <p name="tab-3">This is tab 3</p>
@@ -65,7 +65,7 @@ export const ListMenu = () => html`
       width: 200px;
     }
   </style>
-  <named-deck id="list-deck">
+  <named-deck id="list-deck" is-tabbed>
     <section name="list">
       <button-group orientation="vertical" class="vertical-group">
         <button is="named-deck-button" deck="list-deck" name="tab-1">

toolkit/content/widgets/named-deck.js

@@ -307,6 +307,10 @@
    * deck.selectedViewName == "dogs"; // Dog stuff is shown.
    * deck.setAttribute("selected-view", "cats");
    * deck.selectedViewName == "cats"; // Cat info is shown.
+   *
+   * Add the is-tabbed attribute to <named-deck> if you want
+   * each of its children to have a tabpanel role and aria-labelledby
+   * referencing the NamedDeckButton component.
    */
   class NamedDeck extends HTMLElement {
     static get observedAttributes() {
@@ -372,8 +376,11 @@
       let { selectedViewName } = this;
       for (let view of this.children) {
         let name = view.getAttribute("name");
-        view.setAttribute("aria-labelledby", `${this.id}-button-${name}`);
-        view.setAttribute("role", "tabpanel");
+
+        if (this.hasAttribute("is-tabbed")) {
+          view.setAttribute("aria-labelledby", `${this.id}-button-${name}`);
+          view.setAttribute("role", "tabpanel");
+        }
 
         if (name === selectedViewName) {
           view.slot = "selected";

toolkit/mozapps/extensions/content/aboutaddons.html

@@ -234,7 +234,7 @@
         <button is="named-deck-button" deck="details-deck" name="permissions" data-l10n-id="permissions-addon-button" class="tab-button ghost-button"></button>
         <button is="named-deck-button" deck="details-deck" name="release-notes" data-l10n-id="release-notes-addon-button" class="tab-button ghost-button"></button>
       </button-group>
-      <named-deck id="details-deck">
+      <named-deck id="details-deck" is-tabbed>
         <section name="details">
           <div class="addon-detail-description-wrapper">
             <div class="addon-detail-description"></div>