From 8ac954b1a29c9fed6a006e4428cd99dd120611c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 6 Dec 2021 15:03:41 +0100
Subject: [PATCH] Add tabindex to elements for better keyboard navigation

---
 src/components/atoms/Button.svelte           | 5 +++--
 src/components/atoms/ButtonCircle.svelte     | 4 ++--
 src/components/molecules/Location.svelte     | 1 +
 src/components/molecules/Switcher.svelte     | 2 +-
 src/components/organisms/Footer.svelte       | 4 ++--
 src/routes/[country]/[location]/index.svelte | 8 ++++++--
 src/routes/credits.svelte                    | 6 +++---
 src/routes/photos.svelte                     | 2 +-
 src/routes/subscribe.svelte                  | 2 +-
 9 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/atoms/Button.svelte b/src/components/atoms/Button.svelte
index c05e391..ee31d98 100644
--- a/src/components/atoms/Button.svelte
+++ b/src/components/atoms/Button.svelte
@@ -25,7 +25,7 @@
 </script>
 
 {#if tag === 'button'}
-    <button class={classes} on:click disabled={disabled}>
+    <button class={classes} tabindex="0" {disabled} on:click>
         <slot />
         <SplitText {text} clone={true} />
     </button>
@@ -35,7 +35,8 @@
         {rel} {target}
         sveltekit:prefetch={url && isExternal ? null : true}
         sveltekit:noscroll={isExternal ? null : true}
-        disabled={disabled}
+        {disabled}
+        tabindex="0"
         on:click
     >
         <slot />
diff --git a/src/components/atoms/ButtonCircle.svelte b/src/components/atoms/ButtonCircle.svelte
index 8d9d3af..f148bb9 100644
--- a/src/components/atoms/ButtonCircle.svelte
+++ b/src/components/atoms/ButtonCircle.svelte
@@ -18,7 +18,7 @@
 </script>
 
 {#if tag === 'a'}
-    <a href={url} class={classes} on:click>
+    <a href={url} class={classes} tabindex="0" on:click>
         {#if clone}
             {#each Array(2) as _}
                 <slot />
@@ -28,7 +28,7 @@
         {/if}
     </a>
 {:else}
-    <button {type} {form} class={classes} disabled={disabled} on:click>
+    <button {type} {form} class={classes} disabled={disabled} tabindex="0" on:click>
         {#if clone}
             {#each Array(2) as _}
                 <slot />
diff --git a/src/components/molecules/Location.svelte b/src/components/molecules/Location.svelte
index a05199a..2ba23d9 100644
--- a/src/components/molecules/Location.svelte
+++ b/src/components/molecules/Location.svelte
@@ -63,6 +63,7 @@
         on:mousemove={handleMouseMove}
         on:mouseleave={handleMouseLeave}
         sveltekit:noscroll
+        tabindex="0"
     >
         <Image
             class="location__flag"
diff --git a/src/components/molecules/Switcher.svelte b/src/components/molecules/Switcher.svelte
index f76fb6d..a566d08 100644
--- a/src/components/molecules/Switcher.svelte
+++ b/src/components/molecules/Switcher.svelte
@@ -71,7 +71,7 @@
         </ul>
     </nav>
 
-    <button class="switcher__button" title="{!isOpen ? 'Open' : 'Close'} menu"
+    <button class="switcher__button" title="{!isOpen ? 'Open' : 'Close'} menu" tabindex="0"
         on:click={toggleSwitcher}
     >
         <span>
diff --git a/src/components/organisms/Footer.svelte b/src/components/organisms/Footer.svelte
index 04c43fc..acf8e8d 100644
--- a/src/components/organisms/Footer.svelte
+++ b/src/components/organisms/Footer.svelte
@@ -10,7 +10,7 @@
 
 <footer class="footer">
     <div class="container grid">
-        <a href="/" class="footer__title" sveltekit:prefetch sveltekit:noscroll>
+        <a href="/" class="footer__title" sveltekit:prefetch sveltekit:noscroll tabindex="0">
             <SiteTitle tag="div" />
         </a>
 
@@ -18,7 +18,7 @@
             <ul>
                 {#each footer_links as { title, slug }}
                     <li>
-                        <a href="/{slug}" class="link-3d" sveltekit:prefetch sveltekit:noscroll>
+                        <a href="/{slug}" class="link-3d" sveltekit:prefetch sveltekit:noscroll tabindex="0">
                             <SplitText text={title} clone={true} />
                         </a>
                     </li>
diff --git a/src/routes/[country]/[location]/index.svelte b/src/routes/[country]/[location]/index.svelte
index 8de723c..cea4cae 100644
--- a/src/routes/[country]/[location]/index.svelte
+++ b/src/routes/[country]/[location]/index.svelte
@@ -276,7 +276,7 @@
                         </p>
                     </div>
                     <figure class="house__photo">
-                        <a href="/{params.country}/{params.location}/{slug}" sveltekit:prefetch sveltekit:noscroll>
+                        <a href="/{params.country}/{params.location}/{slug}" sveltekit:noscroll tabindex="0">
                             <Image
                                 id={id}
                                 sizeKey="photo-list"
@@ -300,7 +300,11 @@
 
         <section class="location-page__next">
             <div class="container">
-                <div class="pagination" role="button" on:click={!ended && loadMorePhotos} disabled={ended ? ended : undefined}>
+                <div class="pagination" role="button"
+                    on:click={!ended && loadMorePhotos} disabled={ended ? ended : undefined}
+                    on:keydown={({ key, target }) => key === 'Enter' && target.click()}
+                    tabindex="0"
+                >
                     <div class="pagination__progress">
                         <span class="current">{currentPhotosAmount}</span>
                         <span>/</span>
diff --git a/src/routes/credits.svelte b/src/routes/credits.svelte
index 7c95b9c..de1b9c3 100644
--- a/src/routes/credits.svelte
+++ b/src/routes/credits.svelte
@@ -32,7 +32,7 @@
                                 <dt>
                                     {#if website}
                                         <h3>
-                                            <a href={website} rel="noopener external" target="_blank">{name}</a>
+                                            <a href={website} rel="noopener external" target="_blank" tabindex="0">{name}</a>
                                         </h3>
                                     {:else}
                                         <h3>{name}</h3>
@@ -57,7 +57,7 @@
                             <dt>
                                 {#if website}
                                     <h3>
-                                        <a href={website} rel="noopener external" target="_blank">{name}</a>
+                                        <a href={website} rel="noopener external" target="_blank" tabindex="0">{name}</a>
                                     </h3>
                                 {:else}
                                     <h3>{name}</h3>
@@ -67,7 +67,7 @@
                                 <ul>
                                     {#each location as { location_id: { name, slug: slugLocation, country: { slug: slugCountry }}}, index}
                                         <li>
-                                            <a href="/{slugCountry}/{slugLocation}" sveltekit:noscroll>{name}</a>
+                                            <a href="/{slugCountry}/{slugLocation}" sveltekit:noscroll tabindex="0">
                                         </li>
                                     {/each}
                                 </ul>
diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index 08a5ab0..93827be 100644
--- a/src/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -421,7 +421,7 @@
                 <div class="photos__grid" bind:this={photosGridEl}>
                     {#each photos as { id, image, slug, location, title, city }, index (id)}
                         <figure class="photo shadow-photo">
-                            <a href="/{location.country.slug}/{location.slug}/{slug}" sveltekit:prefetch sveltekit:noscroll>
+                            <a href="/{location.country.slug}/{location.slug}/{slug}" sveltekit:prefetch sveltekit:noscroll tabindex="0">
                                 <Image
                                     id={image.id}
                                     sizeKey="photo-grid"
diff --git a/src/routes/subscribe.svelte b/src/routes/subscribe.svelte
index 2d33a8c..dc76a9c 100644
--- a/src/routes/subscribe.svelte
+++ b/src/routes/subscribe.svelte
@@ -28,7 +28,7 @@
         <ul>
             {#each issues as { issue, title, date_sent, link, thumbnail: { id } }}
                 <li class="issue">
-                    <a href={link} target="_blank" rel="external noreferrer noopener">
+                    <a href={link} target="_blank" rel="external noreferrer noopener" tabindex="0">
                         <Image
                             id={id}
                             sizeKey="issue-thumbnail-small"