From 8c7f17cc30afd258a7c225d20fce165f335abcc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?=
 <64154960+JMarques1196@users.noreply.github.com>
Date: Sat, 25 Nov 2023 14:46:20 +0000
Subject: [PATCH] fix: Navigation Bar Accessibility (#196)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* added aria labels to the Navbar

* wrapped <li> element in <ul>

* Update src/layout/Navbar/NavHost.svelte

Co-authored-by: Ushie <ushiekane@gmail.com>

* update: wrap <li> element in <ul>

---------

Co-authored-by: oSumAtrIX <johan.melkonyan1@web.de>
Co-authored-by: João André Marques <joaoandremarques@MacBook-Pro.local>
Co-authored-by: Ushie <ushiekane@gmail.com>
---
 src/layout/Navbar/NavButton.svelte | 32 ++++++++++++------------------
 src/layout/Navbar/NavHost.svelte   | 23 +++++++++++----------
 src/lib/components/Button.svelte   |  5 +++--
 3 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/src/layout/Navbar/NavButton.svelte b/src/layout/Navbar/NavButton.svelte
index 8aa305b..9714589 100644
--- a/src/layout/Navbar/NavButton.svelte
+++ b/src/layout/Navbar/NavButton.svelte
@@ -8,6 +8,7 @@
 
 	export let href: string;
 	export let queryKey: null | keyof typeof queries | Array<keyof typeof queries> = null;
+	export let label: string;
 
 	function prefetch() {
 		if (queryKey !== null) {
@@ -26,37 +27,30 @@
 	}
 </script>
 
-<a data-sveltekit-preload-data on:mouseenter={prefetch} {href}>
+<li class:selected={href === '/' + $RouterEvents.target_url.pathname.split('/')[1]}>
+	<a data-sveltekit-preload-data on:mouseenter={prefetch} {href} aria-label={label}>
 	<!-- Check if href is equal to the first path -->
-	<li class:selected={href === '/' + $RouterEvents.target_url.pathname.split('/')[1]}>
 		<span><slot /></span>
-	</li>
-</a>
+	</a>
+</li>	
 
 <style>
 	li {
-		border: var(--grey-six);
-		text-align: center;
 		list-style: none;
 		position: relative;
-		font-weight: 500;
-		font-size: 1rem;
-		align-items: center;
-		border: var(--grey-six);
 		transition-timing-function: var(--bezier-one);
 		transition-duration: 0.25s;
-		padding: 10px 16px;
 		border-radius: 10px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
 	}
 
 	a {
 		text-decoration: none;
-		font-size: 1rem;
 		user-select: none;
 		border-radius: 10px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 10px 16px;
 	}
 
 	span {
@@ -82,12 +76,12 @@
 
 	@media (max-width: 767px) {
 		li {
-			padding: 0.75rem 1.25rem;
-			text-align: left;
-			justify-content: left;
 			border-radius: 100px;
 		}
-
+		a{
+			padding: 0.75rem 1.25rem;
+			justify-content: left;
+		}
 		span {
 			font-size: 1rem;
 			font-weight: 500;
diff --git a/src/layout/Navbar/NavHost.svelte b/src/layout/Navbar/NavHost.svelte
index cb5deca..2690a29 100644
--- a/src/layout/Navbar/NavHost.svelte
+++ b/src/layout/Navbar/NavHost.svelte
@@ -57,6 +57,7 @@
 		class="menu-btn mobile-only"
 		on:click={() => (menuOpen = !menuOpen)}
 		class:open={menuOpen}
+		aria-label="Menu"
 	>
 		<span class="menu-btn__burger" />
 	</button>
@@ -69,16 +70,16 @@
 			transition:horizontalSlide={{ direction: 'inline', easing: expoOut, duration: 400 }}
 		>
 			<div id="main-navigation">
-				<div class="nav-buttons">
-					<Navigation href="/">Home</Navigation>
-					<Navigation queryKey="manager" href="/download">Download</Navigation>
-					<Navigation queryKey="patches" href="/patches">Patches</Navigation>
-					<Navigation queryKey="repositories" href="/contributors">Contributors</Navigation>
-					<Navigation queryKey={["donate", "team"]} href="/donate">Donate</Navigation>
-				</div>
+				<ul class="nav-buttons">
+					<Navigation href="/" label="Home">Home</Navigation>
+					<Navigation queryKey="manager" href="/download" label="Download">Download</Navigation>
+					<Navigation queryKey="patches" href="/patches" label="Patches">Patches</Navigation>
+					<Navigation queryKey="repositories" href="/contributors" label="Contributors">Contributors</Navigation>
+					<Navigation queryKey={["donate", "team"]} href="/donate" label="Donate">Donate</Navigation>
+				</ul>
 			</div>
 			<div id="secondary-navigation">
-				<button on:click={() => (modalOpen = !modalOpen)}>
+				<button on:click={() => (modalOpen = !modalOpen)} aria-label="Settings">
 					<Svg viewBoxHeight={24} svgHeight={20}>
 						<path
 							d="M 19.1 12.9 C 19.1 12.6 19.2 12.3 19.2 12 C 19.2 11.7 19.2 11.4 19.1 11.1 L 21.1 9.5 C 21.3 9.4 21.3 9.1 21.2 8.9 L 19.3 5.6 C 19.2 5.4 18.9 5.3 18.7 5.4 L 16.3 6.4 C 15.8 6 15.3 5.7 14.7 5.5 L 14.3 3 C 14.3 2.8 14.1 2.6 13.8 2.6 L 10 2.6 C 9.8 2.6 9.6 2.8 9.5 3 L 9.2 5.3 C 8.7 5.6 8.1 5.9 7.6 6.3 L 5.2 5.3 C 5 5.2 4.8 5.3 4.6 5.5 L 2.7 8.9 C 2.6 9.1 2.7 9.3 2.9 9.5 L 4.9 11.1 C 4.9 11.4 4.8 11.7 4.8 12 C 4.8 12.3 4.8 12.6 4.9 12.9 L 2.9 14.5 C 2.7 14.6 2.7 14.9 2.8 15.1 L 4.7 18.4 C 4.8 18.6 5.1 18.7 5.3 18.6 L 7.7 17.6 C 8.2 18 8.7 18.3 9.3 18.5 L 9.7 21 C 9.8 21.2 9.9 21.4 10.2 21.4 L 14 21.4 C 14.2 21.4 14.4 21.2 14.5 21 L 14.9 18.5 C 15.5 18.3 16 17.9 16.5 17.6 L 18.9 18.6 C 19.1 18.7 19.4 18.6 19.5 18.4 L 21.4 15.1 C 21.5 14.9 21.5 14.6 21.3 14.5 L 19.1 12.9 Z M 12 15.6 C 10 15.6 8.4 14 8.4 12 C 8.4 10 10 8.4 12 8.4 C 14 8.4 15.6 10 15.6 12 C 15.6 14 14 15.6 12 15.6 Z"
@@ -114,7 +115,7 @@
 	<div id="settings-content">
 		<div class="input-wrapper">
 			<input name="api-url" type="text" bind:value={url} />
-			<button id="button-reset" on:click={reset}>
+			<button id="button-reset" on:click={reset} aria-label="Reset Button">
 				<Svg viewBoxHeight={48} svgHeight={24}>
 					<path
 						d="M11.2 36.725C14.6667 40.2417 18.8833 42 23.85 42C26.35 42 28.7 41.525 30.9 40.575C33.1 39.625 35.025 38.3333 36.675 36.7C38.325 35.0667 39.625 33.15 40.575 30.95C41.525 28.75 42 26.4 42 23.9C42 21.4 41.525 19.0667 40.575 16.9C39.625 14.7333 38.325 12.8417 36.675 11.225C35.025 9.60833 33.1 8.33333 30.9 7.4C28.7 6.46667 26.35 6 23.85 6C21.1833 6 18.6583 6.58333 16.275 7.75C13.8917 8.91667 11.8333 10.5167 10.1 12.55V7.25H7.1V17.65H17.55V14.65H12.3C13.7667 12.95 15.4917 11.5833 17.475 10.55C19.4583 9.51667 21.5833 9 23.85 9C28.0167 9 31.5833 10.425 34.55 13.275C37.5167 16.125 39 19.6167 39 23.75C39 27.9833 37.5333 31.5833 34.6 34.55C31.6667 37.5167 28.0833 39 23.85 39C19.6833 39 16.1667 37.5333 13.3 34.6C10.4333 31.6667 9 28.1167 9 23.95H6C6 28.95 7.73333 33.2083 11.2 36.725Z"
@@ -125,8 +126,8 @@
 	</div>
 
 	<svelte:fragment slot="buttons">
-		<Button type="text" on:click={clear_and_reload}>Clear cache</Button>
-		<Button type="text" on:click={save}>Save</Button>
+		<Button type="text" on:click={clear_and_reload} label="Clear Cache Button">Clear cache</Button>
+		<Button type="text" on:click={save} label="Save Button">Save</Button>
 	</svelte:fragment>
 </Modal>
 
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 4fd0660..ec2831e 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -3,18 +3,19 @@
 	export let icon = '';
 	export let href = '';
 	export let target = '';
+	export let label = '';
 </script>
 
 <button on:click>
 	{#if href}
-		<a {href} {target} {...$$restProps} class={`button-${type}`}>
+		<a {href} {target} {...$$restProps} class={`button-${type}`} aria-label={label}>
 			{#if icon}
 				<img src="../icons/{icon}.svg" alt={icon} />
 			{/if}
 			<slot />
 		</a>
 	{:else}
-		<div {...$$restProps} class={`button-${type}`}>
+		<div {...$$restProps} class={`button-${type}`} aria-label={label}>
 			{#if icon}
 				<img src="../icons/{icon}.svg" alt={icon} />
 			{/if}