Merge branch 'develop' into sidv/mindmap

* develop:
  chore: A11y changes

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}"

src/lib/components/actions.svelte

@@ -187,17 +187,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>

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' : ''}">

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>

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}

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}

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>

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>