From 32ab6690f7fc20648094df22a166f08c13ed80c1 Mon Sep 17 00:00:00 2001
From: Junior <albertino-junior.lopes-livramento@vgregion.se>
Date: Tue, 27 Aug 2024 12:57:23 +0200
Subject: [PATCH] =?UTF-8?q?Uppdaterat=20dokumentation=20samt=20exempel=20f?=
 =?UTF-8?q?=C3=B6r=20expandable-div?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../expandable-div.component.html             | 70 ++++++++++++-------
 .../expandable-div.component.ts               |  2 +
 2 files changed, 46 insertions(+), 26 deletions(-)

diff --git a/src/app/expandable-div/expandable-div.component.html b/src/app/expandable-div/expandable-div.component.html
index 4e06340b8..ac3a9cbad 100644
--- a/src/app/expandable-div/expandable-div.component.html
+++ b/src/app/expandable-div/expandable-div.component.html
@@ -15,32 +15,45 @@
     </p>
   </div>
   <div class="docs__examples ">
-    <h2>HTML</h2>
-    <section vgrHighlightCode [innerHTML]="exampleCodeMarkup"></section>
-    <h2>Resultat</h2>
-    <vgr-expandable-div [expanded]="false" (expandedChanged)="onExpandedChanged($event)">
+    <div style="margin: 10px 0;">
+      <vgr-expandable-div [expanded]="false" (expandedChanged)="onExpandedChanged($event)">
       <vgr-expandable-div-header>
-        <vgr-icon icon="check-circle" color="success"></vgr-icon>
-        Denna div är collapsed från början
-      </vgr-expandable-div-header>
-      <vgr-expandable-div-content>
-        <p tabindex="0">Lite innehåll</p>
-        <p tabindex="0">Mer innehåll</p>
-      </vgr-expandable-div-content>
-    </vgr-expandable-div>
-    <br>
-    <br>
-    <vgr-button [buttonStyle]="'secondary'" (click)="setFocus()">Fokusera på tvåan</vgr-button>
-    <br>
-    <br>
-    <vgr-expandable-div #myExpandableList *ngFor="let item of list">
-      <vgr-expandable-div-header>
-         <strong>{{ item.id }} {{ item.title }}</strong>
-      </vgr-expandable-div-header>
-      <vgr-expandable-div-content>
-        <p> {{ item.text }}</p>
-      </vgr-expandable-div-content>
-    </vgr-expandable-div>
+        <p><strong>Expandable div med ett underliggande expandable div</strong></p>
+        </vgr-expandable-div-header>
+        <vgr-expandable-div-content>
+          <div style="margin-left: 10px;">
+            <vgr-expandable-div [expanded]="false" (expandedChanged)="onExpandedChanged($event)">
+              <vgr-expandable-div-header>
+                <p><strong>Expandable div nivå 2</strong></p>
+                </vgr-expandable-div-header>
+                <vgr-expandable-div-content>
+                  <p style="margin-left: 10px;">Kan innehålla både text, tabeller eller interaktiva element</p>
+                </vgr-expandable-div-content>
+              </vgr-expandable-div>
+          </div>
+        </vgr-expandable-div-content>
+      </vgr-expandable-div>
+
+      <vgr-expandable-div [expanded]="false" (expandedChanged)="onExpandedChanged1($event)">
+        <vgr-expandable-div-header>
+          <p>En annan expandable div</p>
+        </vgr-expandable-div-header>
+        <vgr-expandable-div-content>
+          <p style="margin-left: 10px;">Lite innehåll</p>
+        </vgr-expandable-div-content>
+      </vgr-expandable-div>
+
+      <vgr-expandable-div [expanded]="false" (expandedChanged)="onExpandedChanged2($event)">
+        <vgr-expandable-div-header>
+          <p>Ytterligare en expandable div</p>
+        </vgr-expandable-div-header>
+        <vgr-expandable-div-content>
+          <p style="margin-left: 10px;">Mer innehåll</p>
+        </vgr-expandable-div-content>
+      </vgr-expandable-div>
+    </div>
+      <h2>HTML</h2>
+      <section vgrHighlightCode [innerHTML]="exampleCodeMarkup"></section>
   </div>
   <div class="docs__api ">
     <!-- API -->
@@ -77,6 +90,11 @@ <h3>Templatestruktur</h3>
     </table>
   </div>
   <div class="docs__wcag ">
-    <i>Under utveckling</i>
+    <ol>
+      <li>rubrik läsas upp av skärmläsaren, sedan om den är expanded eller inte</li>
+      <li>Både enter och mellanslag triggar om den expanderas eller stängas</li>
+      <li>Om [expanded]="false" ska tabb flytta fokus till nästa synlig</li>
+      <li>Om [expanded]="true" ska tabb flytta fokus till nästa underliggande rad</li>
+    </ol>
   </div>
 </app-component-docs>
diff --git a/src/app/expandable-div/expandable-div.component.ts b/src/app/expandable-div/expandable-div.component.ts
index e0ba6ed0c..5aa43247b 100644
--- a/src/app/expandable-div/expandable-div.component.ts
+++ b/src/app/expandable-div/expandable-div.component.ts
@@ -56,4 +56,6 @@ export class ExpandableDivComponent implements OnInit {
   }
 
   onExpandedChanged(flag: Boolean) { }
+  onExpandedChanged1(flag: Boolean) { }
+  onExpandedChanged2(flag: Boolean) { }
 }