From 1eb910e61e7c5a3dbce6188bd2bed74f7d38f1ee Mon Sep 17 00:00:00 2001
From: Draconizations <jake.fulminated@gmail.com>
Date: Fri, 20 May 2022 12:09:10 +0200
Subject: [PATCH] feat(dashboard): make navigating more screenreader friendly

---
 dashboard/src/pages/Dash.svelte          |  1 +
 dashboard/src/pages/Group.svelte         |  3 ++-
 dashboard/src/pages/Member.svelte        |  3 ++-
 dashboard/src/pages/profiles/Main.svelte |  3 ++-
 dashboard/styles/generic.scss            | 14 +++++++++++++-
 5 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/dashboard/src/pages/Dash.svelte b/dashboard/src/pages/Dash.svelte
index 6f704831..01dd5afc 100644
--- a/dashboard/src/pages/Dash.svelte
+++ b/dashboard/src/pages/Dash.svelte
@@ -78,6 +78,7 @@
 <Container>
     <Row>
         <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            <h2 class="visually-hidden">Viewing your own system</h2>
             <TabContent class="mt-3">
                 <TabPane tabId="system" tab="System" active={tabPane === "system"}>
                         <SystemMain bind:user={user} bind:isPublic />
diff --git a/dashboard/src/pages/Group.svelte b/dashboard/src/pages/Group.svelte
index c098fbd1..b856df18 100644
--- a/dashboard/src/pages/Group.svelte
+++ b/dashboard/src/pages/Group.svelte
@@ -109,11 +109,12 @@
 <Container>
     <Row>
         <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            <h2 class="visually-hidden">Viewing {isPublic ? "a public" : "your own"} group</h2>
             {#if isDeleted}
                 <Alert color="success">Group has been successfully deleted. <Link to="/dash">Return to dash</Link></Alert>
             {:else}
             {#if isPublic}
-                <Alert color="info">You are currently <b>viewing</b> a group.</Alert>
+                <Alert color="info" aria-hidden>You are currently <b>viewing</b> a group.</Alert>
             {/if}
             {#if notOwnSystem}
                 <Alert color="danger">This group does not belong to your system, did you mean to look up <Link to={`/profile/g/${group.id}`}>it's public page</Link>?</Alert>
diff --git a/dashboard/src/pages/Member.svelte b/dashboard/src/pages/Member.svelte
index 61ee3e1f..17a51307 100644
--- a/dashboard/src/pages/Member.svelte
+++ b/dashboard/src/pages/Member.svelte
@@ -115,11 +115,12 @@
 <Container>
     <Row>
         <Col class="mx-auto" xs={12} lg={11} xl={10}>
+            <h2 class="visually-hidden">Viewing {isPublic ? "a public" : "your own"} member</h2>
             {#if isDeleted}
                 <Alert color="success">Member has been successfully deleted. <Link to="/dash">Return to dash</Link></Alert>
             {:else}
             {#if isPublic}
-                <Alert color="info">You are currently <b>viewing</b> a member.</Alert>
+                <Alert color="info" aria-hidden>You are currently <b>viewing</b> a member.</Alert>
             {/if}
             {#if notOwnSystem}
                 <Alert color="danger">This member does not belong to your system, did you mean to look up <Link to={`/profile/m/${member.id}`}>their public page</Link>?</Alert>
diff --git a/dashboard/src/pages/profiles/Main.svelte b/dashboard/src/pages/profiles/Main.svelte
index ca831381..c394c2b9 100644
--- a/dashboard/src/pages/profiles/Main.svelte
+++ b/dashboard/src/pages/profiles/Main.svelte
@@ -57,6 +57,7 @@
 {/if}
 <Container>
     <Row>
+        <h1 class="visually-hidden">Viewing a public system</h1>
         <Col class="mx-auto" xs={12} lg={11} xl={10}>
             {#if !user.id && !err}
             <div class="mx-auto text-center">
@@ -65,7 +66,7 @@
             {:else if err}
                 <Alert color="danger">{err}</Alert>
             {:else}
-            <Alert color="info">You are currently <b>viewing</b> a system.</Alert>
+            <Alert color="info" aria-hidden>You are currently <b>viewing</b> a system.</Alert>
             <TabContent class="mt-3">
                 <TabPane tabId="system" tab="System" active={tabPane === "system"}>
                         <SystemMain bind:user isPublic={true} />
diff --git a/dashboard/styles/generic.scss b/dashboard/styles/generic.scss
index 4d51e42e..8655d663 100644
--- a/dashboard/styles/generic.scss
+++ b/dashboard/styles/generic.scss
@@ -163,4 +163,16 @@ img.emoji {
     width: auto;
     margin: 0 .05em 0 .1em;
     vertical-align: -0.1125em;
- }
\ No newline at end of file
+ }
+
+ //misc
+ .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
\ No newline at end of file