From 36997f6ac1323130c7e8c8a22f28658126ff74be Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Tue, 18 Oct 2022 14:25:26 +0530
Subject: [PATCH] chore: A11y changes

---
 cypress/snapshots.js                      |  2 +-
 src/lib/components/actions.svelte         |  6 +--
 src/lib/components/card/card.svelte       |  3 +-
 src/lib/components/card/tabs.svelte       |  8 +++-
 src/lib/components/history/history.svelte |  1 +
 src/lib/components/navbar.svelte          |  2 +-
 src/lib/components/theme.svelte           | 51 ++++++++++++-----------
 src/routes/edit/+page.svelte              |  5 ++-
 8 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/cypress/snapshots.js b/cypress/snapshots.js
index a54958c7..a66a23cb 100644
--- a/cypress/snapshots.js
+++ b/cypress/snapshots.js
@@ -16,7 +16,7 @@ module.exports = {
       "1": "{\"code\":\"graph TD\\n    A[Party] -->|Get money| B(Go shopping!!)\\n    \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"forest\\\",\\n  \\\"test\\\": \\\"hello world\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}"
     }
   },
-  "__version": "10.6.0",
+  "__version": "10.10.0",
   "Auto sync tests": {
     "should dim diagram when code is edited": {
       "1": "{\"code\":\"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Test\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":false,\"updateDiagram\":false}"
diff --git a/src/lib/components/actions.svelte b/src/lib/components/actions.svelte
index c31128b7..48784ef1 100644
--- a/src/lib/components/actions.svelte
+++ b/src/lib/components/actions.svelte
@@ -186,17 +186,17 @@
 		<button id="downloadSVG" class="action-btn flex-grow" on:click={onDownloadSVG}>
 			<i class="fas fa-download mr-2" /> SVG
 		</button>
-		<a target="_blank" class="flex-grow" href={iUrl}>
+		<a target="_blank" rel="noreferrer" class="flex-grow" href={iUrl}>
 			<button class="action-btn w-full">
 				<i class="fas fa-external-link-alt mr-2" /> PNG
 			</button>
 		</a>
-		<a target="_blank" class="flex-grow" href={svgUrl}>
+		<a target="_blank" rel="noreferrer" class="flex-grow" href={svgUrl}>
 			<button class="action-btn w-full">
 				<i class="fas fa-external-link-alt mr-2" /> SVG
 			</button>
 		</a>
-		<a target="_blank" class="flex-grow" href={krokiUrl}>
+		<a target="_blank" rel="noreferrer" class="flex-grow" href={krokiUrl}>
 			<button class="action-btn w-full">
 				<i class="fas fa-external-link-alt mr-2" /> Kroki
 			</button>
diff --git a/src/lib/components/card/card.svelte b/src/lib/components/card/card.svelte
index 27008d9e..24ea56f4 100644
--- a/src/lib/components/card/card.svelte
+++ b/src/lib/components/card/card.svelte
@@ -14,7 +14,8 @@
 <div class="card rounded overflow-hidden m-2 flex-grow flex flex-col shadow-2xl">
 	<div
 		class="bg-primary p-2 {isTabsShown ? 'pb-0' : ''} flex-none cursor-pointer"
-		on:click={() => (isOpen = !isOpen)}>
+		on:click={() => (isOpen = !isOpen)}
+		on:keypress={() => (isOpen = !isOpen)}>
 		<div class="flex justify-between">
 			<Tabs on:select {tabs} bind:isOpen {title} {isCloseable} {activeTabID} />
 			<div class="flex gap-x-4 items-center {isTabsShown ? '-mt-2' : ''}">
diff --git a/src/lib/components/card/tabs.svelte b/src/lib/components/card/tabs.svelte
index 0f99e362..433d6628 100644
--- a/src/lib/components/card/tabs.svelte
+++ b/src/lib/components/card/tabs.svelte
@@ -19,7 +19,10 @@
 </script>
 
 <div class="flex cursor-default">
-	<span class="mr-2 font-semibold" on:click|stopPropagation={() => (isOpen = !isOpen)}>
+	<span
+		class="mr-2 font-semibold"
+		on:click|stopPropagation={() => (isOpen = !isOpen)}
+		on:keypress|stopPropagation={() => (isOpen = !isOpen)}>
 		{#if isCloseable}
 			<i class="fas fa-chevron-right icon" class:isOpen />
 		{/if}
@@ -29,7 +32,8 @@
 			{#each tabs as tab}
 				<div
 					class="tab tab-lifted {activeTabID === tab.id ? 'tab-active' : 'text-primary-content'}"
-					on:click|stopPropagation={() => toggleTabs(tab)}>
+					on:click|stopPropagation={() => toggleTabs(tab)}
+					on:keypress|stopPropagation={() => toggleTabs(tab)}>
 					<i class="mr-1 {tab.icon}" />
 					{tab.title}
 				</div>
diff --git a/src/lib/components/history/history.svelte b/src/lib/components/history/history.svelte
index 45d16380..35d3da43 100644
--- a/src/lib/components/history/history.svelte
+++ b/src/lib/components/history/history.svelte
@@ -161,6 +161,7 @@
 									<a
 										href={url}
 										target="_blank"
+										rel="noreferrer"
 										title="Open revision in new tab"
 										class="hover:underline text-blue-500">{name}</a>
 								{:else}
diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 0ef9efd5..99e3a309 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -61,7 +61,7 @@
 		<ul class="lg:flex items-center justify-between text-base pt-4 lg:pt-0">
 			{#each links as { title, href, icon }}
 				<li>
-					<a class="btn btn-ghost" target="_blank" {href}>
+					<a class="btn btn-ghost" target="_blank" rel="noreferrer" {href}>
 						{#if icon}
 							<i class={icon} />
 						{/if}
diff --git a/src/lib/components/theme.svelte b/src/lib/components/theme.svelte
index f7d0a88c..7cd6ea95 100644
--- a/src/lib/components/theme.svelte
+++ b/src/lib/components/theme.svelte
@@ -2,32 +2,32 @@
 	import { setTheme, themeStore } from '$lib/util/theme';
 
 	const themes = [
-		'🌝  light',
-		'🌚  dark',
-		'🧁  cupcake',
-		'🐝  bumblebee',
-		'✳️  emerald',
-		'🏢  corporate',
-		'🌃  synthwave',
-		'👴  retro',
-		'🤖  cyberpunk',
-		'🌸  valentine',
-		'🎃  halloween',
-		'🌷  garden',
-		'🌲  forest',
-		'🐟  aqua',
-		'👓  lofi',
-		'🖍  pastel',
-		'🧚‍♀️  fantasy',
-		'📝  wireframe',
-		'🏴  black',
-		'💎  luxury',
-		'🧛‍♂️  dracula'
+		'🌝 light',
+		'🌚 dark',
+		'🧁 cupcake',
+		'🐝 bumblebee',
+		'✳️ emerald',
+		'🏢 corporate',
+		'🌃 synthwave',
+		'👴 retro',
+		'🤖 cyberpunk',
+		'🌸 valentine',
+		'🎃 halloween',
+		'🌷 garden',
+		'🌲 forest',
+		'🐟 aqua',
+		'👓 lofi',
+		'🖍 pastel',
+		'🧚‍♀️ fantasy',
+		'📝 wireframe',
+		'🏴 black',
+		'💎 luxury',
+		'🧛‍♂️ dracula'
 	];
 </script>
 
 <div class="hidden lg:block dropdown">
-	<div tabindex="0" class="btn btn-ghost ">
+	<div class="btn btn-ghost ">
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
 			fill="none"
@@ -48,10 +48,13 @@
 	</div>
 	<div
 		class="mt-14 overflow-y-auto shadow-2xl top-px dropdown-content h-96 w-56 bg-base-200 text-base-content">
-		<ul tabindex="0" class="p-4 menu compact">
+		<ul class="p-4 menu compact">
 			{#each themes as theme}
 				<li class={theme.includes($themeStore.theme) ? 'bordered' : ''}>
-					<span class="btn btn-ghost justify-start" on:click={() => setTheme(theme)}>{theme}</span>
+					<span
+						class="btn btn-ghost justify-start"
+						on:click={() => setTheme(theme)}
+						on:keypress={() => setTheme(theme)}>{theme}</span>
 				</li>
 			{/each}
 		</ul>
diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte
index e6a14305..19293e86 100644
--- a/src/routes/edit/+page.svelte
+++ b/src/routes/edit/+page.svelte
@@ -130,7 +130,9 @@
 					{/if}
 
 					<button class="btn btn-secondary btn-xs" title="View documentation">
-						<a target="_blank" href={docURL} data-cy="docs"><i class="fas fa-book mr-1" />Docs</a>
+						<a target="_blank" rel="noreferrer" href={docURL} data-cy="docs">
+							<i class="fas fa-book mr-1" />Docs
+						</a>
 					</button>
 				</div>
 
@@ -158,6 +160,7 @@
 					<a
 						href={`${base}/view#${$stateStore.serialized}`}
 						target="_blank"
+						rel="noreferrer"
 						class="btn btn-secondary btn-xs"
 						title="View diagram in new page"
 						><i class="fas fa-external-link-alt mr-1" />Full screen</a>