From 74aa9663f02bd0fd9543e838cb57c4e4896d4101 Mon Sep 17 00:00:00 2001
From: Draconizations <jake.fulminated@gmail.com>
Date: Fri, 20 May 2022 12:28:16 +0200
Subject: [PATCH] feat(dasbhoard): improve accessibility in cards

---
 dashboard/src/lib/group/Body.svelte     | 16 ++++++++--------
 dashboard/src/lib/member/Body.svelte    | 18 +++++++++---------
 dashboard/src/lib/system/Body.svelte    |  8 ++++----
 dashboard/src/lib/system/Privacy.svelte |  4 +---
 4 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/dashboard/src/lib/group/Body.svelte b/dashboard/src/lib/group/Body.svelte
index ef1792fb..767a9b82 100644
--- a/dashboard/src/lib/group/Body.svelte
+++ b/dashboard/src/lib/group/Body.svelte
@@ -76,17 +76,17 @@
     {/if}
     {#if group.banner}
     <Col xs={12} lg={3} class="mb-2">
-        <b>Banner:</b> <Button size="sm" color="light" on:click={toggleBannerModal}>View</Button>
+        <b>Banner:</b> <Button size="sm" color="secondary" on:click={toggleBannerModal} aria-label="view group banner">View</Button>
         <Modal isOpen={bannerOpen} toggle={toggleBannerModal}>
             <div slot="external" on:click={toggleBannerModal} style="height: 100%; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; display: flex;">
-                <Image style="display: block; margin: auto;" src={group.banner} thumbnail alt="Your system banner" />
+                <Image style="display: block; margin: auto;" src={group.banner} thumbnail alt="group banner" />
             </div>
         </Modal>
     </Col>
     {/if}
     {#if group.privacy}
     <Col xs={12} lg={4} class="mb-2">
-        <b>Privacy:</b> <Button size="sm" color="secondary" on:click={togglePrivacyModal}>Edit</Button>
+        <b>Privacy:</b> <Button size="sm" color="secondary" on:click={togglePrivacyModal} aria-label="edit group privacy">Edit</Button>
         <Modal size="lg" isOpen={privacyOpen} toggle={togglePrivacyModal}>
             <ModalHeader toggle={togglePrivacyModal}>
                Edit privacy
@@ -103,16 +103,16 @@
     {@html htmlDescription && htmlDescription}
 </div>
 {#if (group.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
-<img src={group.banner} alt="your system banner" class="w-100 mb-3 rounded" style="max-height: 12em; object-fit: cover"/>
+<img src={group.banner} alt="group banner" class="w-100 mb-3 rounded" style="max-height: 12em; object-fit: cover"/>
 {/if}
 {#if !isPublic}
-<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button> 
-{#if isMainDash}<Button style="flex: 0" color="secondary" on:click={() => memberMode = true}>Members</Button>{/if}
+<Button style="flex: 0" color="primary" on:click={() => editMode = true} aria-label="edit group information">Edit</Button> 
+{#if isMainDash}<Button style="flex: 0" color="secondary" on:click={() => memberMode = true} aria-label="edit group members">Members</Button>{/if}
 {/if}
 {#if !isPage}
-    <Link to={isPublic ? `/profile/g/${group.id}` : `/dash/g/${group.id}`}><Button style="flex: 0; {!isPublic && "float: right;"}" color="primary">View page</Button></Link>
+    <Link to={isPublic ? `/profile/g/${group.id}` : `/dash/g/${group.id}`}><Button style="flex: 0; {!isPublic && "float: right;"}" color="primary" tabindex={-1} aria-label="view group page">View page</Button></Link>
     {:else if !isPublic}
-    <Link to="/dash?tab=groups"><Button style="flex: 0; {!isPublic && "float: right;"}" color="primary">View system</Button></Link>
+    <Link to="/dash?tab=groups"><Button style="flex: 0; {!isPublic && "float: right;"}" color="primary" tabindex={-1} aria-label="view group system">View system</Button></Link>
     {/if}
 {:else if editMode}
 <Edit on:deletion on:update bind:group bind:editMode />
diff --git a/dashboard/src/lib/member/Body.svelte b/dashboard/src/lib/member/Body.svelte
index 7cc38b70..85fd8d1c 100644
--- a/dashboard/src/lib/member/Body.svelte
+++ b/dashboard/src/lib/member/Body.svelte
@@ -102,8 +102,8 @@
         </Col>
         {/if}
         {#if member.banner}
-        <Col xs={12} lg={3} class="mb-2">
-            <b>Banner:</b> <Button size="sm" color="secondary" on:click={toggleBannerModal}>View</Button>
+        <Col xs={12} lg={4} class="mb-2">
+            <b>Banner:</b> <Button size="sm" color="secondary" on:click={toggleBannerModal} aria-label="view member banner">View</Button>
             <Modal isOpen={bannerOpen} toggle={toggleBannerModal}>
                 <div slot="external" on:click={toggleBannerModal} style="height: 100%; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; display: flex;">
                     <Image style="display: block; margin: auto;" src={member.banner} thumbnail alt="Your system banner" />
@@ -113,7 +113,7 @@
         {/if}
         {#if member.privacy && !isPublic}
         <Col xs={12} lg={4} class="mb-2">
-            <b>Privacy:</b> <Button size="sm" color="secondary" on:click={togglePrivacyModal}>Edit</Button>
+            <b>Privacy:</b> <Button size="sm" color="secondary" on:click={togglePrivacyModal} aria-label="edit member privacy">Edit</Button>
             <Modal size="lg" isOpen={privacyOpen} toggle={togglePrivacyModal}>
                 <ModalHeader toggle={togglePrivacyModal}>
                     Edit privacy
@@ -126,7 +126,7 @@
         {/if}
         {#if member.proxy_tags && !isPublic}
         <Col xs={12} lg={4} class="mb-2">
-            <b>Proxy Tags:</b> <Button size="sm" color="secondary" on:click={toggleProxyModal}>Edit</Button>
+            <b>Proxy Tags:</b> <Button size="sm" color="secondary" on:click={toggleProxyModal} aria-label="edit member proxy tags">Edit</Button>
             <Modal size="lg" isOpen={proxyOpen} toggle={toggleProxyModal}>
                 <ModalHeader toggle={toggleProxyModal}>
                     Edit proxy tags
@@ -143,16 +143,16 @@
         {@html htmlDescription && htmlDescription}
     </div>
     {#if (member.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
-    <img src={member.banner} alt="your system banner" class="w-100 mb-3 rounded" style="max-height: 17em; object-fit: cover"/>
+    <img src={member.banner} alt="member banner" class="w-100 mb-3 rounded" style="max-height: 17em; object-fit: cover"/>
     {/if}
     {#if !isPublic}
-    <Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button>
-    {#if isMainDash}<Button style="flex: 0" color="secondary" on:click={() => groupMode = true}>Groups</Button>{/if}
+    <Button style="flex: 0" color="primary" on:click={() => editMode = true} aria-label="edit member information">Edit</Button>
+    {#if isMainDash}<Button style="flex: 0" color="secondary" on:click={() => groupMode = true} aria-label="edit member groups">Groups</Button>{/if}
     {/if}
     {#if !isPage}
-    <Link to={isPublic ? `/profile/m/${member.id}` : `/dash/m/${member.id}`}><Button style="flex: 0; {!isPublic && "float: right;"}" color="primary">View page</Button></Link>
+    <Link to={isPublic ? `/profile/m/${member.id}` : `/dash/m/${member.id}`}><Button style="flex: 0; {!isPublic && "float: right;"}" color="primary" tabindex={-1} aria-label="view member page">View page</Button></Link>
     {:else}
-    <Link to={isPublic ? `/profile/s/${member.system}?tab=members` : "/dash?tab=members"}><Button style="flex: 0; {!isPublic && "float: right;"}" color="primary">View system</Button></Link>
+    <Link to={isPublic ? `/profile/s/${member.system}?tab=members` : "/dash?tab=members"}><Button style="flex: 0; {!isPublic && "float: right;"}" color="primary" tabindex={-1} aria-label="view member's system">View system</Button></Link>
     {/if}
     {:else if editMode}
         <Edit on:deletion on:update bind:member bind:editMode />
diff --git a/dashboard/src/lib/system/Body.svelte b/dashboard/src/lib/system/Body.svelte
index de56b309..635753a0 100644
--- a/dashboard/src/lib/system/Body.svelte
+++ b/dashboard/src/lib/system/Body.svelte
@@ -73,10 +73,10 @@
     {/if}
     {#if user.banner}
     <Col xs={12} lg={3} class="mb-2">
-        <b>Banner:</b> <Button size="sm" color="secondary" on:click={toggleBannerModal}>View</Button>
+        <b>Banner:</b> <Button size="sm" color="secondary" on:click={toggleBannerModal} aria-label="view system banner">View</Button>
         <Modal isOpen={bannerOpen} toggle={toggleBannerModal}>
             <div slot="external" on:click={toggleBannerModal} style="height: 100%; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; display: flex;">
-                <Image style="display: block; margin: auto;" src={user.banner} thumbnail alt="Your system banner" />
+                <Image style="display: block; margin: auto;" src={user.banner} thumbnail alt="system banner" />
             </div>
         </Modal>
     </Col>
@@ -87,8 +87,8 @@
     {@html htmlDescription}
 </div>
 {#if (user.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
-<img src={user.banner} alt="your system banner" class="w-100 mb-3 rounded" style="max-height: 12em; object-fit: cover"/>
+<img src={user.banner} alt="system banner" class="w-100 mb-3 rounded" style="max-height: 12em; object-fit: cover"/>
 {/if}
 {#if !isPublic}
-<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button>
+<Button style="flex: 0" color="primary" on:click={() => editMode = true} aria-label="edit system information">Edit</Button>
 {/if}
\ No newline at end of file
diff --git a/dashboard/src/lib/system/Privacy.svelte b/dashboard/src/lib/system/Privacy.svelte
index 3fe7dadf..d9aa7e3d 100644
--- a/dashboard/src/lib/system/Privacy.svelte
+++ b/dashboard/src/lib/system/Privacy.svelte
@@ -42,9 +42,7 @@
                 <b>Front history:</b> {user.privacy.front_history_privacy}
             </Col>
         </Row>
-        <Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button>
-        <Link to="/dash/bulk-member-privacy"><Button style="flex: 0" color="secondary">Bulk member privacy</Button></Link>
-        <Link to="/dash/bulk-group-privacy"><Button style="flex: 0" color="secondary">Bulk group privacy</Button></Link>
+        <Button style="flex: 0" color="primary" on:click={() => editMode = true} aria-label="edit system privacy">Edit</Button>
         {/if}
     </CardBody>
 </Card>
\ No newline at end of file