From b07f103b1dcf6853d230d35f870c65505930adf4 Mon Sep 17 00:00:00 2001
From: Ilia <istudyatuni@gmail.com>
Date: Mon, 16 Oct 2023 00:14:14 +0300
Subject: [PATCH] feat: buttons, links and elements with tooltips now keyboard
 accessible

---
 src/components/Main.svelte          | 6 ++++--
 src/components/atoms/Tooltip.svelte | 8 +++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/Main.svelte b/src/components/Main.svelte
index 02c1770..6c204da 100644
--- a/src/components/Main.svelte
+++ b/src/components/Main.svelte
@@ -33,7 +33,7 @@
 			<h4 class="city-name">{$settings.current_city.name}</h4>
 			<a class="map" href={map_link}>
 				<Tooltip position="right" text={$_('header.maps.tooltip')}>
-					<MapIcon />
+					<MapIcon width="20" height="20" />
 				</Tooltip>
 			</a>
 		</div>
@@ -43,6 +43,7 @@
 				href={settingsNotOpened ? '/' : '/settings'}
 				class="settings"
 				alt="settings toggle"
+				tabindex="0"
 				on:click={() => (settingsNotOpened = !settingsNotOpened)}>
 				<SettingsIcon width="30" height="30" />
 			</a>
@@ -50,7 +51,8 @@
 			<a
 				href="https://github.com/istudyatuni/weather-site"
 				alt="github"
-				class="github">
+				class="github"
+				tabindex="0">
 				<GithubIcon width="30" height="30" />
 			</a>
 		</div>
diff --git a/src/components/atoms/Tooltip.svelte b/src/components/atoms/Tooltip.svelte
index 9ad51ed..69845d9 100644
--- a/src/components/atoms/Tooltip.svelte
+++ b/src/components/atoms/Tooltip.svelte
@@ -4,9 +4,10 @@
 		position = 'top'
 </script>
 
-<div class="tooltip {position}">
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+<div class="tooltip {position}" tabindex="0" >
 	<slot />
-	<div class="text">{text}</div>
+	<div class="text" role="tooltip">{text}</div>
 </div>
 
 <style lang="scss">
@@ -77,7 +78,8 @@
 	}
 
 	/* Show the tooltip text when you mouse over the tooltip container */
-	.tooltip:hover .text {
+	.tooltip:hover .text,
+	.tooltip:focus .text {
 		visibility: visible;
 		opacity: 1;
 	}