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

Add tabindex to elements for better keyboard navigation

Browse Source
This commit is contained in:
Félix Péault
2021-12-06 15:03:41 +01:00
parent 778e15dfbd
commit 8ac954b1a2
9 changed files with 20 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/routes/[country]/[location]/index.svelte
View File

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

6
src/routes/credits.svelte
View File

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

2
src/routes/photos.svelte
View File

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

2
src/routes/subscribe.svelte
View File

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