Add some a11y to the mix

src/atoms/ToggleLayout.svelte

@@ -61,7 +61,7 @@
     })
 </script>
 
-<div class="toggle" bind:this={toggleEl}>
+<div class="toggle" role="switch" bind:this={toggleEl}>
     <button data-layout="list" class:active={layoutSetting === 'list'} on:click={toggleLayout}>
         <svg xmlns="http://www.w3.org/2000/svg" width="19" height="17" viewBox="0 0 19 17">
             <g class="anim">

src/molecules/Location.svelte

@@ -6,7 +6,7 @@
     const { name, slug, country } = location
 </script>
 
-<div class="location">
+<div class="location" role="listitem">
     <a href="/location/{country.slug}/{slug}" rel="prefetch" sapper-noscroll>
         <img src={country.flag.full_url} alt="Flag of {country.name}">
         <div class="anim-mask mask-city">

src/molecules/Photo.svelte

@@ -33,10 +33,10 @@
     })
 </script>
 
-<div class="photo" bind:this={scope}>
+<div class="photo" role="figure" aria-labelledby="photo-{index + 1}" bind:this={scope}>
     <div class="photo__location wrap">
         <div class="wrapper">
-            <h2 class="title-location">
+            <h2 class="title-location" id="photo-{index + 1}">
                 {#each name.split(', ') as line, i}
                 <span class="line">
                     <span>{name.split(', ')[i]},</span>

src/organisms/Carousel.svelte

@@ -172,6 +172,9 @@
                     class:is-active={id === currentPhoto.id}
                     class:is-next={id === nextPhoto.id}
                     on:click={openFullscreen}
+                    role="group"
+                    aria-roledescription="slide"
+                    aria-label="Photo {index + 1} of {photos.length}"
                 >
                     <picture class="gallery__picture">
                         <source media="(min-width: 968px)" data-srcset={getThumbnail(image.private_hash, 1200)}>

src/organisms/Footer.svelte

@@ -13,7 +13,8 @@
             <Switcher radius="30" />
         </div>
 
-        <ul class="footer__right">
+        <nav class="footer__right" >
+            <ul>
                 <li>
                     <ul>
                         <li>
@@ -36,5 +37,6 @@
                     </a>
                 </li>
             </ul>
+        </nav>
     </div>
 </footer>

src/organisms/Locations.svelte

@@ -58,7 +58,7 @@
         {/each}
     </ul>
 
-    <div class="browse__locations" id="locations_list" bind:this={list}>
+    <div class="browse__locations" id="locations_list" role="list" bind:this={list}>
     {#each filteredLocations as location (location.id)}
         <div animate:flip="{{ duration: transitionDuration }}"
             in:receive="{{ key: location.id }}"

src/routes/index.svelte

@@ -106,7 +106,7 @@
     </section>
 
     <section class="explore explore--homepage">
-        <div class="of" id="title-of" aria-label="of">
+        <div class="of" id="title-of" role="heading" aria-level="2" aria-label="of">
             <div class="anim-mask">
                 {@html charsToSpan('of')}
             </div>

src/style/organisms/_footer.scss

@@ -35,11 +35,13 @@
         font-size: 14px;
         text-align: center;
 
+        & > ul {
             @include breakpoint (sm) {
                 display: flex;
                 align-items: center;
                 padding-top: 6px;
             }
+        }
 
         li {
             display: block;