From 551991d407eddc167a720b5c212c60d4ea0c9524 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Wed, 15 Dec 2021 22:31:49 +0100
Subject: [PATCH] Fix accessibility issues

---
 src/components/atoms/ButtonCircle.svelte  |  5 +++--
 src/components/molecules/EmailForm.svelte |  1 +
 src/components/molecules/Location.svelte  |  2 +-
 src/components/molecules/Switcher.svelte  | 26 +++++++++++------------
 src/components/organisms/Locations.svelte |  2 +-
 src/components/organisms/Shop.svelte      |  2 +-
 src/routes/index.svelte                   |  2 +-
 src/routes/locations.svelte               |  2 +-
 8 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/atoms/ButtonCircle.svelte b/src/components/atoms/ButtonCircle.svelte
index f148bb9..98e1340 100644
--- a/src/components/atoms/ButtonCircle.svelte
+++ b/src/components/atoms/ButtonCircle.svelte
@@ -7,6 +7,7 @@
     export let form: string = undefined
     export let clone: boolean = false
     export let disabled: boolean = undefined
+    export let label: string = undefined
 
     const className = 'button-circle'
     const classes = [
@@ -18,7 +19,7 @@
 </script>
 
 {#if tag === 'a'}
-    <a href={url} class={classes} tabindex="0" on:click>
+    <a href={url} class={classes} tabindex="0" aria-label={label} on:click>
         {#if clone}
             {#each Array(2) as _}
                 <slot />
@@ -28,7 +29,7 @@
         {/if}
     </a>
 {:else}
-    <button {type} {form} class={classes} disabled={disabled} tabindex="0" on:click>
+    <button {type} {form} class={classes} disabled={disabled} tabindex="0" aria-label={label} on:click>
         {#if clone}
             {#each Array(2) as _}
                 <slot />
diff --git a/src/components/molecules/EmailForm.svelte b/src/components/molecules/EmailForm.svelte
index 47e9f77..d8a5f2f 100644
--- a/src/components/molecules/EmailForm.svelte
+++ b/src/components/molecules/EmailForm.svelte
@@ -25,6 +25,7 @@
                 type="submit" form="sib-form"
                 color="pink" size="small"
                 clone={true}
+                label="Subscribe"
             >
                 <IconArrow color="white" />
             </ButtonCircle>
diff --git a/src/components/molecules/Location.svelte b/src/components/molecules/Location.svelte
index 2ba23d9..f74601b 100644
--- a/src/components/molecules/Location.svelte
+++ b/src/components/molecules/Location.svelte
@@ -56,7 +56,7 @@
     }
 </script>
 
-<div class="location" role="listitem" bind:this={locationEl}
+<div class="location" bind:this={locationEl}
     style="--offset-x: {$offset.x}px; --offset-y: {$offset.y}px; --rotate: {$offset.x * 0.125}deg"
 >
     <a href="/{location.country.slug}/{location.slug}"
diff --git a/src/components/molecules/Switcher.svelte b/src/components/molecules/Switcher.svelte
index 5964648..dd732f4 100644
--- a/src/components/molecules/Switcher.svelte
+++ b/src/components/molecules/Switcher.svelte
@@ -56,20 +56,18 @@
     class:is-open={isOpen}
     class:is-over={isOver}
 >
-    <nav class="switcher__links">
-        <ul>
-            {#each links as { icon, iconLabel, url, text }}
-                <li class:is-active={$page.path.startsWith(url)}>
-                    <a href={url} on:click={toggleSwitcher}
-                        sveltekit:noscroll sveltekit:prefetch
-                    >
-                        <Icon class="icon" icon={icon} label={iconLabel} />
-                        <span>{text}</span>
-                    </a>
-                </li>
-            {/each}
-        </ul>
-    </nav>
+    <ul class="switcher__links">
+        {#each links as { icon, iconLabel, url, text }}
+            <li class:is-active={$page.path.startsWith(url)}>
+                <a href={url} on:click={toggleSwitcher}
+                    sveltekit:noscroll sveltekit:prefetch
+                >
+                    <Icon class="icon" icon={icon} label={iconLabel} />
+                    <span>{text}</span>
+                </a>
+            </li>
+        {/each}
+    </ul>
 
     <button class="switcher__button" title="{!isOpen ? 'Open' : 'Close'} menu" tabindex="0"
         on:click={toggleSwitcher}
diff --git a/src/components/organisms/Locations.svelte b/src/components/organisms/Locations.svelte
index 16b2710..3134585 100644
--- a/src/components/organisms/Locations.svelte
+++ b/src/components/organisms/Locations.svelte
@@ -43,7 +43,7 @@
         <p>{explore_list}</p>
     </div>
 
-    <ul class="browse__continents" role="navigation">
+    <ul class="browse__continents">
         {#each continents as { name, slug }}
             <li class:is-disabled={currentContinent && currentContinent !== slug}>
                 <Button
diff --git a/src/components/organisms/Shop.svelte b/src/components/organisms/Shop.svelte
index 4720df0..10fb093 100644
--- a/src/components/organisms/Shop.svelte
+++ b/src/components/organisms/Shop.svelte
@@ -35,7 +35,7 @@
         </div>
 
         <div class="shop__content">
-            <h3 class="title-medium">{shop.module_title}</h3>
+            <h2 class="title-medium">{shop.module_title}</h2>
             <p class="text-small">{shop.module_text}</p>
             {#if shop.enabled}
                 <Button url="/shop" text="Shop" color="pinklight" />
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index dd08dbe..38fc3c5 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -148,7 +148,7 @@
         </div>
     </div>
 
-    <section class="homepage__locations" id="locations">
+    <section class="homepage__locations">
         <InteractiveGlobe />
 
         <ScrollingTitle
diff --git a/src/routes/locations.svelte b/src/routes/locations.svelte
index 1780ae8..4211a8b 100644
--- a/src/routes/locations.svelte
+++ b/src/routes/locations.svelte
@@ -23,7 +23,7 @@
         text="Explore the globe to discover unique locations across the world"
     />
 
-    <section class="explore__locations" id="locations">
+    <section class="explore__locations">
         <InteractiveGlobe />
         <Locations {locations} />
     </section>