From 11e06c51c97cf2ee5406cc1e0d12389c351bedcf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 6 Apr 2020 13:37:43 +0200
Subject: [PATCH] Add some a11y to the mix

---
 src/atoms/ToggleLayout.svelte    |  2 +-
 src/molecules/Location.svelte    |  2 +-
 src/molecules/Photo.svelte       |  4 +--
 src/organisms/Carousel.svelte    |  3 ++
 src/organisms/Footer.svelte      | 48 +++++++++++++++++---------------
 src/organisms/Locations.svelte   |  2 +-
 src/routes/index.svelte          |  2 +-
 src/style/organisms/_footer.scss | 10 ++++---
 8 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/src/atoms/ToggleLayout.svelte b/src/atoms/ToggleLayout.svelte
index 779b8ec..86f2ffd 100644
--- a/src/atoms/ToggleLayout.svelte
+++ b/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">
diff --git a/src/molecules/Location.svelte b/src/molecules/Location.svelte
index 0756d72..68a779f 100644
--- a/src/molecules/Location.svelte
+++ b/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">
diff --git a/src/molecules/Photo.svelte b/src/molecules/Photo.svelte
index 9a0d352..6a5d2b2 100644
--- a/src/molecules/Photo.svelte
+++ b/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>
diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte
index c2a915a..0b27c9b 100644
--- a/src/organisms/Carousel.svelte
+++ b/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)}>
diff --git a/src/organisms/Footer.svelte b/src/organisms/Footer.svelte
index efa55a2..5f3a391 100644
--- a/src/organisms/Footer.svelte
+++ b/src/organisms/Footer.svelte
@@ -13,28 +13,30 @@
             <Switcher radius="30" />
         </div>
 
-        <ul class="footer__right">
-            <li>
-                <ul>
-                    <li>
-                        <LinkTranslate href="/credits" text="Credits" rel="prefetch" noScroll />
-                    </li>
-                    {#if $site}
-                    <li class="instagram">
-                        <LinkTranslate href="https://instagram.com/{$site.instagram}" text="Instagram" target="_blank" rel="noopener">
-                            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="#fff">
-                                <path d="M11.245 0c1.615.005 2.002.02 2.878.06 1.064.048 1.791.217 2.427.464a4.902 4.902 0 0 1 1.772 1.154 4.902 4.902 0 0 1 1.153 1.771c.247.636.416 1.363.465 2.428.042.914.056 1.295.06 3.095v2.055c-.004 1.8-.018 2.182-.06 3.096-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 0 1-1.153 1.772 4.902 4.902 0 0 1-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.049-1.407.06-4.123.06s-3.057-.011-4.124-.06c-1.064-.049-1.79-.218-2.427-.465a4.902 4.902 0 0 1-1.771-1.153A4.902 4.902 0 0 1 .524 16.55c-.247-.636-.416-1.363-.465-2.427C.02 13.247.005 12.86 0 11.245v-2.49c.005-1.616.02-2.002.06-2.878.048-1.065.217-1.792.464-2.428a4.902 4.902 0 0 1 1.154-1.771A4.902 4.902 0 0 1 3.448.524C4.086.277 4.813.108 5.877.06 6.753.02 7.14.005 8.754 0zm-.204 1.802H8.958c-1.739.003-2.101.016-3 .057-.974.045-1.504.208-1.856.345-.467.181-.8.398-1.15.748-.35.35-.567.683-.748 1.15-.137.352-.3.882-.345 1.857-.04.898-.054 1.26-.057 2.999v2.083c.003 1.739.016 2.101.057 3 .045.975.208 1.504.345 1.857.181.466.398.8.748 1.15.35.35.683.566 1.15.747.352.137.882.3 1.857.345 1.054.048 1.37.058 4.04.058h.288c2.407 0 2.738-.012 3.754-.058.975-.045 1.504-.208 1.857-.345.466-.18.8-.398 1.15-.748.35-.35.566-.683.747-1.15.137-.352.3-.881.345-1.856.048-1.055.058-1.371.058-4.041v-.288c0-2.407-.012-2.738-.058-3.753-.045-.975-.208-1.505-.345-1.857a3.098 3.098 0 0 0-.748-1.15 3.099 3.099 0 0 0-1.15-.748c-.352-.137-.881-.3-1.856-.345-.899-.04-1.261-.054-3-.057zM10 4.864a5.135 5.135 0 1 1 0 10.271 5.135 5.135 0 0 1 0-10.27zm0 1.802a3.334 3.334 0 1 0 0 6.667 3.334 3.334 0 0 0 0-6.667zm5.338-3.205a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z" fill-rule="evenodd"/>
-                            </svg>
-                        </LinkTranslate>
-                    </li>
-                    {/if}
-                </ul>
-            </li>
-            <li class="by">
-                <a href="https://cetrucflotte.com" title="A project by Cetrucflotte" target="_blank" rel="noopener">
-                    <img src="/img/logo-ctf.svg" alt="Logo of Cetrucflotte">
-                </a>
-            </li>
-        </ul>
+        <nav class="footer__right" >
+            <ul>
+                <li>
+                    <ul>
+                        <li>
+                            <LinkTranslate href="/credits" text="Credits" rel="prefetch" noScroll />
+                        </li>
+                        {#if $site}
+                        <li class="instagram">
+                            <LinkTranslate href="https://instagram.com/{$site.instagram}" text="Instagram" target="_blank" rel="noopener">
+                                <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="#fff">
+                                    <path d="M11.245 0c1.615.005 2.002.02 2.878.06 1.064.048 1.791.217 2.427.464a4.902 4.902 0 0 1 1.772 1.154 4.902 4.902 0 0 1 1.153 1.771c.247.636.416 1.363.465 2.428.042.914.056 1.295.06 3.095v2.055c-.004 1.8-.018 2.182-.06 3.096-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 0 1-1.153 1.772 4.902 4.902 0 0 1-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.049-1.407.06-4.123.06s-3.057-.011-4.124-.06c-1.064-.049-1.79-.218-2.427-.465a4.902 4.902 0 0 1-1.771-1.153A4.902 4.902 0 0 1 .524 16.55c-.247-.636-.416-1.363-.465-2.427C.02 13.247.005 12.86 0 11.245v-2.49c.005-1.616.02-2.002.06-2.878.048-1.065.217-1.792.464-2.428a4.902 4.902 0 0 1 1.154-1.771A4.902 4.902 0 0 1 3.448.524C4.086.277 4.813.108 5.877.06 6.753.02 7.14.005 8.754 0zm-.204 1.802H8.958c-1.739.003-2.101.016-3 .057-.974.045-1.504.208-1.856.345-.467.181-.8.398-1.15.748-.35.35-.567.683-.748 1.15-.137.352-.3.882-.345 1.857-.04.898-.054 1.26-.057 2.999v2.083c.003 1.739.016 2.101.057 3 .045.975.208 1.504.345 1.857.181.466.398.8.748 1.15.35.35.683.566 1.15.747.352.137.882.3 1.857.345 1.054.048 1.37.058 4.04.058h.288c2.407 0 2.738-.012 3.754-.058.975-.045 1.504-.208 1.857-.345.466-.18.8-.398 1.15-.748.35-.35.566-.683.747-1.15.137-.352.3-.881.345-1.856.048-1.055.058-1.371.058-4.041v-.288c0-2.407-.012-2.738-.058-3.753-.045-.975-.208-1.505-.345-1.857a3.098 3.098 0 0 0-.748-1.15 3.099 3.099 0 0 0-1.15-.748c-.352-.137-.881-.3-1.856-.345-.899-.04-1.261-.054-3-.057zM10 4.864a5.135 5.135 0 1 1 0 10.271 5.135 5.135 0 0 1 0-10.27zm0 1.802a3.334 3.334 0 1 0 0 6.667 3.334 3.334 0 0 0 0-6.667zm5.338-3.205a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4z" fill-rule="evenodd"/>
+                                </svg>
+                            </LinkTranslate>
+                        </li>
+                        {/if}
+                    </ul>
+                </li>
+                <li class="by">
+                    <a href="https://cetrucflotte.com" title="A project by Cetrucflotte" target="_blank" rel="noopener">
+                        <img src="/img/logo-ctf.svg" alt="Logo of Cetrucflotte">
+                    </a>
+                </li>
+            </ul>
+        </nav>
     </div>
 </footer>
diff --git a/src/organisms/Locations.svelte b/src/organisms/Locations.svelte
index e52629a..5213b28 100644
--- a/src/organisms/Locations.svelte
+++ b/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 }}"
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index a61a94f..62fb6b0 100644
--- a/src/routes/index.svelte
+++ b/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>
diff --git a/src/style/organisms/_footer.scss b/src/style/organisms/_footer.scss
index 6320c88..a0166bb 100644
--- a/src/style/organisms/_footer.scss
+++ b/src/style/organisms/_footer.scss
@@ -35,10 +35,12 @@
         font-size: 14px;
         text-align: center;
 
-        @include breakpoint (sm) {
-            display: flex;
-            align-items: center;
-            padding-top: 6px;
+        & > ul {
+            @include breakpoint (sm) {
+                display: flex;
+                align-items: center;
+                padding-top: 6px;
+            }
         }
 
         li {