feat: buttons, links and elements with tooltips now keyboard accessible

istudyatuni · Oct 15, 2023 · b07f103 · b07f103
1 parent 461e544
commit b07f103
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git 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,14 +43,16 @@
 				href={settingsNotOpened ? '/' : '/settings'}
 				class="settings"
 				alt="settings toggle"
+				tabindex="0"
 				on:click={() => (settingsNotOpened = !settingsNotOpened)}>
 				<SettingsIcon width="30" height="30" />
 			</a>
 
 			<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
@@ -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;
 	}