feat(dashboard): keyboard navigation between list items

dashboard/src/lib/list/List.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem, InputGroupText, InputGroup, Input, Row, Col, Spinner, Button, Tooltip, Label } from 'sveltestrap';
+    import { Card, CardHeader, CardBody, Alert, Collapse, Row, Col, Spinner, Button, Tooltip } from 'sveltestrap';
     import { onMount } from 'svelte';
-    import { Link, useParams } from 'svelte-navigator';
+    import { link, useParams } from 'svelte-navigator';
 
     import FaLock from 'svelte-icons/fa/FaLock.svelte';
     import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte';
@@ -124,6 +124,38 @@
         return url;
     }
 
+    let cardIndexArray = [];
+
+    function skipToNextItem(event, index: number) {
+        let el;
+
+        if (event.key === "ArrowDown") {
+            if (cardIndexArray[index + 1]) el = cardIndexArray[index + 1];
+            else el = cardIndexArray[0];
+        }
+
+        if (event.key === "ArrowUp") {
+            if (cardIndexArray[index - 1]) el = cardIndexArray[index - 1];
+            else el = cardIndexArray[cardIndexArray.length - 1];
+        }
+
+        if (el) {
+            event.preventDefault();
+            el.focus();
+        }
+    }
+
+    let isOpenArray = [];
+
+    function toggleCard(index: number) {
+        if (isOpenArray[index] === true) {
+            isOpenArray[index] = false;
+            cardIndexArray[index].classList.add("collapsed");
+        } else {
+            isOpenArray[index] = true;
+            cardIndexArray[index].classList.remove("collapsed");
+        }
+    }
 </script>
 
 <ListControl {itemType} {isPublic} {memberList} {groups} {groupList} {list} bind:finalList={processedList} bind:searchValue bind:searchBy bind:itemsPerPageValue bind:currentPage />
@@ -156,10 +188,11 @@
 
 
 {#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true}
-<Accordion class="my-3" stayOpen>
     {#each slicedList as item, index (item.id + index)}
-    <AccordionItem>
+    <Card>
-        <CardsHeader {item} slot="header">
+        <h2 class="accordion-header">
+            <button class="w-100 accordion-button collapsed" bind:this={cardIndexArray[index]} on:click={() => toggleCard(index)} on:keydown={(e) => skipToNextItem(e, index)}>
+                <CardsHeader {item}>
                     <div slot="icon">
                         {#if isPublic || item.privacy.visibility === "public"}
                         {#if itemType === "member"}
@@ -172,17 +205,23 @@
                         {/if}
                     </div>
                 </CardsHeader>
+            </button>
+        </h2>
+        <Collapse isOpen={isOpenArray[index]}>
+            <CardBody>
                 {#if itemType === "member"}
                 <MemberBody on:deletion={updateDelete} bind:isPublic bind:groups bind:member={item} />
                 {:else if itemType === "group"}
                 <GroupBody on:deletion={updateDelete} {isPublic} {members} bind:group={item} />
                 {/if}
-    </AccordionItem>
+            </CardBody>
+        </Collapse>
+    </Card>
     {/each}
-</Accordion>
 {:else if settings.accessibility.expandedcards}
     {#each slicedList as item, index (item.id + index)}
     <Card class="mb-3">
+        <div bind:this={cardIndexArray[index]} on:keydown={(e) => skipToNextItem(e, index)} tabindex={0}>
             <CardHeader>
                 <CardsHeader {item}>
                     <div slot="icon">
@@ -198,6 +237,7 @@
                     </div>
                 </CardsHeader>
             </CardHeader>
+        </div>
         <CardBody>
             {#if itemType === "member"}
             <MemberBody on:deletion={updateDelete} bind:isPublic bind:groups bind:member={item} />
@@ -211,7 +251,7 @@
     <div class="my-3">
     {#each slicedList as item, index (item.id + index)}
     <Card>
-        <Link class="accordion-button collapsed" style="text-decoration: none;" to={getItemLink(item)}>
+        <a class="accordion-button collapsed" style="text-decoration: none;" href={getItemLink(item)} bind:this={cardIndexArray[index]} on:keydown={(e) => skipToNextItem(e, index)} use:link >
             <CardsHeader {item}>
                 <div slot="icon">
                     {#if isPublic || item.privacy.visibility === "public"}
@@ -225,7 +265,7 @@
                     {/if}
                 </div>
             </CardsHeader>
-        </Link>
+        </a>
     </Card>
     {/each}
     </div>