fix(sbb-tab-group): fix nested tab groups logic (#2816)

Closes #2814 --------- Co-authored-by: Lukas Spirig <[email protected]> Co-authored-by: Jeremias Peier <[email protected]>
sbb-design-systems · Jun 25, 2024 · 4674a61 · 4674a61
1 parent 1ec3cb5
commit 4674a61
Show file tree

Hide file tree

Showing 14 changed files with 111 additions and 180 deletions.
diff --git a/src/elements/tabs/tab-group/__snapshots__/tab-group.snapshot.spec.snap.js b/src/elements/tabs/tab-group/__snapshots__/tab-group.snapshot.spec.snap.js
@@ -21,9 +21,7 @@ snapshots["sbb-tab-group renders DOM"] =
     role="tabpanel"
     tabindex="0"
   >
-    <p>
-      Test tab content 1
-    </p>
+    Test tab content 1
   </sbb-tab>
   <sbb-tab-label
     aria-controls="sbb-tab-panel-2"
@@ -41,9 +39,7 @@ snapshots["sbb-tab-group renders DOM"] =
     role="tabpanel"
     tabindex="0"
   >
-    <p>
-      Test tab content 2
-    </p>
+    Test tab content 2
   </sbb-tab>
   <sbb-tab-label
     aria-controls="sbb-tab-panel-3"
@@ -62,9 +58,7 @@ snapshots["sbb-tab-group renders DOM"] =
     role="tabpanel"
     tabindex="0"
   >
-    <p>
-      Test tab content 3
-    </p>
+    Test tab content 3
   </sbb-tab>
   <sbb-tab-label
     aria-controls="sbb-tab-panel-4"
@@ -82,9 +76,7 @@ snapshots["sbb-tab-group renders DOM"] =
     role="tabpanel"
     tabindex="0"
   >
-    <p>
-      Test tab content 4
-    </p>
+    Test tab content 4
   </sbb-tab>
 </sbb-tab-group>
 `;
@@ -173,7 +165,7 @@ snapshots["sbb-tab-group renders A11y tree Firefox"] =
       "children": [
         {
           "role": "text leaf",
-          "name": "Test tab content 1"
+          "name": "Test tab content 1 "
         }
       ]
     }

diff --git a/src/elements/tabs/tab-group/readme.md b/src/elements/tabs/tab-group/readme.md
@@ -8,27 +8,21 @@ tab panels can present different sections of content and include text, images, f
 ```html
 <sbb-tab-group>
   <sbb-tab-label>I am the first</sbb-tab-label>
-  <sbb-tab>
-    <p>Tab content 1</p>
-  </sbb-tab>
+  <sbb-tab> Tab content 1 </sbb-tab>
 
   <sbb-tab-label>I am the second</sbb-tab-label>
-  <sbb-tab>
-    <p>Tab content 2</p>
-  </sbb-tab>
+  <sbb-tab> Tab content 2 </sbb-tab>
 
   <sbb-tab-label>I am the third</sbb-tab-label>
-  <sbb-tab>
-    <p>Tab content 3</p>
-  </sbb-tab>
+  <sbb-tab> Tab content 3 </sbb-tab>
 </sbb-tab-group>
 ```
 
 To display a tab label within the tab bar, provide a `sbb-tab-label` right before its related tab content;
 please refer to the [sbb-tab-label](/docs/elements-sbb-tab-sbb-tab-label--docs) documentation for more details.
 
 The content element must be wrapped in a `sbb-tab` and placed right after its relative `sbb-tab-label`.
-Tab groups can also be nested, which means that a tab's content block can be represented by another `sbb-tab-group`,
+Tab groups can also be nested, which means that a `sbb-tab` can contain another `sbb-tab-group`,
 as shown in the "Nested Tab Groups" example.
 
 ## States
@@ -84,7 +78,6 @@ type SbbTabChangedEventDetails = {
 
 ## Slots
 
-| Name      | Description                                                                                                                                         |
-| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-|           | Use the unnamed slot to add html-content to the `sbb-tab-group`; wrap the content in a `sbb-tab` or provide a nested `sbb-tab-group`.               |
-| `tab-bar` | When you provide the `sbb-tab-label` tag through the unnamed slot, it will be automatically moved to this slot. You do not need to use it directly. |
+| Name | Description                                                                                             |
+| ---- | ------------------------------------------------------------------------------------------------------- |
+|      | Use the unnamed slot to add content to the `sbb-tab-group` via `sbb-tab-label` and `sbb-tab` instances. |
diff --git a/src/elements/tabs/tab-group/tab-group.scss b/src/elements/tabs/tab-group/tab-group.scss
@@ -51,11 +51,3 @@
     @include sbb.focus-outline;
   }
 }
-
-// Make inactive nested tab groups non-focusable, to ensure accessibility
-:host([data-nested]:not([active])) *,
-:host([data-nested]:not([active])) ::slotted(*) {
-  visibility: hidden;
-  opacity: 0;
-  height: 0;
-}
diff --git a/src/elements/tabs/tab-group/tab-group.snapshot.spec.ts b/src/elements/tabs/tab-group/tab-group.snapshot.spec.ts
@@ -16,21 +16,13 @@ describe(`sbb-tab-group`, () => {
       element = await fixture(
         html`<sbb-tab-group initial-selected-index="0">
           <sbb-tab-label>Test tab label 1</sbb-tab-label>
-          <sbb-tab>
-            <p>Test tab content 1</p>
-          </sbb-tab>
+          <sbb-tab> Test tab content 1 </sbb-tab>
           <sbb-tab-label>Test tab label 2</sbb-tab-label>
-          <sbb-tab>
-            <p>Test tab content 2</p>
-          </sbb-tab>
+          <sbb-tab> Test tab content 2 </sbb-tab>
           <sbb-tab-label disabled>Test tab label 3</sbb-tab-label>
-          <sbb-tab>
-            <p>Test tab content 3</p>
-          </sbb-tab>
+          <sbb-tab> Test tab content 3 </sbb-tab>
           <sbb-tab-label>Test tab label 4</sbb-tab-label>
-          <sbb-tab>
-            <p>Test tab content 4</p>
-          </sbb-tab>
+          <sbb-tab> Test tab content 4 </sbb-tab>
         </sbb-tab-group>`,
       );
     });

diff --git a/src/elements/tabs/tab-group/tab-group.spec.ts b/src/elements/tabs/tab-group/tab-group.spec.ts
@@ -20,13 +20,13 @@ describe(`sbb-tab-group`, () => {
     element = await fixture(
       html`<sbb-tab-group initial-selected-index="1">
         <sbb-tab-label id="sbb-tab-1">Test tab label 1</sbb-tab-label>
-        <sbb-tab><p>Test tab content 1</p></sbb-tab>
+        <sbb-tab>Test tab content 1</sbb-tab>
         <sbb-tab-label id="sbb-tab-2">Test tab label 2</sbb-tab-label>
-        <sbb-tab><p>Test tab content 2</p></sbb-tab>
+        <sbb-tab>Test tab content 2</sbb-tab>
         <sbb-tab-label id="sbb-tab-3" disabled>Test tab label 3</sbb-tab-label>
-        <sbb-tab><p>Test tab content 3</p></sbb-tab>
+        <sbb-tab>Test tab content 3</sbb-tab>
         <sbb-tab-label id="sbb-tab-4">Test tab label 4</sbb-tab-label>
-        <sbb-tab><p>Test tab content 4</p></sbb-tab>
+        <sbb-tab>Test tab content 4</sbb-tab>
       </sbb-tab-group>`,
     );
   });
@@ -153,13 +153,9 @@ describe(`sbb-tab-group`, () => {
     element = await fixture(
       html` <sbb-tab-group initial-selected-index="2">
         <sbb-tab-label id="sbb-tab-1">Test tab label 1</sbb-tab-label>
-        <sbb-tab>
-          <p>Test tab content 1</p>
-        </sbb-tab>
+        <sbb-tab> Test tab content 1 </sbb-tab>
         <sbb-tab-label id="sbb-tab-2">Test tab label 2</sbb-tab-label>
-        <sbb-tab>
-          <p>Test tab content 2</p>
-        </sbb-tab>
+        <sbb-tab> Test tab content 2 </sbb-tab>
       </sbb-tab-group>`,
     );
     const tab = element.querySelector('sbb-tab-label#sbb-tab-1');
@@ -170,13 +166,9 @@ describe(`sbb-tab-group`, () => {
     element = await fixture(
       html` <sbb-tab-group initial-selected-index="0">
         <sbb-tab-label disabled>Test tab label 1</sbb-tab-label>
-        <sbb-tab>
-          <p>Test tab content 1</p>
-        </sbb-tab>
+        <sbb-tab> Test tab content 1 </sbb-tab>
         <sbb-tab-label id="sbb-tab-2">Test tab label 2</sbb-tab-label>
-        <sbb-tab>
-          <p>Test tab content 2</p>
-        </sbb-tab>
+        <sbb-tab> Test tab content 2 </sbb-tab>
       </sbb-tab-group>`,
     );
     const tab = element.querySelector('sbb-tab-label#sbb-tab-2');

diff --git a/src/elements/tabs/tab-group/tab-group.ssr.spec.ts b/src/elements/tabs/tab-group/tab-group.ssr.spec.ts
@@ -14,21 +14,13 @@ describe(`sbb-tab-group ssr`, () => {
     root = await ssrHydratedFixture(
       html` <sbb-tab-group initial-selected-index="1">
         <sbb-tab-label id="sbb-tab-1">Test tab label 1</sbb-tab-label>
-        <sbb-tab>
-          <p>Test tab content 1</p>
-        </sbb-tab>
+        <sbb-tab> Test tab content 1 </sbb-tab>
         <sbb-tab-label id="sbb-tab-2">Test tab label 2</sbb-tab-label>
-        <sbb-tab>
-          <p>Test tab content 2</p>
-        </sbb-tab>
+        <sbb-tab> Test tab content 2 </sbb-tab>
         <sbb-tab-label id="sbb-tab-3" disabled>Test tab label 3</sbb-tab-label>
-        <sbb-tab>
-          <p>Test tab content 3</p>
-        </sbb-tab>
+        <sbb-tab> Test tab content 3 </sbb-tab>
         <sbb-tab-label id="sbb-tab-4">Test tab label 4</sbb-tab-label>
-        <sbb-tab>
-          <p>Test tab content 4</p>
-        </sbb-tab>
+        <sbb-tab> Test tab content 4 </sbb-tab>
       </sbb-tab-group>`,
       { modules: ['./tab-group.js', '../tab-label.js', '../tab.js'] },
     );

diff --git a/src/elements/tabs/tab-group/tab-group.stories.ts b/src/elements/tabs/tab-group/tab-group.stories.ts
@@ -63,12 +63,10 @@ const tabPanelTwo = (): TemplateResult => html`
 
 const tabPanelFour = (): TemplateResult => html`
   <sbb-tab>
-    <p>
-      Diam maecenas ultricies mi eget mauris pharetra et ultrices neque ornare aenean euismod
-      elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus
-      urna neque viverra justo nec ultrices dui sapien eget mi proin sed libero enim sed faucibus
-      turpis in eu mi bibendum neque egestas congue.
-    </p>
+    Diam maecenas ultricies mi eget mauris pharetra et ultrices neque ornare aenean euismod
+    elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus
+    urna neque viverra justo nec ultrices dui sapien eget mi proin sed libero enim sed faucibus
+    turpis in eu mi bibendum neque egestas congue.
   </sbb-tab>
 `;
 
@@ -116,34 +114,32 @@ const IconsAndNumbersTemplate = ({ size, label, ...args }: Args): TemplateResult
 const NestedTemplate = ({ size, label, ...args }: Args): TemplateResult => html`
   <sbb-tab-group size=${size} initial-selected-index="0">
     ${firstTabTitle(label, args)}
-    <sbb-tab-group size=${size} initial-selected-index="1">
-      <sbb-tab-label level="2">Nested tab</sbb-tab-label>
-      <sbb-tab>
-        <p>
+    <sbb-tab>
+      <sbb-tab-group size=${size} initial-selected-index="1">
+        <sbb-tab-label level="2">Nested tab</sbb-tab-label>
+        <sbb-tab>
           Diam maecenas ultricies mi eget mauris pharetra et ultrices neque ornare aenean euismod
           elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis
           rhoncus urna neque viverra justo nec ultrices dui sapien eget mi proin sed libero enim sed
           faucibus turpis in eu mi bibendum neque egestas congue.
-        </p>
-      </sbb-tab>
+        </sbb-tab>
 
-      <sbb-tab-label level="2">Nested tab</sbb-tab-label>
-      <sbb-tab>
-        <p>
+        <sbb-tab-label level="2">Nested tab</sbb-tab-label>
+        <sbb-tab>
           Diam maecenas ultricies mi eget mauris pharetra et ultrices neque ornare aenean euismod
           elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis
           rhoncus urna.
-        </p>
-      </sbb-tab>
-    </sbb-tab-group>
+        </sbb-tab>
+      </sbb-tab-group>
+    </sbb-tab>
 
     <sbb-tab-label amount=${args.amount} icon-name="swisspass-small"> Tab title two </sbb-tab-label>
     ${tabPanelTwo()}
 
     <sbb-tab-label ?disabled=${true} amount=${args.amount} icon-name="train-small">
       Tab title three
     </sbb-tab-label>
-    <sbb-tab><p>I was disabled.</p></sbb-tab>
+    <sbb-tab>I was disabled.</sbb-tab>
 
     <sbb-tab-label amount=${args.amount} icon-name="pie-small"> Tab title four </sbb-tab-label>
     ${tabPanelFour()}