Improve a11y and blur codes

Levminer · Aug 10, 2022 · 534956a · 534956a
1 parent 6c651cf
commit 534956a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 14 deletions.
diff --git a/interface/styles/index.css b/interface/styles/index.css
@@ -12,11 +12,11 @@
 	}
 
 	.menuButton {
-		@apply transparent-900-hover mx-3 mt-0 mb-3 flex h-20 w-20 flex-col items-center justify-center rounded-xl font-medium duration-200 ease-linear hover:text-gray-200;
+		@apply transparent-900-hover mx-3 mt-0 mb-3 flex h-20 w-20 flex-col items-center justify-center rounded-xl font-medium outline-none duration-200 ease-linear hover:text-gray-200 focus-visible:ring-4 focus-visible:ring-popup-magenta;
 	}
 
 	.selectedMenuButton {
-		@apply mx-3 mb-3 flex h-20 w-20 flex-col items-center justify-center rounded-xl bg-white font-medium !text-black duration-200 ease-linear hover:bg-gray-200;
+		@apply mx-3 mb-3 flex h-20 w-20 flex-col items-center justify-center rounded-xl bg-white font-medium !text-black outline-none duration-200 ease-linear hover:bg-gray-200 focus-visible:ring-4 focus-visible:ring-popup-magenta;
 	}
 
 	.select {
@@ -27,10 +27,7 @@
 		@apply transparent-900 transparent-input rounded-xl p-4 text-xl text-white outline-none duration-200 ease-linear;
 	}
 
-	.link {
-		@apply transparent-900-hover rounded-lg p-1 text-lg font-medium text-popup-blue duration-200 ease-linear hover:text-gray-200;
-	}
-
+	/* code element */
 	.code {
 		@apply transparent-800 mb-10 flex w-full flex-col rounded-2xl p-3;
 	}
@@ -39,9 +36,18 @@
 		@apply mx-auto rounded-2xl bg-gray-700 p-10 text-white;
 	}
 
+	/* edit element */
 	.edit {
 		@apply transparent-800 mb-5 flex w-full flex-row items-center justify-between rounded-xl p-5 text-left;
 	}
+
+	.blurCodes {
+		@apply blur-md delay-500 duration-200 ease-linear hover:blur-none;
+	}
+
+	.focusRing {
+		@apply outline-none focus-visible:ring-4 focus-visible:ring-popup-magenta;
+	}
 }
 
 /* body */
@@ -55,6 +61,7 @@ body {
 	line-height: normal;
 	font-family: system-ui, Arial;
 	user-select: none;
+	outline: none !important;
 }
 
 /* headings */

diff --git a/interface/windows/codes/index.ts b/interface/windows/codes/index.ts
@@ -30,13 +30,13 @@ export const generateCodeElements = (data: LibImportFile) => {
 			element.innerHTML = `
 			<div class="mt-5 flex flex-row px-5">
 				<div class="flex flex-1 justify-start">
-					<h3 id="name${i}" tabindex="0" class="mt-3 text-3xl font-normal">-</h3>
+					<h3 id="name${i}" tabindex="0" class="mt-3 text-3xl font-normal focusRing rounded-2xl">-</h3>
 				</div>
 				<div class="flex flex-1 justify-center">
-					<p id="code${i}" tabindex="0" class="transparent-900 relative mt-1.5 w-[140px] select-all rounded-2xl py-3 px-5 text-2xl">-</p>
+					<p id="code${i}" tabindex="0" class="transparent-900 relative mt-1.5 w-[140px] select-all rounded-2xl py-3 px-5 text-2xl focusRing">-</p>
 				</div>
 				<div class="flex flex-1 justify-end">
-					<h3 id="time${i}" tabindex="0" class="mt-3 text-3xl font-normal">-</h3>
+					<h3 id="time${i}" tabindex="0" class="mt-3 text-3xl font-normal focusRing rounded-2xl">-</h3>
 				</div>
 			</div>
 			<div class="mt-5 flex flex-col items-center justify-center">
@@ -67,6 +67,11 @@ export const generateCodeElements = (data: LibImportFile) => {
 			const progress = document.querySelector(`#progress${i}`)
 			const button = document.querySelector(`#button${i}`)
 
+			// blur codes
+			if (settings.settings.blurCodes === true) {
+				code.classList.add("blurCodes")
+			}
+
 			// add to query
 			searchQuery.push(`${issuers[i].toLowerCase().trim()}`)
 

diff --git a/interface/windows/settings/settings.svelte b/interface/windows/settings/settings.svelte
@@ -89,7 +89,7 @@
 				<h3>You can choose how to sort the codes. By default codes are sorted by importing order.</h3>
 			</div>
 			<div class="ml-20 flex gap-3">
-				<Dropdown on:message={handleMessage} />
+				<Dropdown />
 			</div>
 		</div>
 	</div>
@@ -152,8 +152,4 @@
 	import Toggle from "../../components/toggle.svelte"
 	import { about, clearData } from "./index"
 	import { settings } from "../../stores/settings"
-
-	const handleMessage = (event) => {
-		console.log(event.detail.value)
-	}
 </script>