Add some a11y to the mix
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
@@ -61,7 +61,7 @@
|
|||||||
})
|
})
|
||||||
</script>
|
</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}>
|
<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">
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="17" viewBox="0 0 19 17">
|
||||||
<g class="anim">
|
<g class="anim">
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
const { name, slug, country } = location
|
const { name, slug, country } = location
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="location">
|
<div class="location" role="listitem">
|
||||||
<a href="/location/{country.slug}/{slug}" rel="prefetch" sapper-noscroll>
|
<a href="/location/{country.slug}/{slug}" rel="prefetch" sapper-noscroll>
|
||||||
<img src={country.flag.full_url} alt="Flag of {country.name}">
|
<img src={country.flag.full_url} alt="Flag of {country.name}">
|
||||||
<div class="anim-mask mask-city">
|
<div class="anim-mask mask-city">
|
||||||
|
|||||||
@@ -33,10 +33,10 @@
|
|||||||
})
|
})
|
||||||
</script>
|
</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="photo__location wrap">
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<h2 class="title-location">
|
<h2 class="title-location" id="photo-{index + 1}">
|
||||||
{#each name.split(', ') as line, i}
|
{#each name.split(', ') as line, i}
|
||||||
<span class="line">
|
<span class="line">
|
||||||
<span>{name.split(', ')[i]},</span>
|
<span>{name.split(', ')[i]},</span>
|
||||||
|
|||||||
@@ -172,6 +172,9 @@
|
|||||||
class:is-active={id === currentPhoto.id}
|
class:is-active={id === currentPhoto.id}
|
||||||
class:is-next={id === nextPhoto.id}
|
class:is-next={id === nextPhoto.id}
|
||||||
on:click={openFullscreen}
|
on:click={openFullscreen}
|
||||||
|
role="group"
|
||||||
|
aria-roledescription="slide"
|
||||||
|
aria-label="Photo {index + 1} of {photos.length}"
|
||||||
>
|
>
|
||||||
<picture class="gallery__picture">
|
<picture class="gallery__picture">
|
||||||
<source media="(min-width: 968px)" data-srcset={getThumbnail(image.private_hash, 1200)}>
|
<source media="(min-width: 968px)" data-srcset={getThumbnail(image.private_hash, 1200)}>
|
||||||
|
|||||||
@@ -13,28 +13,30 @@
|
|||||||
<Switcher radius="30" />
|
<Switcher radius="30" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul class="footer__right">
|
<nav class="footer__right" >
|
||||||
<li>
|
<ul>
|
||||||
<ul>
|
<li>
|
||||||
<li>
|
<ul>
|
||||||
<LinkTranslate href="/credits" text="Credits" rel="prefetch" noScroll />
|
<li>
|
||||||
</li>
|
<LinkTranslate href="/credits" text="Credits" rel="prefetch" noScroll />
|
||||||
{#if $site}
|
</li>
|
||||||
<li class="instagram">
|
{#if $site}
|
||||||
<LinkTranslate href="https://instagram.com/{$site.instagram}" text="Instagram" target="_blank" rel="noopener">
|
<li class="instagram">
|
||||||
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="#fff">
|
<LinkTranslate href="https://instagram.com/{$site.instagram}" text="Instagram" target="_blank" rel="noopener">
|
||||||
<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 width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="#fff">
|
||||||
</svg>
|
<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"/>
|
||||||
</LinkTranslate>
|
</svg>
|
||||||
</li>
|
</LinkTranslate>
|
||||||
{/if}
|
</li>
|
||||||
</ul>
|
{/if}
|
||||||
</li>
|
</ul>
|
||||||
<li class="by">
|
</li>
|
||||||
<a href="https://cetrucflotte.com" title="A project by Cetrucflotte" target="_blank" rel="noopener">
|
<li class="by">
|
||||||
<img src="/img/logo-ctf.svg" alt="Logo of Cetrucflotte">
|
<a href="https://cetrucflotte.com" title="A project by Cetrucflotte" target="_blank" rel="noopener">
|
||||||
</a>
|
<img src="/img/logo-ctf.svg" alt="Logo of Cetrucflotte">
|
||||||
</li>
|
</a>
|
||||||
</ul>
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
@@ -58,7 +58,7 @@
|
|||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</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)}
|
{#each filteredLocations as location (location.id)}
|
||||||
<div animate:flip="{{ duration: transitionDuration }}"
|
<div animate:flip="{{ duration: transitionDuration }}"
|
||||||
in:receive="{{ key: location.id }}"
|
in:receive="{{ key: location.id }}"
|
||||||
|
|||||||
@@ -106,7 +106,7 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="explore explore--homepage">
|
<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">
|
<div class="anim-mask">
|
||||||
{@html charsToSpan('of')}
|
{@html charsToSpan('of')}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -35,10 +35,12 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
@include breakpoint (sm) {
|
& > ul {
|
||||||
display: flex;
|
@include breakpoint (sm) {
|
||||||
align-items: center;
|
display: flex;
|
||||||
padding-top: 6px;
|
align-items: center;
|
||||||
|
padding-top: 6px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
|||||||
Reference in New Issue
Block a user