flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add some a11y to the mix
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Félix Péault
2020-04-06 13:37:43 +02:00
parent 6561b24f75
commit 11e06c51c9
8 changed files with 40 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/organisms/Carousel.svelte
View File

@@ -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)}>

48
src/organisms/Footer.svelte
View File

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

2
src/organisms/Locations.svelte
View File

@@ -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 }}"