Add tabindex to elements for better keyboard navigation

This commit is contained in:
2021-12-06 15:03:41 +01:00
parent 778e15dfbd
commit 8ac954b1a2
9 changed files with 20 additions and 14 deletions

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>