Add tabindex to elements for better keyboard navigation

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 />

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 />

src/components/molecules/Location.svelte

@@ -63,6 +63,7 @@
         on:mousemove={handleMouseMove}
         on:mouseleave={handleMouseLeave}
         sveltekit:noscroll
+        tabindex="0"
     >
         <Image
             class="location__flag"

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>

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>

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>

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>

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"

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"